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' %}
  12. {% set isHasLeftSide = false %}
  13. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/product-detail.css') }}">
  15.     <link rel="stylesheet" href="{{ asset('assets/CustomComponent/modal.css') }}">
  16.     <style>
  17.         .custom-quantity {
  18.             border: none;
  19.             font-size: 18px;
  20.             text-align: center;
  21.         }
  22.         /* remove number input arrow */
  23.         .custom-quantity::-webkit-outer-spin-button,
  24.         .custom-quantity::-webkit-inner-spin-button {
  25.             -webkit-appearance: none;
  26.             margin: 0;
  27.         }
  28.         .custom-quantity[type=number] {
  29.             -moz-appearance: textfield;
  30.         }
  31.         .custom-quantity[type=number] {
  32.             -moz-appearance: textfield;
  33.         }
  36.         .slick-slider {
  37.             margin-bottom: 10px;
  38.         }
  40.         .slick-dots {
  41.             position: absolute;
  42.             bottom: -45px;
  43.             display: block;
  44.             width: 100%;
  45.             padding: 0;
  46.             list-style: none;
  47.             text-align: center;
  48.         }
  50.         .slick-dots li {
  51.             position: relative;
  52.             display: inline-block;
  53.             width: 20px;
  54.             height: 20px;
  55.             margin: 0 5px;
  56.             padding: 0;
  58.             cursor: pointer;
  59.         }
  61.         .slick-dots li button {
  62.             font-size: 0;
  63.             line-height: 0;
  64.             display: block;
  65.             width: 20px;
  66.             height: 20px;
  67.             padding: 5px;
  68.             cursor: pointer;
  69.             color: transparent;
  70.             border: 0;
  71.             outline: none;
  72.             background: transparent;
  73.         }
  75.         .slick-dots li button:hover,
  76.         .slick-dots li button:focus {
  77.             outline: none;
  78.         }
  80.         .slick-dots li button:hover:before,
  81.         .slick-dots li button:focus:before {
  82.             opacity: 1;
  83.         }
  85.         .slick-dots li button:before {
  86.             content: " ";
  87.             line-height: 20px;
  88.             position: absolute;
  89.             top: 0;
  90.             left: 0;
  91.             width: 12px;
  92.             height: 12px;
  93.             text-align: center;
  94.             opacity: .25;
  95.             background-color: black;
  96.             border-radius: 50%;
  98.         }
  100.         .slick-dots li.slick-active button:before {
  101.             opacity: .75;
  102.             background-color: black;
  103.         }
  105.         .slick-dots li button.thumbnail img {
  106.             width: 0;
  107.             height: 0;
  108.         }
  109.         .slide-item img {
  110.             border-radius: 10px;
  111.             object-fit: contain;
  112.             max-height: 550px;
  113.             height: 550px;
  114.             width: 100%;
  115.             background-color: #E9E9E9;
  116.         }
  118.         .ec-sliderItemRole .slideThumb img {
  119.             width: 100%;
  120.             border-radius: 6px;
  121.             height: 133px;
  122.             max-height: 133px;
  123.             object-fit: contain;
  125.         }
  126.         .ec-sliderItemRole .slideThumb {
  127.             margin-bottom: 0;
  128.             width: calc(25% - 7.5px);
  129.         }
  130.         .ec-sliderItemRole .item_nav {
  131.             gap: 10px;
  132.         }
  134.         .item_nav {
  135.             display: flex;
  136.             gap: 16px;
  137.             flex-wrap: wrap;
  138.         }
  141.         .slideThumb {
  142.             width: calc(25% - 12px);
  143.         }
  144.         @media screen and (max-width: 1200px) {
  145.             .item_nav {
  146.                 gap: 10px;
  147.             }
  148.             .slideThumb {
  149.                 width: calc(25% - 7.5px);
  150.                 height: 20vw;
  151.             }
  152.             .slide-item img {
  153.                 height: auto;
  154.                 max-height: 500px;
  155.             }
  156.         }
  158.         @media screen and (max-width: 768px) {
  159.             .slide-item img {
  160.                 height: 342px;
  161.             }
  162.         }
  163.         .ec-grid2 {
  164.             gap: 10px;
  165.         }
  166.         .main_button_add_cart, .main_button_add_cart:hover {
  167.             background-color: var(--cart-button-color);
  168.         }
  169.     </style>
  170. {% endblock %}
  172. {% set body_class = 'product_page' %}
  174. {# script #}
  175. {% block javascript %}
  176. <script>
  177. $(document).ready(function() {
  178.     $('.item-minus').click(function () {
  179.         // Check if button is disabled
  180.         if ($(this).hasClass('btn-disabled')) {
  181.             return;
  182.         }
  183.         const $input = $(this).siblings('.quantity-value').find('.custom-quantity');
  184.         let current = parseInt($input.val()) || 0;
  185.         if (current > 1) {
  186.             $input.val(current - 1);
  187.         }
  188.     });
  190.     $('.item-plus').click(function () {
  191.         // Check if button is disabled
  192.         if ($(this).hasClass('btn-disabled')) {
  193.             return;
  194.         }
  195.         const $input = $(this).siblings('.quantity-value').find('.custom-quantity');
  196.         let current = parseInt($input.val()) || 0;
  197.         $input.val(current + 1);
  198.     });
  199. });
  201. const params = new URLSearchParams(window.location.search);
  202. const imei = params.get('imei');
  203. if (imei) {
  204.     $('#user_imei').val(imei);
  205. }
  209. </script>
  210. <script>
  211.     eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  213.     // 規格2に選択肢を割り当てる。
  214.     function fnSetClassCategories(form, classcat_id2_selected) {
  215.         var $form = $(form);
  216.         var product_id = $form.find('input[name=product_id]').val();
  217.         var $sele1 = $form.find('select[name=classcategory_id1]');
  218.         var $sele2 = $form.find('select[name=classcategory_id2]');
  219.         eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  220.     }
  222.     {% if form.classcategory_id2 is defined %}
  223.     fnSetClassCategories(
  224.         $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  225.     );
  226.     {% elseif form.classcategory_id1 is defined %}
  227.     eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  228.     {% endif %}
  230.     // Thêm thuộc tính is_country_category cho classcategory select
  231.     function addCountryCategoryAttributes() {
  232.         // Lấy country_id từ URL
  233.         const countryId = params.get('country_id');
  235.         console.log('Country ID from URL:', countryId);
  236.         console.log('eccube.classCategories:', eccube.classCategories);
  238.         if (!countryId) {
  239.             console.log('No country_id found in URL');
  240.             return; // Không có country_id thì không làm gì
  241.         }
  243.         let hasSelected = false;
  245.         // Thêm thuộc tính cho classcategory_id1
  246.         const $select1 = $('select[name=classcategory_id1]');
  247.         if ($select1.length) {
  248.             console.log('Found select1, checking options...');
  249.             $select1.find('option').each(function() {
  250.                 const $option = $(this);
  251.                 const optionValue = $option.val();
  253.                 let isCountryCategoryFlag = false;
  254.                 if (optionValue && optionValue !== '__unselected') {
  255.                     isCountryCategoryFlag = isCountryCategory(optionValue);
  257.                     if (isCountryCategoryFlag && optionValue === countryId) {
  258.                         console.log('Auto-selecting country category:', optionValue, 'in select1');
  259.                         $option.prop('selected', true);
  260.                         hasSelected = true;
  261.                     }
  262.                 }
  263.                 $option.attr('data-is-country-category', isCountryCategoryFlag);
  264.             });
  266.             // Trigger change event sau khi đã chọn tất cả options
  267.             if (hasSelected) {
  268.                 setTimeout(function() {
  269.                     $select1.trigger('change');
  270.                 }, 10);
  271.             }
  272.         }
  274.         // Thêm thuộc tính cho classcategory_id2
  275.         const $select2 = $('select[name=classcategory_id2]');
  276.         if ($select2.length) {
  277.             console.log('Found select2, checking options...');
  278.             $select2.find('option').each(function() {
  279.                 const $option = $(this);
  280.                 const optionValue = $option.val();
  282.                 // Kiểm tra xem option này có phải là country category không
  283.                 let isCountryCategoryFlag = false;
  284.                 if (optionValue && optionValue !== '__unselected') {
  285.                     // Kiểm tra xem option này có phải là country category không
  286.                     isCountryCategoryFlag = isCountryCategory(optionValue);
  288.                     // Nếu đây là country category và match với country_id, tự động chọn
  289.                     if (isCountryCategoryFlag && optionValue === countryId) {
  290.                         console.log('Auto-selecting country category:', optionValue, 'in select2');
  291.                         $option.prop('selected', true);
  292.                         hasSelected = true;
  293.                     }
  294.                 }
  296.                 // Thêm thuộc tính data-is-country-category
  297.                 $option.attr('data-is-country-category', isCountryCategoryFlag);
  298.             });
  300.             // Trigger change event sau khi đã chọn tất cả options
  301.             if (hasSelected) {
  302.                 setTimeout(function() {
  303.                     $select2.trigger('change');
  304.                 }, 10);
  305.             }
  306.         }
  308.         if (hasSelected) {
  309.             console.log('Country category auto-selection completed');
  310.         }
  311.     }
  313.     // Function để kiểm tra xem một classcategory có phải là country category không
  314.     function isCountryCategory(categoryId) {
  315.         if (eccube.classCategories && eccube.classCategories[categoryId]) {
  316.             console.log('Category', categoryId, 'found in eccube.classCategories');
  317.             return true;
  318.         }
  319.         return false;
  320.     }
  322.     // Chạy function khi document ready và sau khi các select đã được khởi tạo
  323.     $(document).ready(function() {
  324.         // Delay một chút để đảm bảo các select đã được khởi tạo
  325.         setTimeout(function() {
  326.             addCountryCategoryAttributes();
  327.         }, 100);
  328.     });
  331.     // Custom function to update price display
  332.     function updatePriceDisplay(classcat2) {
  333.         var $price02 = $('.price02-default');
  334.         try {
  335.             if (classcat2 && typeof classcat2.price02_inc_tax !== 'undefined' && String(classcat2.price02_inc_tax).length >= 1) {
  336.                 // Show specific price when category is selected
  337.                 $price02.text(classcat2.price02_inc_tax_with_currency).addClass('selected');
  338.             } else {
  339.                 // Show range price when no category is selected
  340.                 var originalPrice = $price02.attr('data-original-price');
  341.                 if (originalPrice) {
  342.                     $price02.text(originalPrice).removeClass('selected');
  343.                 }
  344.             }
  345.         } catch (e) {
  346.             console.log('Error updating price display:', e);
  347.             // Fallback to original price
  348.             var originalPrice = $price02.attr('data-original-price');
  349.             if (originalPrice) {
  350.                 $price02.text(originalPrice).removeClass('selected');
  351.             }
  352.         }
  353.     }
  355.     // Add event listeners for category changes
  356.     $(document).ready(function() {
  357.         // Listen for category 1 changes
  358.         $('select[name=classcategory_id1]').on('change', function() {
  359.             var $form = $(this).parents('form');
  360.             var product_id = $form.find('input[name=product_id]').val();
  361.             var $sele1 = $(this);
  362.             var $sele2 = $form.find('select[name=classcategory_id2]');
  364.             // Update price display after a short delay to let original function complete
  365.             setTimeout(function() {
  366.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  367.             }, 150);
  368.         });
  370.         // Listen for category 2 changes
  371.         $('select[name=classcategory_id2]').on('change', function() {
  372.             var $form = $(this).parents('form');
  373.             var product_id = $form.find('input[name=product_id]').val();
  374.             var $sele1 = $form.find('select[name=classcategory_id1]');
  375.             var $sele2 = $form.find('select[name=classcategory_id2]');
  377.             // Update price display after a short delay to let original function complete
  378.             setTimeout(function() {
  379.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  380.             }, 150);
  381.         });
  382.     });
  384.     // Function to update price based on selected categories
  385.     function updatePriceFromCategories(product_id, classcat_id1, classcat_id2) {
  386.         try {
  387.             // Don't update if categories are not properly selected
  388.             if (!classcat_id1 || classcat_id1 === '__unselected' || classcat_id1 === '') {
  389.                 var $price02 = $('.price02-default');
  390.                 var originalPrice = $price02.attr('data-original-price');
  391.                 if (originalPrice) {
  392.                     $price02.text(originalPrice).removeClass('selected');
  393.                 }
  394.                 return;
  395.             }
  397.             var classcat2;
  398.             if (eccube.hasOwnProperty('productsClassCategories')) {
  399.                 if (eccube.productsClassCategories[product_id] &&
  400.                     eccube.productsClassCategories[product_id][classcat_id1]) {
  401.                     classcat2 = eccube.productsClassCategories[product_id][classcat_id1]['#' + classcat_id2];
  402.                 }
  403.             } else {
  404.                 if (typeof eccube.classCategories[classcat_id1] !== 'undefined') {
  405.                     classcat2 = eccube.classCategories[classcat_id1]['#' + classcat_id2];
  406.                 }
  407.             }
  409.             updatePriceDisplay(classcat2);
  410.         } catch (e) {
  411.             console.log('Error updating price from categories:', e);
  412.             // Fallback to original price
  413.             var $price02 = $('.price02-default');
  414.             var originalPrice = $price02.attr('data-original-price');
  415.             if (originalPrice) {
  416.                 $price02.text(originalPrice).removeClass('selected');
  417.             }
  418.         }
  419.     }
  421.     // Initialize price display when page loads
  422.     $(document).ready(function() {
  423.         // Store original price if not already stored
  424.         var $price02 = $('.price02-default');
  425.         if (!$price02.attr('data-original-price')) {
  426.             $price02.attr('data-original-price', $price02.text());
  427.         }
  429.         // Check if any category is selected on page load
  430.         var $classcat1 = $('select[name=classcategory_id1]');
  431.         var $classcat2 = $('select[name=classcategory_id2]');
  433.         // Only update price if categories are properly selected
  434.         if ($classcat1.length && $classcat1.val() && $classcat1.val() !== '__unselected') {
  435.             // Category 1 is selected, trigger price update
  436.             if ($classcat2.length && $classcat2.val() && $classcat2.val() !== '__unselected') {
  437.                 // Both categories are selected
  438.                 setTimeout(function() {
  439.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), $classcat2.val());
  440.                 }, 200);
  441.             } else {
  442.                 // Only category 1 is selected
  443.                 setTimeout(function() {
  444.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), null);
  445.                 }, 200);
  446.             }
  447.         }
  448.     });
  449. </script>
  450.     <script>
  451.         $(function() {
  452.             // bfcache無効化
  453.             $(window).bind('pageshow', function(event) {
  454.                 if (event.originalEvent.persisted) {
  455.                     location.reload(true);
  456.                 }
  457.             });
  459.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  460.             // img タグに width, height が付与されている.
  461.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  462.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  463.             $('.ec-grid2__cell').hide();
  464.             var removeSize = function () {
  465.                 $('.slide-item').height('');
  466.                 $('.slide-item img')
  467.                     .removeAttr('width')
  468.                     .removeAttr('height')
  469.                     .removeAttr('style');
  470.             };
  471.             var slickInitial = function(slick) {
  472.                 $('.ec-grid2__cell').fadeIn(1500);
  473.                 var baseHeight = $(slick.target).height();
  474.                 var baseWidth = $(slick.target).width();
  475.                 var rate = baseWidth / baseHeight;
  477.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  478.                 // transform を使用することでCLSの影響を受けないようにする
  479.                 $('.slide-item img')
  480.                     .css(
  481.                         {
  482.                             'transform-origin': 'top left',
  483.                             'transform': 'scaleY(' + rate + ')',
  484.                             'transition': 'transform .1s'
  485.                         }
  486.                     );
  487.                 // 正しいサイズに近くなったら属性を解除する
  488.                 setTimeout(removeSize, 500);
  489.             };
  490.             $('.item_visual').on('init', slickInitial);
  491.             // リサイズ時は CLS の影響を受けないため属性を解除する
  492.             $(window).resize(removeSize);
  493.             $('.item_visual').slick({
  494.                 dots: false,
  495.                 arrows: false,
  496.                 responsive: [{
  497.                     breakpoint: 768,
  498.                     settings: {
  499.                         dots: true
  500.                     }
  501.                 }]
  502.             });
  504.             $('.slideThumb').on('click', function() {
  505.                 var index = $(this).attr('data-index');
  506.                 $('.item_visual').slick('slickGoTo', index, false);
  507.             })
  508.         });
  509.     </script>
  510.     <script>
  511.         $(function() {
  512.             $('.add-cart').on('click', function(event) {
  513.                 {% if form.classcategory_id1 is defined %}
  514.                     // 規格1フォームの必須チェック
  515.                     if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  516.                         $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  517.                         return true;
  518.                     } else {
  519.                         $('#classcategory_id1')[0].setCustomValidity('');
  520.                     }
  521.                 {% endif %}
  523.                 {% if form.classcategory_id2 is defined %}
  524.                     // 規格2フォームの必須チェック
  525.                     if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  526.                         $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  527.                         return true;
  528.                     } else {
  529.                         $('#classcategory_id2')[0].setCustomValidity('');
  530.                     }
  531.                 {% endif %}
  533.                 // 個数フォームのチェック
  534.                 if ($('#quantity').val() < 1) {
  535.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  536.                     return true;
  537.                 } else {
  538.                     $('#quantity')[0].setCustomValidity('');
  539.                 }
  541.                 // IMEIフォームのチェック
  542.                 {% if Product.hasUserImeiCategory %}
  543.                     if (!$('#user_imei').length || $('#user_imei').val() == '') {
  544.                         if ($('#user_imei').length) {
  545.                             $('#user_imei')[0].setCustomValidity('{{ 'front.cart.user_imei_required'|trans }}');
  546.                         } else {
  547.                             alert('{{ 'front.cart.user_imei_required'|trans }}');
  548.                         }
  549.                         return true;
  550.                     } else {
  551.                         if ($('#user_imei').length) {
  552.                             $('#user_imei')[0].setCustomValidity('');
  553.                         }
  554.                     }
  555.                 {% endif %}
  557.                 event.preventDefault();
  558.                 $form = $('#form1');
  559.                 $.ajax({
  560.                     url: $form.attr('action'),
  561.                     type: $form.attr('method'),
  562.                     data: $form.serialize(),
  563.                     dataType: 'json',
  564.                     beforeSend: function(xhr, settings) {
  565.                         // Buttonを無効にする
  566.                         $('.add-cart').prop('disabled', true);
  567.                     }
  568.                 }).done(function(data) {
  569.                     if (data.error_code == 'OUT_OF_STOCK_ZERO' || data.error_code == 'OUT_OF_STOCK') {
  570.                         alert('この商品の在庫は残り' + data.stock_left + 'です。');
  571.                     } else if (data.error_code == 'DUPLICATE_IMEI') {
  572.                         alert('{{ 'front.shopping.duplicate_imei'|trans }}');
  573.                     } else {
  574.                         // カートブロックを更新する
  575.                         $.ajax({
  576.                             url: "{{ url('block_cart') }}",
  577.                             type: 'GET',
  578.                             dataType: 'html'
  579.                         }).done(function(html) {
  580.                             $('.ec-headerRole__cart').html(html);
  581.                         });
  583.                         // Hiển thị popup thông báo thành công sử dụng ModalComponent
  584.                         if (window.ModalUtils) {
  585.                             window.ModalUtils.showSuccess('cart-success-modal',
  586.                                 '{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}',
  587.                                 '{{ 'front.modal.cart_success.message'|trans({}, 'messages') }}'
  588.                             );
  589.                         } else {
  590.                             // Fallback nếu ModalComponent chưa load
  591.                             alert('{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}');
  592.                         }
  593.                     }
  594.                 }).fail(function(data) {
  595.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  596.                 }).always(function(data) {
  597.                     // Buttonを有効にする
  598.                     $('.add-cart').prop('disabled', false);
  599.                 });
  600.             });
  601.         });
  603.         // Modal events are now handled by ModalComponent
  604.     </script>
  605.     <script src="{{ asset('assets/CustomComponent/modal.js') }}"></script>
  606.     </script>
  607.     <script type="application/ld+json">
  608.     {
  609.         "@context": "https://schema.org/",
  610.         "@type": "Product",
  611.         "name": "{{ Product.name }}",
  612.         "image": [
  613.             {% for img in Product.ProductImage %}
  614.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  616.             {% else %}
  617.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  618.             {% endfor %}
  619.         ],
  620.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  621.         {% if Product.code_min %}
  622.         "sku": "{{ Product.code_min }}",
  623.         {% endif %}
  624.         "offers": {
  625.             "@type": "Offer",
  626.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  627.             "priceCurrency": "{{ eccube_config.currency }}",
  628.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  629.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  630.         }
  631.     }
  632.     </script>
  634. {% endblock %}
  635. {% block main %}
  636.     <!-- breadcrumb section -->
  637.     <div class="breadcrumb-section">
  638.         <div class="container-1360 border-box px-40">
  639.             <nav class="breadcrumb">
  640.                 <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  641.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  642.                 <a href="{{ url('product_list') }}" class="breadcrumb__item text-black">商品一覧</a>
  643.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  644.                 <span class="breadcrumb__item breadcrumb__item--current text-black">{{ Product.name }}</span>
  645.             </nav>
  646.         </div>
  647.     </div>
  649.     <!-- product detail section -->
  650.     <div class="product-detail-section container-1200">
  651.         <div class="product-detail-wrapper">
  652.             <div class="product-detail-left">
  653.                 <!-- Main gallery (using existing slick) -->
  654.                 <div class="item_visual">
  655.                     {% for ProductImage in Product.ProductImage %}
  656.                         <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>
  657.                     {% else %}
  658.                         <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  659.                     {% endfor %}
  660.                 </div>
  662.                 <!-- Thumbs below -->
  663.                 <div class="product-detail-left-bottom">
  664.                     <div class="item_nav">
  665.                         {% for ProductImage in Product.ProductImage %}
  666.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  667.                                 <div class="product-thumbnail"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  668.                             </div>
  669.                         {% endfor %}
  670.                     </div>
  671.                 </div>
  672.             </div>
  673.             <div class="product-detail-right">
  674.                 <!-- Product Title -->
  675.                 <h1 class="product-title">{{ Product.name }}</h1>
  677.                 <!-- Product Price -->
  678.                 <div class="product-price">
  679.                     {% if Product.hasProductClass -%}
  680.                         <span class="product-price-value price02-default text-color-primary" data-original-price="{{ Product.getPrice02IncTaxMin|price }}{% if Product.getPrice02IncTaxMin != Product.getPrice02IncTaxMax %} ～ {{ Product.getPrice02IncTaxMax|price }}{% endif %}">{{ Product.getPrice02IncTaxMin|price }}{% if Product.getPrice02IncTaxMin != Product.getPrice02IncTaxMax %} ～ {{ Product.getPrice02IncTaxMax|price }}{% endif %}</span>
  681.                     {% else %}
  682.                         <span class="product-price-value price02-default text-color-primary" data-original-price="{{ Product.getPrice02IncTaxMin|price }}">{{ Product.getPrice02IncTaxMin|price }}</span>
  683.                     {% endif %}
  684.                 </div>
  686.                 <!-- Quantity and Add to Cart -->
  687.                 <form method="post" id="form1" action="{{ url('product_add_cart', {'id': Product.id}) }}">
  688.                 <div class="product-quantity-wrapper">
  689.                     {% if Product.stock_find %}
  690.                         <div class="product-quantity-left">
  691.                             <div class="btn-group__header group__header-mobile mb-12">数量</div>
  692.                                     {{ form_widget(form._token) }}
  693.                                     {{ form_widget(form.product_id) }}
  694.                                     {{ form_widget(form.ProductClass) }}
  695.                                     {% if form.classcategory_id1 is defined %}
  696.                                         <div class="classcategory-wrapper" data-category-type="1">
  697.                                             {{ form_widget(form.classcategory_id1) }}
  698.                                             {{ form_errors(form.classcategory_id1) }}
  699.                                         </div>
  700.                                     {% endif %}
  701.                                     {% if form.classcategory_id2 is defined %}
  702.                                         <div class="classcategory-wrapper" data-category-type="2">
  703.                                             {{ form_widget(form.classcategory_id2) }}
  704.                                             {{ form_errors(form.classcategory_id2) }}
  705.                                         </div>
  706.                                     {% endif %}
  708.                                     <div class="product-quantity">
  709.                                         <button type="button" class="quantity-btn quantity-btn--minus item-minus{% if Product.getProductType() == constant('Eccube\\Entity\\Product::PRODUCT_TYPE_DATA_PACKAGE') %} btn-disabled{% endif %}">
  710.                                             <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect y="5" width="12" height="2" fill="#333333"/></svg>
  711.                                         </button>
  712.                                         <div class="quantity-value">
  713.                                             {{ form_widget(form.quantity, {
  714.                                                 'attr': {
  715.                                                     'class': 'custom-quantity hide-number-input h-100 bg-white',
  716.                                                     'readonly': 'readonly',
  717.                                                 }
  718.                                             }) }}
  719.                                         </div>
  720.                                         <button type="button" class="quantity-btn quantity-btn--plus item-plus{% if Product.getProductType() == constant('Eccube\\Entity\\Product::PRODUCT_TYPE_DATA_PACKAGE') %} btn-disabled{% endif %}">
  721.                                             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 5H12V7H7V12H5V7H0V5H5V0H7V5Z" fill="#333333"/></svg>
  722.                                         </button>
  723.                                         {{ form_errors(form.quantity) }}
  724.                                     </div>
  726.                         </div>
  728.                         <!-- Add to Cart Button -->
  729.                         <button type="submit" class="btn-add-to-cart add-cart">
  730.                             <span>カートに入れる</span>
  731.                             <div class="btn-add-to-cart__icon">
  732.                                 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.252 6.00098L10.249 6.00391L10.252 6.00684L5.72656 10.5312L4.5957 9.40039L7.19434 6.80273H1.72852V5.20312H7.19238L4.5957 2.60742L5.72656 1.47656L10.252 6.00098Z" fill="#FBE800"/></svg>
  733.                             </div>
  734.                         </button>
  736.                         {% else %}
  737.                         <!-- button out of stock -->
  738.                         <button class="btn-add-to-cart btn-add-to-cart--out-of-stock" disabled="disabled">
  739.                             <span>{{ 'front.product.out_of_stock'|trans }}</span>
  740.                         </button>
  741.                     {% endif %}
  742.                 </div>
  743.                 {% if form.user_imei is defined %}
  744.                     <div class="user-imei-form mt-4">
  745.                         <div class="btn-group__header group__header-mobile mb-12">IMEI番号</div>
  746.                         {{ form_widget(form.user_imei) }}
  747.                         {{ form_errors(form.user_imei) }}
  748.                     </div>
  749.                 {% endif %}
  750.                 </form>
  751.                 <!-- Divider -->
  752.                 <div class="product-divider"></div>
  754.                 <!-- Product Description Section -->
  755.                 <div class="btn-group__header mb-16">商品説明</div>
  756.                 <div class="product-description">
  757.                     {{ Product.description_detail | nl2br }}
  758.                 </div>
  761.                 {% if Product.product_note is not empty %}
  762.                     <div class="btn-group__header mb-16">備考</div>
  763.                     <div class="product-remarks">{{ Product.product_note | nl2br }}</div>
  764.                 {% endif %}
  765.             </div>
  766.         </div>
  768.         <!-- border bottom -->
  769.         <div class="product-detail-border-bottom"></div>
  771.         <!-- btn bottom -->
  772.         <div class="btn-bottom">
  773.             <button class="btn-return" onclick="history.back()">
  774.                 <div class="btn-return__icon">
  775.                     <svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4.52441L0.00292969 4.52734L0 4.53027L4.52539 9.05469L5.65625 7.92383L3.05762 5.32617H8.52344V3.72656H3.05957L5.65625 1.13086L4.52539 0L0 4.52441Z" fill="#FBE800"/></svg>
  776.                 </div>
  777.                 <span>前のページに戻る</span>
  778.             </button>
  779.         </div>
  780.     </div>
  782.     <!-- Modal -->
  783.     {% include 'CustomComponent/modal.twig' with {
  784.         id: 'cart-success-modal',
  785.         title: 'front.modal.cart_success.title'|trans({}, 'messages'),
  786.         message: 'front.modal.cart_success.message'|trans({}, 'messages'),
  787.         showCancelButton: true,
  788.         cancelText: 'front.modal.cart_success.cancel_text'|trans({}, 'messages'),
  789.         showActionButton: true,
  790.         actionText: 'front.modal.cart_success.action_text'|trans({}, 'messages'),
  791.         actionUrl: url('cart'),
  792.         autoRedirect: false,
  793.         redirectUrl: '',
  794.         redirectDelay: 0,
  795.         reloadOnCancel: true,
  796.         reloadOnError: false
  797.     } %}
  799.   <script>
  800.     // slick js
  801.     $(document).ready(function() {
  802.       $('.item_visual').slick({
  803.         dots: false,
  804.         arrows: false,
  805.         responsive: [{
  806.           breakpoint: 768,
  807.           settings: {
  808.             dots: false
  809.           }
  810.         }]
  811.       });
  813.       $('.slideThumb').on('click', function() {
  814.         var index = $(this).attr('data-index');
  815.         $('.item_visual').slick('slickGoTo', index, false);
  816.       })
  817.     });
  818.   </script>
  820. {% endblock %}