質問 > 管理機能 > 商品登録画面に商品画像とは別の画像登録機能を追加したい |
管理機能
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
sksn |
投稿日時: 2017/8/31 17:10
対応状況: −−−
|
新米 登録日: 2013/9/17 居住地: 投稿: 10 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい 返信いただきありがとうございます!
上記のエラーですが、 product.twigの記述によってエラーが出たり出なかったりするので、 こっちが原因かなと思いました。 product.twigをデフォルトの状態にするとエラーは出ません。 product.twigに行った変更は以下です。 47〜177行目をコピーし、 「add_images」等の部分を「add_images_sub01」用の記述に変更 以下、少し長いですが47行目以降のソースを貼ります。 ///// $(function() { $("#thumb").sortable({ cursor: 'move', opacity: 0.7, placeholder: 'ui-state-highlight', update: function (event, ui) { updateRank(); } }); {% if has_class == false %} if ($("#{{ form.class.stock_unlimited.vars.id }}").prop("checked")) { $("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val(''); } else { $("#{{ form.class.stock.vars.id }}").removeAttr("disabled"); } $("#{{ form.class.stock_unlimited.vars.id }}").on("click change", function () { if ($(this).prop("checked")) { $("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val(''); } else { $("#{{ form.class.stock.vars.id }}").removeAttr("disabled"); } }); {% endif %} var proto_img = '' + '<li class="ui-state-default">' + '<img src="__path__" />' + '<a class="delete-image">' + '<svg class="cb cb-close">' + '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cb-close"></use>' + '</svg>' + '</a>' + '</li>'; var proto_add = '{{ form_widget(form.add_images.vars.prototype) }}'; var proto_del = '{{ form_widget(form.delete_images.vars.prototype) }}'; {% for image in form.images %} var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_save_urlpath }}/{{ image.vars.value }}')); var $widget = $('{{ form_widget(image) }}'); $widget.val('{{ image.vars.value }}'); $("#thumb").append($img.append($widget)); {% endfor %} {% for add_image in form.add_images %} var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_temp_urlpath }}/{{ add_image.vars.value }}')); var $widget = $('{{ form_widget(add_image) }}'); $widget.val('{{ add_image.vars.value }}'); $("#thumb").append($img.append($widget)); {% endfor %} {% for delete_image in form.delete_images %} $("#thumb").append('{{ form_widget(delete_image) }}'); {% endfor %} var hideSvg = function () { if ($("#thumb li").length > 0) { $("#icon_no_image").css("display", "none"); } else { $("#icon_no_image").css("display", ""); } }; var updateRank = function () { $("#thumb li").each(function (index) { $(this).find(".rank_images").remove(); filename = $(this).find("input[type='hidden']").val(); $rank = $('<input type="hidden" class="rank_images" name="rank_images[]" />'); $rank.val(filename + '//' + parseInt(index + 1)); $(this).append($rank); }); } hideSvg(); updateRank(); // 画像削除時 var count_del = 0; $("#thumb").on("click", ".delete-image", function () { var $new_delete_image = $(proto_del.replace(/__name__/g, count_del)); var src = $(this).prev().attr('src') .replace('{{ app.config.image_temp_urlpath }}/', '') .replace('{{ app.config.image_save_urlpath }}/', ''); $new_delete_image.val(src); $("#thumb").append($new_delete_image); $(this).parent("li").remove(); hideSvg(); updateRank(); count_del++; }); var count_add = {{ form.add_images|length|default(0) }}; $('#{{ form.product_image.vars.id }}').fileupload({ url: "{{ url('admin_product_image_add') }}", type: "post", dataType: 'json', done: function (e, data) { $('#progress').hide(); $.each(data.result.files, function (index, file) { var path = '{{ app.config.image_temp_urlpath }}/' + file; var $img = $(proto_img.replace(/__path__/g, path)); var $new_img = $(proto_add.replace(/__name__/g, count_add)); $new_img.val(file); $child = $img.append($new_img); $('#thumb').append($child); count_add++; }); hideSvg(); updateRank(); }, fail: function (e, data) { alert('アップロードに失敗しました。'); }, always: function (e, data) { $('#progress').hide(); $('#progress .progress-bar').width('0%'); }, start: function (e, data) { $('#progress').show(); }, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 10000000, maxNumberOfFiles: 10, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); }, processalways: function (e, data) { if (data.files.error) { alert("画像ファイルサイズが大きいか画像ファイルではありません。"); } } }); // 画像アップロード $('#file_upload').on('click', function () { $('#{{ form.product_image.vars.id }}').click(); }); }); <★←ここまでは何も変更していません。デフォルトの状態です。★> $(function() { $("#thumb_sub01").sortable({ cursor: 'move', opacity: 0.7, placeholder: 'ui-state-highlight', update: function (event, ui) { updateRank(); } }); {% if has_class == false %} if ($("#{{ form.class.stock_unlimited.vars.id }}").prop("checked")) { $("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val(''); } else { $("#{{ form.class.stock.vars.id }}").removeAttr("disabled"); } $("#{{ form.class.stock_unlimited.vars.id }}").on("click change", function () { if ($(this).prop("checked")) { $("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val(''); } else { $("#{{ form.class.stock.vars.id }}").removeAttr("disabled"); } }); {% endif %} var proto_img = '' + '<li class="ui-state-default">' + '<img src="__path__" />' + '<a class="delete-image">' + '<svg class="cb cb-close">' + '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cb-close"></use>' + '</svg>' + '</a>' + '</li>'; var proto_add = '{{ form_widget(form.add_images_sub01.vars.prototype) }}'; var proto_del = '{{ form_widget(form.delete_images.vars.prototype) }}'; {% for image_sub02 in form.images_sub01 %} var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_save_urlpath }}/{{ image_sub02.vars.value }}')); var $widget = $('{{ form_widget(image_sub02) }}'); $widget.val('{{ image_sub02.vars.value }}'); $("#thumb_sub01").append($img.append($widget)); {% endfor %} {% for add_image_sub01 in form.add_images_sub01 %} var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_temp_urlpath }}/{{ add_image_sub01.vars.value }}')); var $widget = $('{{ form_widget(add_image_sub01) }}'); $widget.val('{{ add_image_sub01.vars.value }}'); $("#thumb_sub01").append($img.append($widget)); {% endfor %} {% for delete_image in form.delete_images %} $("#thumb_sub01").append('{{ form_widget(delete_image) }}'); {% endfor %} var hideSvg = function () { if ($("#thumb_sub01 li").length > 0) { $("#icon_no_image_sub01").css("display", "none"); } else { $("#icon_no_image_sub01").css("display", ""); } }; var updateRank = function () { $("#thumb_sub01 li").each(function (index) { $(this).find(".rank_images").remove(); filename = $(this).find("input[type='hidden']").val(); $rank_sub01 = $('<input type="hidden" class="rank_images" name="rank_images[]" />'); $rank_sub01.val(filename + '//' + parseInt(index + 1)); $(this).append($rank_sub01); }); } hideSvg(); updateRank(); // 画像削除時 var count_del = 0; $("#thumb_sub01").on("click", ".delete-image", function () { var $new_delete_image = $(proto_del.replace(/__name__/g, count_del)); var src = $(this).prev().attr('src') .replace('{{ app.config.image_temp_urlpath }}/', '') .replace('{{ app.config.image_save_urlpath }}/', ''); $new_delete_image.val(src); $("#thumb_sub01").append($new_delete_image); $(this).parent("li").remove(); hideSvg(); updateRank(); count_del++; }); var count_add = {{ form.add_images_sub01|length|default(0) }}; $('#{{ form.product_sub01_image.vars.id }}').fileupload({ url: "{{ url('admin_product_sub01_image_add') }}", type: "post", dataType: 'json', done: function (e, data) { $('#progress_sub01').hide(); $.each(data.result.files, function (index, file) { var path = '{{ app.config.image_temp_urlpath }}/' + file; var $img = $(proto_img.replace(/__path__/g, path)); var $new_img = $(proto_add.replace(/__name__/g, count_add)); $new_img.val(file); $child = $img.append($new_img); $('#thumb_sub01').append($child); count_add++; }); hideSvg(); updateRank(); }, fail: function (e, data) { alert('アップロードに失敗しました。'); }, always: function (e, data) { $('#progress_sub01').hide(); $('#progress_sub01 .progress-bar').width('0%'); }, start: function (e, data) { $('#progress_sub01').show(); }, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 10000000, maxNumberOfFiles: 10, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress_sub01 .progress-bar').css( 'width', progress + '%' ); }, processalways: function (e, data) { if (data.files.error) { alert("画像ファイルサイズが大きいか画像ファイルではありません。"); } } }); // 画像アップロード $('#file_upload_sub01').on('click', function () { $('#{{ form.product_sub01_image.vars.id }}').click(); }); }); ///// 以上になります。 何かおかしなところはあるでしょうか・・・? よろしくお願いいたします。 |
フラット表示 | 前のトピック | 次のトピック |
題名 | 投稿者 | 日時 |
---|---|---|
商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/8/28 16:19 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | 468 | 2017/8/29 12:26 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/8/29 15:04 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | 468 | 2017/8/29 17:42 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/8/30 9:55 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/8/30 16:54 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | 468 | 2017/8/30 17:59 |
» Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/8/31 17:10 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | 468 | 2017/9/6 10:39 |
Re: 商品登録画面に商品画像とは別の画像登録機能を追加したい | sksn | 2017/9/12 15:09 |