app/template/default/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <style>
  17.         .hidden{
  18.             display: none;
  19.         }
  20.         .slick-slider {
  21.             margin-bottom: 30px;
  22.         }
  24.         .slick-dots {
  25.             position: absolute;
  26.             bottom: -45px;
  27.             display: block;
  28.             width: 100%;
  29.             padding: 0;
  30.             list-style: none;
  31.             text-align: center;
  32.         }
  34.         .slick-dots li {
  35.             position: relative;
  36.             display: inline-block;
  37.             width: 20px;
  38.             height: 20px;
  39.             margin: 0 5px;
  40.             padding: 0;
  42.             cursor: pointer;
  43.         }
  45.         .slick-dots li button {
  46.             font-size: 0;
  47.             line-height: 0;
  48.             display: block;
  49.             width: 20px;
  50.             height: 20px;
  51.             padding: 5px;
  52.             cursor: pointer;
  53.             color: transparent;
  54.             border: 0;
  55.             outline: none;
  56.             background: transparent;
  57.         }
  59.         .slick-dots li button:hover,
  60.         .slick-dots li button:focus {
  61.             outline: none;
  62.         }
  64.         .slick-dots li button:hover:before,
  65.         .slick-dots li button:focus:before {
  66.             opacity: 1;
  67.         }
  69.         .slick-dots li button:before {
  70.             content: " ";
  71.             line-height: 20px;
  72.             position: absolute;
  73.             top: 0;
  74.             left: 0;
  75.             width: 12px;
  76.             height: 12px;
  77.             text-align: center;
  78.             opacity: .25;
  79.             background-color: black;
  80.             border-radius: 50%;
  82.         }
  84.         .slick-dots li.slick-active button:before {
  85.             opacity: .75;
  86.             background-color: black;
  87.         }
  89.         .slick-dots li button.thumbnail img {
  90.             width: 0;
  91.             height: 0;
  92.         }
  93.         .price_no_tax{
  94.             color: black;
  95.         }
  96.         .price_no_tax_first{
  97.             margin-left: 30px;
  98.         }
  99.         .product_plate_type_print img{
  100.             width: unset;
  101.         }
  102.         .ec-productRole .ec-productRole__category{
  103.             border-bottom: unset;
  104.         }
  105.     </style>
  106. {% endblock %}
  109. {# --- この商品がカテゴリID=124か判定 --- #}
  110.     {% set is_calendar = false %}
  111.     {% for pc in Product.ProductCategories %}
  112.         {% if pc.Category.id == 124 %}
  113.             {% set is_calendar = true %}
  114.         {% endif %}
  115.     {% endfor %}
  117. {% block javascript %}
  118.     <script>
  119.         var stocks = {{stocks|json_encode|raw}};
  121.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  123.         // 規格2に選択肢を割り当てる。
  124.         function fnSetClassCategories(form, classcat_id2_selected) {
  125.             var $form = $(form);
  126.             var product_id = $form.find('input[name=product_id]').val();
  127.             var $sele1 = $form.find('select[name=classcategory_id1]');
  128.             var $sele2 = $form.find('select[name=classcategory_id2]');
  129.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  130.         }
  131.         var code = jQuery('.product-code-default').text();
  132.         if (Number(stocks[code]) < 0){
  133.             jQuery('.product-stock-quantity-default').html('<b>あり</b>');
  134.         }
  135.         if (stocks[code] != undefined && stocks[code] > 0){
  136.             jQuery('.product-stock-quantity-default').html(stocks[code]);
  137.         }else if (stocks[code] != undefined && stocks[code] == 0){
  138.             jQuery('.product-stock-quantity-default').html('<b>なし</b>');
  139.         }
  141.         {% if form.classcategory_id2 is defined %}
  142.             fnSetClassCategories(
  143.                 $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  144.             );
  145.         {% elseif form.classcategory_id1 is defined %}
  146.             $('input[name="classcategory_option"]').on('change', function(e) {
  147.                 $('#classcategory_id1').val($(e.target).val()).change();
  148.             })
  149.             eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  150.         {% endif %}
  151.     </script>
  152.     <script>
  153.         $(function() {
  154.             // bfcache無効化
  155.             $(window).bind('pageshow', function(event) {
  156.                 if (event.originalEvent.persisted) {
  157.                     location.reload(true);
  158.                 }
  159.             });
  161.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  162.             // img タグに width, height が付与されている.
  163.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  164.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  165.             $('.ec-grid2__cell').hide();
  166.             var removeSize = function () {
  167.                 $('.slide-item').height('');
  168.                 $('.slide-item img')
  169.                     .removeAttr('width')
  170.                     .removeAttr('height')
  171.                     .removeAttr('style');
  172.             };
  173.             var slickInitial = function(slick) {
  174.                 $('.ec-grid2__cell').fadeIn(1500);
  175.                 var baseHeight = $(slick.target).height();
  176.                 var baseWidth = $(slick.target).width();
  177.                 var rate = baseWidth / baseHeight;
  179.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  180.                 // transform を使用することでCLSの影響を受けないようにする
  181.                 $('.slide-item img')
  182.                     .css(
  183.                         {
  184.                             'transform-origin': 'top left',
  185.                             'transform': 'scaleY(' + rate + ')',
  186.                             'transition': 'transform .1s'
  187.                         }
  188.                     );
  189.                 // 正しいサイズに近くなったら属性を解除する
  190.                 setTimeout(removeSize, 500);
  191.             };
  192.             $('.item_visual').on('init', slickInitial);
  193.             // リサイズ時は CLS の影響を受けないため属性を解除する
  194.             $(window).resize(removeSize);
  195.             $('.item_visual').slick({
  196.                 dots: false,
  197.                 arrows: false,
  198.                 responsive: [{
  199.                     breakpoint: 768,
  200.                     settings: {
  201.                         dots: true
  202.                     }
  203.                 }]
  204.             });
  206.             $('.slideThumb').on('click', function() {
  207.                 var index = $(this).attr('data-index');
  208.                 $('.item_visual').slick('slickGoTo', index, false);
  209.             })
  210.         });
  211.     </script>
  212.     <script>
  213.         $(function() {
  215.             function htmlQty(type, printerUnit, orderUnit) {
  216.                 var html = ``;
  218.                 if(type === 1) {
  219.                     {% if Product.printer_unit %}
  220.                         html += `<select id="quantity" name="quantity" style="min-width:unset;" placeholder="数量" class="form-select">`;
  221.                             html += `<option value="" selected="selected">数量</option>`;
  222.                             for(let i = 1; i < 31; i++) {
  223.                                 html += `<option value="${ i*printerUnit }">${ i*printerUnit }</option>`;
  224.                             }
  225.                         html += `</select>`;
  226.                     {% else %}
  228.                         if(orderUnit > 0) {
  229.                             if(printerUnit === 0) {
  230.                                 printerUnit = orderUnit;
  231.                             }
  232.                             html += `<select id="quantity" name="quantity" style="min-width:unset;" placeholder="数量" class="form-select">`;
  233.                                 html += `<option value="" selected="selected">数量</option>`;
  234.                                 for(let i = 1; i < 31; i++) {
  235.                                     html += `<option value="${ i*printerUnit }">${ i*printerUnit }</option>`;
  236.                                 }
  237.                             html += `</select>`;
  238.                         } else {
  239.                             html += `<input type="number" id="quantity" name="quantity" required="required" min="1" maxlength="9" style="min-width:unset; display: block !important;" placeholder="数量" class="form-control" value="1">`;
  240.                         }
  241.                     {% endif %}
  242.                 } else {
  243.                     {% if Product.order_unit %}
  244.                         html += `<select id="quantity" name="quantity" style="min-width:unset;" placeholder="数量" class="form-select">`;
  245.                             html += `<option value="" selected="selected">数量</option>`;
  246.                             for(let i = 1; i < 31; i++) {
  247.                                 html += `<option value="${ i*orderUnit }">${ i*orderUnit }</option>`;
  248.                             }
  249.                         html += `</select>`;
  250.                     {% else %}
  251.                         html += `<input type="number" id="quantity" name="quantity" required="required" min="1" maxlength="9" style="min-width:unset; display: block !important;" placeholder="数量" class="form-control" value="1">`;
  252.                     {% endif %}
  253.                 }
  255.                 return html;
  256.             }
  257.             $(".group-input-qty").html('');
  258.             $(".group-input-qty").append(htmlQty(0, {{ Product.printer_unit | default(0) }}, {{ Product.order_unit | default(0) }}));
  261.             $('.add-cart').on('click', function(event) {
  262.                 {% if form.classcategory_id1 is defined %}
  263.                 // 規格1フォームの必須チェック
  264.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  265.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  266.                     return true;
  267.                 } else {
  268.                     $('#classcategory_id1')[0].setCustomValidity('');
  269.                 }
  270.                 {% endif %}
  272.                 {% if form.classcategory_id2 is defined %}
  273.                 // 規格2フォームの必須チェック
  274.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  275.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  276.                     return true;
  277.                 } else {
  278.                     $('#classcategory_id2')[0].setCustomValidity('');
  279.                 }
  280.                 {% endif %}
  282.                 // 個数フォームのチェック
  283.                 var isPrint = false;
  284.                 if ($('#is_print').val() == 1) {
  285.                     isPrint = true;
  286.                     if (!$('#product_print_color').val()) {
  287.                         $('#product_print_color')[0].setCustomValidity('{{ 'ネームプリントの色を選択してください。'|trans }}');
  288.                         return true;
  289.                     } else {
  290.                         $('#product_print_color')[0].setCustomValidity('');
  291.                     }
  292.                 }
  294.                 // 個数フォームのチェック
  295.                     if (!$('#quantity').val()) {
  296.                         if ($('#quantity').prop('nodeName') == 'SELECT') {
  297.                             $('#quantity')[0].setCustomValidity('{{ '数量を選択してください。'|trans }}');
  298.                         } else {
  299.                             $('#quantity')[0].setCustomValidity('{{ '数量を入力してください。'|trans }}');
  300.                         }
  301.                         return true;
  302.                     } else {
  303.                         $('#quantity')[0].setCustomValidity('');
  304.                     }
  306.                 event.preventDefault();
  307.                 $form = $('#form1');
  308.                 $.ajax({
  309.                     url: $form.attr('action'),
  310.                     type: $form.attr('method'),
  311.                     data: $form.serialize(),
  312.                     dataType: 'json',
  313.                     beforeSend: function(xhr, settings) {
  314.                         // Buttonを無効にする
  315.                         $('.add-cart').prop('disabled', true);
  316.                     }
  317.                 }).done(function(data) {
  318.                     // レスポンス内のメッセージをalertで表示
  319.                     $.each(data.messages, function() {
  320.                         $('#ec-modal-header').html(this);
  321.                     });
  323.                     $('.ec-modal').show()
  325.                     // カートブロックを更新する
  326.                     $.ajax({
  327.                         url: "{{ url('block_cart') }}",
  328.                         type: 'GET',
  329.                         dataType: 'html'
  330.                     }).done(function(html) {
  331.                         $('.ec-headerRole__cart').html(html);
  332.                     });
  333.                 }).fail(function(data) {
  334.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  335.                 }).always(function(data) {
  336.                     // Buttonを有効にする
  337.                     $('.add-cart').prop('disabled', false);
  338.                 });
  339.             });
  341.             $("#is_print").change(function(){
  342.                 $(".group-input-qty").html('');
  344.                 if ($(this).val() == 1) {
  345.                     $('.form-is_repurchase').css('display', 'block');
  346.                     $('.form-is_repurchase input:first').prop('checked', true);
  347.                     $('.form-product-color').css('display', 'block');
  348.                     $(".group-input-qty").append(htmlQty(1, {{ Product.printer_unit | default(0) }}, {{ Product.order_unit | default(0) }}));
  349.                     // $("#quantity").attr('name', 'quantity').css('display', 'inline-block');
  350.                     // $("#quantity_raw").attr('name', 'quantity_raw').css('display', 'none');
  351.                 } else {
  352.                     $('.form-is_repurchase').css('display', 'none');
  353.                     $('.form-is_repurchase input').prop('checked', false);
  354.                     $('.form-product-color').css('display', 'none');
  355.                     $('.form-product-color select').val('');
  356.                     $(".group-input-qty").append(htmlQty(0, {{ Product.printer_unit | default(0) }}, {{ Product.order_unit | default(0) }}));
  357.                     // $("#quantity").attr('name', 'quantity_raw').css('display', 'none');
  358.                     // $("#quantity_raw").attr('name', 'quantity').css('display', 'inline-block');
  359.                 }
  360.             });
  361.         });
  365.         $('.ec-modal-wrap').on('click', function(e) {
  366.             // モーダル内の処理は外側にバブリングさせない
  367.             e.stopPropagation();
  368.         });
  369.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  370.             $('.ec-modal').hide()
  371.         });
  372.         var nIndexClass = 1;
  373.         $("#classcategory_id1 > option").each(function(k, v) {
  374.             if(this.value != "__unselected") {
  375.                 $(v).attr('key', nIndexClass);
  376.                 nIndexClass++;
  377.             }
  378.         });
  379.         var jsonQty = {{ Product.getAllStocks|json_encode|raw }}
  380.         var select_classcategory_id1 = 0;
  381.         $('#classcategory_id1').on('change', function(e) {
  382.             if(this.selectedIndex < 1) return false;
  383.             {% if form.classcategory_id1 is defined %}
  384.                 getClass(this.selectedIndex)
  385.                 {% if form.classcategory_id2 is defined %}
  386.                     select_classcategory_id1 = this.selectedIndex;
  387.                 {% endif %}
  388.             {% endif %}
  389.         });
  390.         $('#classcategory_id2').on('change', function(e) {
  391.             if(this.selectedIndex < 1) return false;
  392.             getClass(select_classcategory_id1, this.selectedIndex)
  393.         });
  395.         function getClass(class1, class2) {
  396.             var qty = '';
  397.             {% if form.classcategory_id1 is defined %}
  398.                qty = jsonQty[class1];
  399.                 {% if form.classcategory_id2 is defined %}
  400.                     qty = jsonQty[class1][class2];
  401.                 {% endif %}
  402.             {% endif %}
  403.             if(qty == "0") {
  404.                 $('.ec-productRole__code span.product-stock-quantity-default').html("<b>なし</b>");
  405.             } else if(!!qty === false){
  406.                 $('.ec-productRole__code span.product-stock-quantity-default').html("<b>あり</b>");
  407.             }else {
  408.                 qty = parseInt(qty);
  409.                 $('.ec-productRole__code span.product-stock-quantity-default').html("<b>"+qty+"</b>");
  410.             }
  411.         }
  413.         // $('#is_print').change(function() {
  414.         //     window.location.href = window.location.href+'?is_print='+$(this).val();
  415.         // });
  416.     </script>
  418.     <script type="application/ld+json">
  419.     {
  420.         "@context": "https://schema.org/",
  421.         "@type": "Product",
  422.         "name": "{{ Product.name }}",
  423.         "image": [
  424.             {% for img in Product.ProductImage %}
  425.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  427.             {% else %}
  428.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  429.             {% endfor %}
  430.         ],
  431.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  432.         {% if Product.code_min %}
  433.         "sku": "{{ Product.code_min }}",
  434.         {% endif %}
  435.         "offers": {
  436.             "@type": "Offer",
  437.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  438.             "priceCurrency": "{{ eccube_config.currency }}",
  439.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  440.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  441.         }
  442.     }
  443.     </script>
  444.     {# --- この商品がカテゴリID=124か判定 --- #}
  445. {% set is_calendar = false %}
  446. {% for pc in Product.ProductCategories %}
  447.   {% if pc.Category.id == 124 %}
  448.     {% set is_calendar = true %}
  449.   {% endif %}
  450. {% endfor %}
  452. {% if is_calendar %}
  453. <script>
  454. document.addEventListener('DOMContentLoaded', function () {
  455.   // 規格1（数量パターン）
  456.   const select1 = document.getElementById('classcategory_id1')
  457.               || document.querySelector('select[name="classcategory_id1"]');
  458.   if (!select1) return;
  460.   // 規格2（優先: #is_print、なければ classcategory_id2）
  461.   const isPrint = document.getElementById('is_print'); // 0=しない, 1=する
  462.   const select2 = isPrint || document.getElementById('classcategory_id2')
  463.                || document.querySelector('select[name="classcategory_id2"]');
  465.   // 再版区分（表示/非表示を切り替え）
  466.   const repurchaseBlock = document.querySelector('.form-is_repurchase');
  468.   // ネームプリント切替連動（カレンダー）
  469. const PRINT_ON_VALUES   = new Set(['291', '292']);  // ネームプリントあり
  470. const PRINT_OFF_VALUES  = new Set(['289', '290']);  // ネームプリントなし
  471. const PRINT_BOTH_VALUES = new Set(['288']);         // 両方選択可
  473.   // classcategory_id2 用に元<option>保存（#is_printが無い場合に使う）
  474.   let original2 = null;
  475.   if (select2 && select2 !== isPrint) {
  476.     original2 = Array.from(select2.options).map(o => ({ value: o.value, text: (o.text||'').trim() }));
  477.   }
  479.   function applyRepurchaseVisibility() {
  480.     if (!repurchaseBlock) return;
  481.     if (isPrint) {
  482.       repurchaseBlock.style.display = (isPrint.value === '1') ? '' : 'none';
  483.     }
  484.   }
  486.   function setIsPrintMode(mode) {
  487.     // #is_print がある（今回の構成）場合
  488.     if (isPrint) {
  489.       isPrint.innerHTML = '';
  490.       if (mode === 'do') {
  491.         isPrint.add(new Option('ネームプリントする', '1'));
  492.         isPrint.value = '1';
  493.       } else if (mode === 'dont') {
  494.         isPrint.add(new Option('ネームプリントしない', '0'));
  495.         isPrint.value = '0';
  496.       } else if (mode === 'both') {
  497.         // ★ 両方出す
  498.         isPrint.add(new Option('ネームプリントしない', '0'));
  499.         isPrint.add(new Option('ネームプリントする', '1'));
  500.         // 初期は「しない」に寄せる（必要なら '1' に変更可）
  501.         isPrint.value = '0';
  502.       }
  503.       // 他のハンドラより後に発火させる
  504.       setTimeout(() => {
  505.         isPrint.dispatchEvent(new Event('change', { bubbles: true }));
  506.         applyRepurchaseVisibility();
  507.       }, 0);
  508.       return;
  509.     }
  511.     // #is_print が無く、classcategory_id2 を使っている場合（参考）
  512.     if (select2 && original2) {
  513.       let list = [];
  514.       if (mode === 'do')      list = original2.filter(o => o.text.includes('する'));
  515.       else if (mode === 'dont') list = original2.filter(o => o.text.includes('しない'));
  516.       else /* both */         list = original2.slice();
  518.       select2.innerHTML = '';
  519.       list.forEach(o => select2.add(new Option(o.text, o.value)));
  520.       select2.selectedIndex = list.length ? 0 : -1;
  522.       setTimeout(() => {
  523.         select2.dispatchEvent(new Event('change', { bubbles: true }));
  524.       }, 0);
  526.       if (repurchaseBlock) {
  527.         repurchaseBlock.style.display = (mode === 'do') ? '' : 'none';
  528.       }
  529.     }
  530.   }
  532.   function onFirstChanged() {
  533.     const v1 = select1.value;
  534.     if (!v1 || v1 === '__unselected') {
  535.       if (repurchaseBlock) repurchaseBlock.style.display = 'none';
  536.       return;
  537.     }
  538.     if (PRINT_BOTH_VALUES.has(v1)) {
  539.       setIsPrintMode('both');  // ★ 100冊以上～ は両方
  540.     } else if (PRINT_ON_VALUES.has(v1)) {
  541.       setIsPrintMode('do');
  542.     } else if (PRINT_OFF_VALUES.has(v1)) {
  543.       setIsPrintMode('dont');
  544.     } else {
  545.       setIsPrintMode('dont');
  546.     }
  547.   }
  549.   if (isPrint) {
  550.     isPrint.addEventListener('change', applyRepurchaseVisibility);
  551.   }
  554. function updateIsPrintOptions(mode) {
  555.   const isPrint = document.getElementById('is_print');
  556.   const repurchaseBlock = document.querySelector('.form-is_repurchase');
  558.   if (!isPrint) return;
  560.   // 一旦 option 全削除
  561.   isPrint.innerHTML = '';
  563.   if (mode === 'do') {
  564.     isPrint.add(new Option('ネームプリントする', '1'));
  565.     isPrint.value = '1';
  566.   } else if (mode === 'dont') {
  567.     isPrint.add(new Option('ネームプリントしない', '0'));
  568.     isPrint.value = '0';
  569.   } else {
  570.     isPrint.add(new Option('ネームプリントしない', '0'));
  571.     isPrint.add(new Option('ネームプリントする', '1'));
  572.     isPrint.value = '0';
  573.   }
  575.   // ネームプリント「する」なら再版選択を表示
  576.   if (repurchaseBlock) {
  577.     repurchaseBlock.style.display = (isPrint.value === '1') ? '' : 'none';
  578.   }
  580.   // イベント発火で数量 UI 切り替えなど反映
  581.   isPrint.dispatchEvent(new Event('change', { bubbles: true }));
  582. }
  584.   select1.addEventListener('change', onFirstChanged);
  585.   onFirstChanged(); // 初期反映
  586. });
  587. </script>
  588. <script>
  589. document.addEventListener('DOMContentLoaded', function () {
  590.   const el1 = document.getElementById('classcategory_id1') || document.querySelector('select[name="classcategory_id1"]');
  591.   const el2 = document.getElementById('classcategory_id2') || document.querySelector('select[name="classcategory_id2"]');
  592.   const out = document.getElementById('delivery-duration-text');
  594.   // 発送目安マップ
  595.   const deliveryMap = {};
  596.   {% for pc in Product.ProductClasses %}
  597.     {% set c1 = pc.ClassCategory1 ? pc.ClassCategory1.id : '' %}
  598.     {% set c2 = pc.ClassCategory2 ? pc.ClassCategory2.id : '' %}
  599.     {% set label = pc.DeliveryDuration ? pc.DeliveryDuration.name : '' %}
  600.     {% if pc.ClassCategory2 %}
  601.       deliveryMap['{{ c1 }}'] = deliveryMap['{{ c1 }}'] || {};
  602.       deliveryMap['{{ c1 }}']['{{ c2 }}'] = '{{ label|e('js') }}';
  603.     {% else %}
  604.       deliveryMap['{{ c1 }}'] = '{{ label|e('js') }}';
  605.     {% endif %}
  606.   {% endfor %}
  608.   function updateDelivery() {
  609.     if (!el1 || !out) return;
  610.     const v1 = el1.value;
  611.     if (!v1 || v1 === '__unselected') {
  612.       out.textContent = '';
  613.       return;
  614.     }
  616.     let label = '';
  617.     if (el2 && el2.value && el2.value !== '__unselected') {
  618.       if (deliveryMap[v1] && typeof deliveryMap[v1] === 'object') {
  619.         label = deliveryMap[v1][el2.value] || '';
  620.       }
  621.     } else {
  622.       label = (typeof deliveryMap[v1] === 'string') ? deliveryMap[v1] : '';
  623.     }
  625.     out.textContent = label || '';
  626.   }
  628.   if (el1) el1.addEventListener('change', updateDelivery);
  629.   if (el2) el2.addEventListener('change', updateDelivery);
  630.   updateDelivery(); // 初期表示
  631. });
  632. </script>
  633. <script>
  634. document.addEventListener('DOMContentLoaded', function () {
  635.   const form = document.querySelector('#form1');
  636.   const select1 = document.getElementById('classcategory_id1');
  637.   const qtySelector = 'select[name="quantity"], input[name="quantity"]';
  639.   function getQtyEl() {
  640.     return document.querySelector(qtySelector);
  641.   }
  643.   function getFixedQty(v1) {
  644.     if (v1 === '291' || v1 === '289') return '50';
  645.     if (v1 === '292' || v1 === '290') return '90';
  646.     return null;
  647.   }
  649.   function enforceQuantity(showAlert = false) {
  650.     const selected = select1?.value;
  651.     const qtyEl = getQtyEl();
  652.     const fixed = getFixedQty(selected);
  653.     if (!selected || !qtyEl || !fixed) return;
  655.     if (qtyEl.value !== fixed) {
  656.       if (showAlert) alert(`この規格では数量は${fixed}個に固定されています。`);
  657.       qtyEl.value = fixed;
  658.     }
  659.   }
  661.   // 数量変更時に自動補正
  662.   document.addEventListener('change', function (e) {
  663.     if (e.target.matches(qtySelector) || e.target.id === 'classcategory_id1') {
  664.       enforceQuantity(false);
  665.     }
  666.   });
  668.   // フォーム送信時にも補正とアラート
  669.   if (form) {
  670.     form.addEventListener('submit', function () {
  671.       enforceQuantity(true);
  672.     });
  673.   }
  674. });
  675. </script>
  676. <script>
  677. document.addEventListener('DOMContentLoaded', function () {
  678.   const select1 = document.getElementById('classcategory_id1');
  679.   const form = document.querySelector('#form1');
  681.   function getQtyEl() {
  682.     return document.querySelector('select[name="quantity"], input[name="quantity"]');
  683.   }
  685.   function getFixedQty(v1) {
  686.     if (v1 === '291' || v1 === '289') return '50';
  687.     if (v1 === '292' || v1 === '290') return '90';
  688.     return null;
  689.   }
  691.   function enforceQuantity(showAlert = false) {
  692.     const selected = select1?.value;
  693.     const qtyEl = getQtyEl();
  694.     const fixed = getFixedQty(selected);
  695.     if (!selected || !qtyEl || !fixed) return;
  697.     if (qtyEl.value !== fixed) {
  698.       if (showAlert) alert(`この規格では数量は ${fixed} 個に固定されています。`);
  699.       qtyEl.value = fixed;
  700.     }
  701.   }
  703.   function attachQtyWatcher() {
  704.     const qtyEl = getQtyEl();
  705.     if (!qtyEl) return;
  706.     qtyEl.removeEventListener('change', qtyEl._handler || (() => {}));
  707.     qtyEl._handler = () => enforceQuantity(false);
  708.     qtyEl.addEventListener('change', qtyEl._handler);
  709.   }
  711.   // セレクト1が変わるたびに数量制御イベント再アタッチ
  712.   select1?.addEventListener('change', () => {
  713.     setTimeout(() => {
  714.       enforceQuantity(false);
  715.       attachQtyWatcher();
  716.     }, 100);
  717.   });
  719.   // is_print変更時もセレクトが入れ替わるため再アタッチ
  720.   const isPrint = document.getElementById('is_print');
  721.   isPrint?.addEventListener('change', () => {
  722.     setTimeout(() => {
  723.       enforceQuantity(false);
  724.       attachQtyWatcher();
  725.     }, 100);
  726.   });
  728.   // 最初の数量セレクトにも適用
  729.   setTimeout(() => {
  730.     enforceQuantity(false);
  731.     attachQtyWatcher();
  732.   }, 300);
  734.   // フォーム送信時チェック
  735.   form?.addEventListener('submit', function (e) {
  736.     enforceQuantity(true);
  737.   });
  738. });
  739. </script>
  741. {% endif %}//カレンダー終わり
  743. {% endblock %}
  745. {% block main %}
  746.     <div class="ec-productRole">
  747.         <div class="ec-grid2">
  748.             <div class="ec-grid2__cell">
  749.                 <div class="ec-sliderItemRole">
  750.                     {# 関連カテゴリ #}
  751.                     {% if Product.ProductCategories is not empty %}
  752.                         <div class="ec-productRole__category">
  753.                             <div>{{ '関連カテゴリ'|trans }}</div>
  754.                             {% for ProductCategory in Product.ProductCategories %}
  755.                                 <ul>
  756.                                     <li>
  757.                                         {% for Category in ProductCategory.Category.path %}
  758.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  759.                                             <span>＞</span>{% endif -%}
  760.                                         {% endfor %}
  761.                                     </li>
  762.                                 </ul>
  763.                             {% endfor %}
  764.                         </div>
  765.                     {% endif %}
  766.                 </div>
  768.                 <div class="ec-sliderItemRole">
  769.                     <div class="item_visual">
  770.                         {% for ProductImage in Product.ProductImage %}
  771.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  772.                         {% else %}
  773.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  774.                         {% endfor %}
  775.                     </div>
  776.                     <div class="item_nav">
  777.                         {% for ProductImage in Product.ProductImage %}
  778.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  779.                         {% endfor %}
  780.                     </div>
  781.                 </div>
  782.                 {% set sampleTagIds = [8, 12] %}
  783. {% set hasSampleTag = false %}
  784. {% for ProductTag in Product.ProductTag %}
  785.     {% if ProductTag.Tag.id in sampleTagIds %}
  786.         {% set hasSampleTag = true %}
  787.     {% endif %}
  788. {% endfor %}
  790. {% if hasSampleTag %}
  791.                 <div class="ec-sliderItemRole">
  792.                     <p style="text-align: center;">
  793.                         <a class="ec-blockBtn--cancel" href="/contact?product_id={{ Product.id }}" target="_blank">サンプル請求</a>
  794.                     </p>
  795.                 </div>
  796.                 <div class="ec-sliderItemRole">
  797.                     <p><b>【サンプルについて】</b><br>
  798.                     <b>＜サンプル無料マークの商品について＞</b><br>
  799.                     こちらのの商品は3点まで組み合わせ自由、無料で発送いたします。<br>
  800.                     <b>＜サンプルレンタルOKマークの商品について＞</b><br>
  801.                     こちらの商品は3点まで組み合わせ自由、貸出いたします。（※発送料は弊社負担ですが、ご返却送料はお客様ご負担となります。※サンプル到着後2週間以内にご返却ください。）</p><br>
  802.                     <p>※在庫状況により、ご要望に添えない場合がございます。ご了承ください。</p>
  803.                 </div>
  804. {% endif %}
  805.             </div>
  806.             <div class="ec-grid2__cell">
  807.                 <div class="ec-productRole__profile">
  808.                     {# 商品名 #}
  809.                     <div class="ec-productRole__title">
  810.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  811.                     </div>
  812.                     {# タグ #}
  813.                     <ul class="ec-productRole__tags">
  814.                         {% for Tag in Product.Tags %}
  815.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  816.                         {% endfor %}
  817.                     </ul>
  818.                     {# 通常価格 #}
  819.                     {#{% if Product.hasProductClass -%}
  820.                         <div class="ec-productRole__priceRegular">
  821.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  822.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  823.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  824.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  825.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  826.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  827.                             {% endif %}
  828.                         </div>
  829.                     {% else %}
  830.                         {% if Product.getPrice01Max is not null %}
  831.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  832.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  833.                         {% endif %}
  834.                     {% endif %}#}
  835.                     {# 販売価格 #}
  836.                     <div class="ec-productRole__price">
  837.                         {% if Product.hasProductClass -%}
  838.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  839.                                 <div class="ec-price">
  840.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  841.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  843.                                     <span class="ec-price__price price_no_tax price_no_tax_first">{{ Product.getPrice02Min|price }}</span>
  844.                                     <span class="ec-price__tax price_no_tax">{{ '税抜'|trans }}</span>
  845.                                 </div>
  846.                             {% else %}
  847.                                 <div class="ec-price">
  848.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  849.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span><br>
  851.                                     <span class="ec-price__price price_no_tax">{{ Product.getPrice02Min|price }} ～ {{ Product.getPrice02Max|price }}</span>
  852.                                     <span class="ec-price__tax price_no_tax">{{ '税抜'|trans }}</span>
  853.                                 </div>
  854.                             {% endif %}
  855.                         {% else %}
  856.                             <div class="ec-price">
  857.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  858.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  859.                                 <span class="ec-price__price price_no_tax price_no_tax_first">{{ Product.getPrice02Min|price }}</span>
  860.                                 <span class="ec-price__tax price_no_tax">{{ '税抜'|trans }}</span>
  861.                             </div>
  862.                         {% endif %}
  863.                     </div>
  864.                     {# 商品コード #}
  865.                     {% if Product.code_min is not empty %}
  866.                         <div class="ec-productRole__code">
  867.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  868.                         </div>
  869.                     {% endif %}
  870.                     {% if not is_calendar %}
  871.                         <div class="ec-productRole__code">
  872.                               {{ '在庫'|trans }}： <span class="product-stock-quantity-default"></span>
  873.                         </div>
  874.                     {% endif %}
  875.                     {% if is_calendar %}
  876.                     <div class="ec-productRole__code">
  877.                         発送日目安：<span id="delivery-duration-text"></span>
  878.                     </div>
  879.                     {% endif %}
  880.                     <br>
  881.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  882.                     </div>
  884.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  885.                         {% if Product.stock_find %}
  886.                             <div class="ec-productRole__actions">
  887.                                 {% if form.classcategory_id1 is defined %}
  888.                                     <div class="ec-select">
  889.                                         {{ form_row(form.classcategory_id1, {'label':false}) }}
  890.                                         {{ form_errors(form.classcategory_id1) }}
  891.                                     </div>
  892.                                     {% if form.classcategory_id2 is defined %}
  893.                                         <div class="ec-select">
  894.                                             {{ form_row(form.classcategory_id2, {'label':false}) }}
  895.                                             {{ form_errors(form.classcategory_id2) }}
  896.                                         </div>
  897.                                     {% endif %}
  898.                                 {% endif %}
  900.                                 {% if Product.product_print_type == false %}
  901.                                     {% set colors = Product.product_print_color|split(',') %}
  902.                                     {% if Product.product_print_type == false and colors|length > 0 %}
  903.                                         <div class="row mb-2">
  904.                                             <div class="col-4">
  905.                                                 <div class="ec-select">
  906.                                                     {{ form_widget(form.is_print, {'attr': {'style':'min-width:unset', 'id': 'is_print'}}) }}
  907.                                                     {{ form_errors(form.is_print) }}
  908.                                                 </div>
  909.                                             </div>
  910.                                             <div class="col-6 form-is_repurchase" style="display: none">
  911.                                                 <div class="form-check mt-2">
  912.                                                     {{ form_widget(form.is_repurchase,  {'label_attr': {'class': 'radio-inline'}}) }}
  913.                                                     {{ form_errors(form.is_repurchase) }}
  914.                                                 </div>
  915.                                             </div>
  916.                                         </div>
  917.                                         <div class="row form-product-color" style="display: none">
  918.                                             <div class="col-5">
  919.                                                 <div class="ec-select">
  920.                                                     <div class="mb-3">
  921.                                                         {{ form_widget(form.product_print_color, {'attr': {'style':'min-width:unset'}}) }}
  922.                                                         {{ form_errors(form.product_print_color) }}
  923.                                                     </div>
  924.                                                 </div>
  925.                                             </div>
  926.                                         </div>
  927.                                     {% endif %}
  928.                                 {% endif %}
  930.                                 <div class="row">
  931.                                     <div class="col-3">
  932.                                         <div class="{% if Product.order_unit %}ec-select{% else %}ec-numberInput{% endif %} mt-2 group-input-qty">
  933.                                             {{ form_widget(form.quantity, {'attr': {'style':'min-width:unset;display: none;', 'placeholder': '数量'}}) }}
  934. {#                                            {{ form_widget(form.quantity_raw, {'attr': {'style':'min-width: unset;display: none', 'placeholder': '数量'}}) }}#}
  935.                                             {{ form_errors(form.quantity) }}
  937.                                         </div>
  938.                                     </div>
  939.                                     <div class="col-8">
  940.                                         <button type="submit" class="ec-blockBtn--action add-cart">
  941.                                             {{ 'カートに入れる'|trans }}
  942.                                         </button>
  943.                                     </div>
  944.                                 </div>
  945.                             </div>
  946.                         {% else %}
  947.                             <div class="ec-productRole__btn">
  948.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  949.                                     {{ 'ただいま品切れ中です。'|trans }}
  950.                                 </button>
  951.                             </div>
  952.                         {% endif %}
  954.                         {{ form_rest(form) }}
  955.                     </form>
  956.                     <div class="ec-modal">
  957.                         <div class="ec-modal-overlay">
  958.                             <div class="ec-modal-wrap">
  959.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  960.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  961.                                 <div class="ec-modal-box">
  962.                                     <div class="ec-role">
  963.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  964.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  965.                                     </div>
  966.                                 </div>
  967.                             </div>
  968.                         </div>
  969.                     </div>
  971.                     <div class="ec-productRole__SNS">
  972.                         <a href="https://twitter.com/share" class="twitter-share-button" data-via="lemanze" data-lang="ja" data-count="none">ツイート</a>
  973.                         <script>
  974.                             !function(d,s,id){
  975.                                 var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
  976.                                 if(!d.getElementById(id)){
  977.                                     js=d.createElement(s);
  978.                                     js.id=id;
  979.                                     js.src=p+'://platform.twitter.com/widgets.js';
  980.                                     fjs.parentNode.insertBefore(js,fjs);
  981.                                 }
  982.                             }(document, 'script', 'twitter-wjs');
  983.                         </script>
  985.                         <div class="line-it-button" data-lang="ja" data-type="share-a" data-env="REAL" data-url="{{ url('product_detail', {'id': Product.id}) }}" data-color="default" data-size="small" data-count="true" data-ver="3" style="display: none;"></div>
  986.                         <script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
  987.                     </div>
  989.                     {% if BaseInfo.option_favorite_product %}
  990.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  991.                             <div class="ec-productRole__btn">
  992.                                 {% if is_favorite == false %}
  993.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  994.                                         {{ 'お気に入りに追加'|trans }}
  995.                                     </button>
  996.                                 {% else %}
  997.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  998.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  999.                                     </button>
  1000.                                 {% endif %}
  1001.                             </div>
  1002.                         </form>
  1003.                     {% endif %}
  1004.                     {% if Product.freearea %}
  1005.                          <div class="ec-productRole__description">
  1006.                              {{ include(template_from_string(Product.freearea|raw|nl2br)) }}
  1007.                         </div>
  1008.                     {% endif %}
  1009.                 </div>
  1010.             </div>
  1011.         </div>
  1012.     </div>
  1013. {% endblock %}