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.     {% if form.user_imei is defined %}
  171.     <style>
  172.         .user-imei-form .ec-errorMessage {
  173.             color: #EF2864;
  174.             font-family: 'Noto Sans JP', sans-serif;
  175.             font-weight: 500;
  176.             font-size: 15px;
  177.             line-height: 1.8em;
  178.             margin-top: 8px;
  179.             margin-bottom: 0;
  180.         }
  181.         .user-imei-form.error #user_imei,
  182.         .user-imei-form #user_imei.customer-input-error {
  183.             border-color: #EF2864;
  184.             background-color: #FDF1F0;
  185.         }
  186.     </style>
  187.     {% endif %}
  188. {% endblock %}
  190. {% set body_class = 'product_page' %}
  192. {# script #}
  193. {% block javascript %}
  194. {% if form.user_imei is defined %}
  195. <script src="{{ asset('assets/js/customer-input-validate.js') }}"></script>
  196. {% endif %}
  197. <script>
  198. $(document).ready(function() {
  199.     $('.item-minus').click(function () {
  200.         // Check if button is disabled
  201.         if ($(this).hasClass('btn-disabled')) {
  202.             return;
  203.         }
  204.         const $input = $(this).siblings('.quantity-value').find('.custom-quantity');
  205.         let current = parseInt($input.val()) || 0;
  206.         if (current > 1) {
  207.             $input.val(current - 1);
  208.         }
  209.     });
  211.     $('.item-plus').click(function () {
  212.         // Check if button is disabled
  213.         if ($(this).hasClass('btn-disabled')) {
  214.             return;
  215.         }
  216.         const $input = $(this).siblings('.quantity-value').find('.custom-quantity');
  217.         let current = parseInt($input.val()) || 0;
  218.         $input.val(current + 1);
  219.     });
  220. });
  222. const params = new URLSearchParams(window.location.search);
  223. const imei = params.get('imei');
  224. if (imei) {
  225.     $('#user_imei').val(imei);
  226. }
  228. {% if form.user_imei is defined %}
  229. $(function() {
  230.     var $imei = $('#user_imei');
  231.     if (!$imei.length || !window.CustomerInputValidate) {
  232.         return;
  233.     }
  234.     var imeiRequiredMsg = '{{ 'front.cart.user_imei_required'|trans }}';
  235.     $imei.on('blur.imeiValidate', function() {
  236.         if (!$.trim($(this).val() || '')) {
  237.             CustomerInputValidate.showInlineError($imei, imeiRequiredMsg, '.user-imei-form');
  238.         } else {
  239.             CustomerInputValidate.clearInlineError($imei, '.user-imei-form');
  240.         }
  241.     });
  242.     $imei.on('input.imeiValidate', function() {
  243.         if ($.trim($(this).val() || '')) {
  244.             CustomerInputValidate.clearInlineError($imei, '.user-imei-form');
  245.         }
  246.     });
  247. });
  248. {% endif %}
  252. </script>
  253. <script>
  254.     eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  256.     // 規格2に選択肢を割り当てる。
  257.     function fnSetClassCategories(form, classcat_id2_selected) {
  258.         var $form = $(form);
  259.         var product_id = $form.find('input[name=product_id]').val();
  260.         var $sele1 = $form.find('select[name=classcategory_id1]');
  261.         var $sele2 = $form.find('select[name=classcategory_id2]');
  262.         eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  263.     }
  265.     {% if form.classcategory_id2 is defined %}
  266.     fnSetClassCategories(
  267.         $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  268.     );
  269.     {% elseif form.classcategory_id1 is defined %}
  270.     eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  271.     {% endif %}
  273.     // Thêm thuộc tính is_country_category cho classcategory select
  274.     function addCountryCategoryAttributes() {
  275.         // Lấy country_id từ URL
  276.         const countryId = params.get('country_id');
  278.         console.log('Country ID from URL:', countryId);
  279.         console.log('eccube.classCategories:', eccube.classCategories);
  281.         if (!countryId) {
  282.             console.log('No country_id found in URL');
  283.             return; // Không có country_id thì không làm gì
  284.         }
  286.         let hasSelected = false;
  288.         // Thêm thuộc tính cho classcategory_id1
  289.         const $select1 = $('select[name=classcategory_id1]');
  290.         if ($select1.length) {
  291.             console.log('Found select1, checking options...');
  292.             $select1.find('option').each(function() {
  293.                 const $option = $(this);
  294.                 const optionValue = $option.val();
  296.                 let isCountryCategoryFlag = false;
  297.                 if (optionValue && optionValue !== '__unselected') {
  298.                     isCountryCategoryFlag = isCountryCategory(optionValue);
  300.                     if (isCountryCategoryFlag && optionValue === countryId) {
  301.                         console.log('Auto-selecting country category:', optionValue, 'in select1');
  302.                         $option.prop('selected', true);
  303.                         hasSelected = true;
  304.                     }
  305.                 }
  306.                 $option.attr('data-is-country-category', isCountryCategoryFlag);
  307.             });
  309.             // Trigger change event sau khi đã chọn tất cả options
  310.             if (hasSelected) {
  311.                 setTimeout(function() {
  312.                     $select1.trigger('change');
  313.                 }, 10);
  314.             }
  315.         }
  317.         // Thêm thuộc tính cho classcategory_id2
  318.         const $select2 = $('select[name=classcategory_id2]');
  319.         if ($select2.length) {
  320.             console.log('Found select2, checking options...');
  321.             $select2.find('option').each(function() {
  322.                 const $option = $(this);
  323.                 const optionValue = $option.val();
  325.                 // Kiểm tra xem option này có phải là country category không
  326.                 let isCountryCategoryFlag = false;
  327.                 if (optionValue && optionValue !== '__unselected') {
  328.                     // Kiểm tra xem option này có phải là country category không
  329.                     isCountryCategoryFlag = isCountryCategory(optionValue);
  331.                     // Nếu đây là country category và match với country_id, tự động chọn
  332.                     if (isCountryCategoryFlag && optionValue === countryId) {
  333.                         console.log('Auto-selecting country category:', optionValue, 'in select2');
  334.                         $option.prop('selected', true);
  335.                         hasSelected = true;
  336.                     }
  337.                 }
  339.                 // Thêm thuộc tính data-is-country-category
  340.                 $option.attr('data-is-country-category', isCountryCategoryFlag);
  341.             });
  343.             // Trigger change event sau khi đã chọn tất cả options
  344.             if (hasSelected) {
  345.                 setTimeout(function() {
  346.                     $select2.trigger('change');
  347.                 }, 10);
  348.             }
  349.         }
  351.         if (hasSelected) {
  352.             console.log('Country category auto-selection completed');
  353.         }
  354.     }
  356.     // Function để kiểm tra xem một classcategory có phải là country category không
  357.     function isCountryCategory(categoryId) {
  358.         if (eccube.classCategories && eccube.classCategories[categoryId]) {
  359.             console.log('Category', categoryId, 'found in eccube.classCategories');
  360.             return true;
  361.         }
  362.         return false;
  363.     }
  365.     // Chạy function khi document ready và sau khi các select đã được khởi tạo
  366.     $(document).ready(function() {
  367.         // Delay một chút để đảm bảo các select đã được khởi tạo
  368.         setTimeout(function() {
  369.             addCountryCategoryAttributes();
  370.         }, 100);
  371.     });
  374.     // Custom function to update price display
  375.     function updatePriceDisplay(classcat2) {
  376.         var $price02 = $('.price02-default');
  377.         try {
  378.             if (classcat2 && typeof classcat2.price02_inc_tax !== 'undefined' && String(classcat2.price02_inc_tax).length >= 1) {
  379.                 // Show specific price when category is selected
  380.                 $price02.text(classcat2.price02_inc_tax_with_currency).addClass('selected');
  381.             } else {
  382.                 // Show range price when no category is selected
  383.                 var originalPrice = $price02.attr('data-original-price');
  384.                 if (originalPrice) {
  385.                     $price02.text(originalPrice).removeClass('selected');
  386.                 }
  387.             }
  388.         } catch (e) {
  389.             console.log('Error updating price display:', e);
  390.             // Fallback to original price
  391.             var originalPrice = $price02.attr('data-original-price');
  392.             if (originalPrice) {
  393.                 $price02.text(originalPrice).removeClass('selected');
  394.             }
  395.         }
  396.     }
  398.     // Add event listeners for category changes
  399.     $(document).ready(function() {
  400.         // Listen for category 1 changes
  401.         $('select[name=classcategory_id1]').on('change', function() {
  402.             var $form = $(this).parents('form');
  403.             var product_id = $form.find('input[name=product_id]').val();
  404.             var $sele1 = $(this);
  405.             var $sele2 = $form.find('select[name=classcategory_id2]');
  407.             // Update price display after a short delay to let original function complete
  408.             setTimeout(function() {
  409.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  410.             }, 150);
  411.         });
  413.         // Listen for category 2 changes
  414.         $('select[name=classcategory_id2]').on('change', function() {
  415.             var $form = $(this).parents('form');
  416.             var product_id = $form.find('input[name=product_id]').val();
  417.             var $sele1 = $form.find('select[name=classcategory_id1]');
  418.             var $sele2 = $form.find('select[name=classcategory_id2]');
  420.             // Update price display after a short delay to let original function complete
  421.             setTimeout(function() {
  422.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  423.             }, 150);
  424.         });
  425.     });
  427.     // Function to update price based on selected categories
  428.     function updatePriceFromCategories(product_id, classcat_id1, classcat_id2) {
  429.         try {
  430.             // Don't update if categories are not properly selected
  431.             if (!classcat_id1 || classcat_id1 === '__unselected' || classcat_id1 === '') {
  432.                 var $price02 = $('.price02-default');
  433.                 var originalPrice = $price02.attr('data-original-price');
  434.                 if (originalPrice) {
  435.                     $price02.text(originalPrice).removeClass('selected');
  436.                 }
  437.                 return;
  438.             }
  440.             // Normalize: khi classcat_id2 là null hoặc __unselected phải dùng '' để lookup đúng key '#'
  441.             var classcat2Key = '#' + (classcat_id2 && classcat_id2 !== '__unselected' ? classcat_id2 : '');
  443.             var classcat2;
  444.             if (eccube.hasOwnProperty('productsClassCategories')) {
  445.                 if (eccube.productsClassCategories[product_id] &&
  446.                     eccube.productsClassCategories[product_id][classcat_id1]) {
  447.                     classcat2 = eccube.productsClassCategories[product_id][classcat_id1][classcat2Key];
  448.                 }
  449.             } else {
  450.                 if (typeof eccube.classCategories[classcat_id1] !== 'undefined') {
  451.                     classcat2 = eccube.classCategories[classcat_id1][classcat2Key];
  452.                 }
  453.             }
  455.             updatePriceDisplay(classcat2);
  456.         } catch (e) {
  457.             console.log('Error updating price from categories:', e);
  458.             // Fallback to original price
  459.             var $price02 = $('.price02-default');
  460.             var originalPrice = $price02.attr('data-original-price');
  461.             if (originalPrice) {
  462.                 $price02.text(originalPrice).removeClass('selected');
  463.             }
  464.         }
  465.     }
  467.     // Initialize price display when page loads
  468.     $(document).ready(function() {
  469.         // Store original price if not already stored
  470.         var $price02 = $('.price02-default');
  471.         if (!$price02.attr('data-original-price')) {
  472.             $price02.attr('data-original-price', $price02.text());
  473.         }
  475.         // Check if any category is selected on page load
  476.         var $classcat1 = $('select[name=classcategory_id1]');
  477.         var $classcat2 = $('select[name=classcategory_id2]');
  479.         // Only update price if categories are properly selected
  480.         if ($classcat1.length && $classcat1.val() && $classcat1.val() !== '__unselected') {
  481.             // Category 1 is selected, trigger price update
  482.             if ($classcat2.length && $classcat2.val() && $classcat2.val() !== '__unselected') {
  483.                 // Both categories are selected
  484.                 setTimeout(function() {
  485.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), $classcat2.val());
  486.                 }, 200);
  487.             } else {
  488.                 // Only category 1 is selected
  489.                 setTimeout(function() {
  490.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), null);
  491.                 }, 200);
  492.             }
  493.         }
  494.     });
  495. </script>
  496.     <script>
  497.         $(function() {
  498.             // bfcache無効化
  499.             $(window).bind('pageshow', function(event) {
  500.                 if (event.originalEvent.persisted) {
  501.                     location.reload(true);
  502.                 }
  503.             });
  505.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  506.             // img タグに width, height が付与されている.
  507.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  508.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  509.             $('.ec-grid2__cell').hide();
  510.             var removeSize = function () {
  511.                 $('.slide-item').height('');
  512.                 $('.slide-item img')
  513.                     .removeAttr('width')
  514.                     .removeAttr('height')
  515.                     .removeAttr('style');
  516.             };
  517.             var slickInitial = function(slick) {
  518.                 $('.ec-grid2__cell').fadeIn(1500);
  519.                 var baseHeight = $(slick.target).height();
  520.                 var baseWidth = $(slick.target).width();
  521.                 var rate = baseWidth / baseHeight;
  523.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  524.                 // transform を使用することでCLSの影響を受けないようにする
  525.                 $('.slide-item img')
  526.                     .css(
  527.                         {
  528.                             'transform-origin': 'top left',
  529.                             'transform': 'scaleY(' + rate + ')',
  530.                             'transition': 'transform .1s'
  531.                         }
  532.                     );
  533.                 // 正しいサイズに近くなったら属性を解除する
  534.                 setTimeout(removeSize, 500);
  535.             };
  536.             $('.item_visual').on('init', slickInitial);
  537.             // リサイズ時は CLS の影響を受けないため属性を解除する
  538.             $(window).resize(removeSize);
  539.             $('.item_visual').slick({
  540.                 dots: false,
  541.                 arrows: false
  542.             });
  544.             $('.slideThumb').on('click', function() {
  545.                 var index = $(this).attr('data-index');
  546.                 $('.item_visual').slick('slickGoTo', index, false);
  547.             })
  548.         });
  549.     </script>
  550.     <script>
  551.         $(function() {
  552.             {% set just_added_favorite = app.session.flashbag.get('product_detail.just_added_favorite') %}
  553.             {% if just_added_favorite and Product.id == just_added_favorite[0] %}
  554.                 alert('{{ 'front.product.added_to_favorite'|trans }}');
  555.             {% endif %}
  557.             $('.add-cart').on('click', function(event) {
  558.                 {% if form.classcategory_id1 is defined %}
  559.                     // 規格1フォームの必須チェック
  560.                     if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  561.                         $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  562.                         return true;
  563.                     } else {
  564.                         $('#classcategory_id1')[0].setCustomValidity('');
  565.                     }
  566.                 {% endif %}
  568.                 {% if form.classcategory_id2 is defined %}
  569.                     // 規格2フォームの必須チェック
  570.                     if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  571.                         $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  572.                         return true;
  573.                     } else {
  574.                         $('#classcategory_id2')[0].setCustomValidity('');
  575.                     }
  576.                 {% endif %}
  578.                 // 個数フォームのチェック
  579.                 if ($('#quantity').val() < 1) {
  580.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  581.                     return true;
  582.                 } else {
  583.                     $('#quantity')[0].setCustomValidity('');
  584.                 }
  586.                 // IMEIフォームのチェック
  587.                 {% if Product.hasUserImeiCategory %}
  588.                     var $imei = $('#user_imei');
  589.                     var imeiRequiredMsg = '{{ 'front.cart.user_imei_required'|trans }}';
  590.                     if (!$imei.length || !$.trim($imei.val() || '')) {
  591.                         event.preventDefault();
  592.                         if ($imei.length && window.CustomerInputValidate) {
  593.                             CustomerInputValidate.showInlineError($imei, imeiRequiredMsg, '.user-imei-form');
  594.                             CustomerInputValidate.scrollAndFlash($imei, { wrapperSelector: '.user-imei-form' });
  595.                         } else if ($imei.length) {
  596.                             alert(imeiRequiredMsg);
  597.                         } else {
  598.                             alert(imeiRequiredMsg);
  599.                         }
  600.                         return false;
  601.                     } else if ($imei.length && window.CustomerInputValidate) {
  602.                         CustomerInputValidate.clearInlineError($imei, '.user-imei-form');
  603.                     }
  604.                 {% endif %}
  606.                 event.preventDefault();
  607.                 $form = $('#form1');
  608.                 $.ajax({
  609.                     url: $form.attr('action'),
  610.                     type: $form.attr('method'),
  611.                     data: $form.serialize(),
  612.                     dataType: 'json',
  613.                     beforeSend: function(xhr, settings) {
  614.                         // Buttonを無効にする
  615.                         $('.add-cart').prop('disabled', true);
  616.                     }
  617.                 }).done(function(data) {
  618.                     if (data.error_code == 'OUT_OF_STOCK_ZERO' || data.error_code == 'OUT_OF_STOCK') {
  619.                         alert('この商品の在庫は残り' + data.stock_left + 'です。');
  620.                     } else if (data.error_code == 'DUPLICATE_IMEI') {
  621.                         {% if form.user_imei is defined %}
  622.                         if (window.CustomerInputValidate && $('#user_imei').length) {
  623.                             CustomerInputValidate.showInlineError($('#user_imei'), '{{ 'front.shopping.duplicate_imei'|trans }}', '.user-imei-form');
  624.                             CustomerInputValidate.scrollAndFlash($('#user_imei'), { wrapperSelector: '.user-imei-form' });
  625.                         } else {
  626.                             alert('{{ 'front.shopping.duplicate_imei'|trans }}');
  627.                         }
  628.                         {% else %}
  629.                         alert('{{ 'front.shopping.duplicate_imei'|trans }}');
  630.                         {% endif %}
  631.                     } else if (data.error_code == 'CART_HAS_PRODUCT') {
  632.                         alert('{{ 'front.shopping.cart_has_product'|trans }}');
  633.                     } else if (data.error_code == 'IMEI_VALIDATION_FAILED') {
  634.                         {% if form.user_imei is defined %}
  635.                         if (window.CustomerInputValidate && $('#user_imei').length) {
  636.                             CustomerInputValidate.showInlineError($('#user_imei'), '{{ 'front.shopping.imei_validation_failed'|trans }}', '.user-imei-form');
  637.                             CustomerInputValidate.scrollAndFlash($('#user_imei'), { wrapperSelector: '.user-imei-form' });
  638.                         } else {
  639.                             alert('{{ 'front.shopping.imei_validation_failed'|trans }}');
  640.                         }
  641.                         {% else %}
  642.                         alert('{{ 'front.shopping.imei_validation_failed'|trans }}');
  643.                         {% endif %}
  644.                     } else {
  645.                         // カートブロックを更新する
  646.                         $.ajax({
  647.                             url: "{{ url('block_cart') }}",
  648.                             type: 'GET',
  649.                             dataType: 'html'
  650.                         }).done(function(html) {
  651.                             $('.ec-headerRole__cart').html(html);
  652.                         });
  654.                         // Hiển thị popup thông báo thành công sử dụng ModalComponent
  655.                         if (window.ModalUtils) {
  656.                             window.ModalUtils.showSuccess('cart-success-modal',
  657.                                 '{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}',
  658.                                 '{{ 'front.modal.cart_success.message'|trans({}, 'messages') }}'
  659.                             );
  660.                         } else {
  661.                             // Fallback nếu ModalComponent chưa load
  662.                             alert('{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}');
  663.                         }
  664.                     }
  665.                 }).fail(function(data) {
  666.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  667.                 }).always(function(data) {
  668.                     // Buttonを有効にする
  669.                     $('.add-cart').prop('disabled', false);
  670.                 });
  671.             });
  672.         });
  674.         // Modal events are now handled by ModalComponent
  675.     </script>
  676.     <script src="{{ asset('assets/CustomComponent/modal.js') }}"></script>
  677.     </script>
  678.     <script type="application/ld+json">
  679.     {
  680.         "@context": "https://schema.org/",
  681.         "@type": "Product",
  682.         "name": "{{ Product.name }}",
  683.         "image": [
  684.             {% for img in Product.ProductImage %}
  685.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  687.             {% else %}
  688.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  689.             {% endfor %}
  690.         ],
  691.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  692.         {% if Product.code_min %}
  693.         "sku": "{{ Product.code_min }}",
  694.         {% endif %}
  695.         "offers": {
  696.             "@type": "Offer",
  697.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  698.             "priceCurrency": "{{ eccube_config.currency }}",
  699.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  700.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  701.         }
  702.     }
  703.     </script>
  705. {% endblock %}
  706. {% block main %}
  707.     <!-- breadcrumb section -->
  708.     <div class="breadcrumb-section">
  709.         <div class="container-1360 border-box px-40">
  710.             <nav class="breadcrumb">
  711.                 <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  712.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  713.                 <a href="{{ url('product_list') }}" class="breadcrumb__item text-black">商品一覧</a>
  714.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  715.                 <span class="breadcrumb__item breadcrumb__item--current text-black">{{ Product.name }}</span>
  716.             </nav>
  717.         </div>
  718.     </div>
  720.     <!-- product detail section -->
  721.     <div class="product-detail-section container-1200">
  722.         <div class="product-detail-wrapper">
  723.             <div class="product-detail-left">
  724.                 <!-- Main gallery (using existing slick) -->
  725.                 <div class="item_visual">
  726.                     {% for ProductImage in Product.ProductImage %}
  727.                         <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>
  728.                     {% else %}
  729.                         <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  730.                     {% endfor %}
  731.                 </div>
  733.                 <!-- Thumbs below -->
  734.                 <div class="product-detail-left-bottom">
  735.                     <div class="item_nav">
  736.                         {% for ProductImage in Product.ProductImage %}
  737.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  738.                                 <div class="product-thumbnail"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  739.                             </div>
  740.                         {% endfor %}
  741.                     </div>
  742.                 </div>
  743.             </div>
  744.             <div class="product-detail-right">
  745.                 <!-- Product Title -->
  746.                 <h1 class="product-title">{{ Product.name }}</h1>
  748.                 <!-- Product Price -->
  749.                 <div class="product-price">
  750.                     {% if Product.hasProductClass -%}
  751.                         <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>
  752.                     {% else %}
  753.                         <span class="product-price-value price02-default text-color-primary" data-original-price="{{ Product.getPrice02IncTaxMin|price }}">{{ Product.getPrice02IncTaxMin|price }}</span>
  754.                     {% endif %}
  755.                     <span class="price-tax">(税込)</span>
  756.                 </div>
  758.                 <!-- Quantity and Add to Cart -->
  759.                 <form method="post" id="form1" action="{{ url('product_add_cart', {'id': Product.id}) }}">
  760.                 <div class="product-quantity-wrapper">
  761.                     {% if Product.stock_find %}
  762.                         <div class="product-quantity-left{% if not Product.hasProductClass %} d-none{% endif %}">
  763.                             {# <div class="btn-group__header group__header-mobile mb-12">数量</div> #}
  764.                                     {{ form_widget(form._token) }}
  765.                                     {{ form_widget(form.product_id) }}
  766.                                     {{ form_widget(form.ProductClass) }}
  767.                                     {% if form.classcategory_id1 is defined or form.classcategory_id2 is defined %}
  768.                                         <div class="product-classcategory-list">
  769.                                             {% if form.classcategory_id1 is defined %}
  770.                                                 <div class="classcategory-wrapper" data-category-type="1">
  771.                                                     {{ form_widget(form.classcategory_id1, {'attr': {'class': 'classcategory-select'}}) }}
  772.                                                     {{ form_errors(form.classcategory_id1) }}
  773.                                                 </div>
  774.                                             {% endif %}
  775.                                             {% if form.classcategory_id2 is defined %}
  776.                                                 <div class="classcategory-wrapper" data-category-type="2">
  777.                                                     {{ form_widget(form.classcategory_id2, {'attr': {'class': 'classcategory-select'}}) }}
  778.                                                     {{ form_errors(form.classcategory_id2) }}
  779.                                                 </div>
  780.                                             {% endif %}
  781.                                         </div>
  782.                                     {% endif %}
  784.                                     <div class="product-quantity" style="display: none;">
  785.                                         <button type="button" class="quantity-btn quantity-btn--minus item-minus btn-disabled">
  786.                                             <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect y="5" width="12" height="2" fill="#333333"/></svg>
  787.                                         </button>
  788.                                         <div class="quantity-value">
  789.                                             {{ form_widget(form.quantity, {
  790.                                                 'attr': {
  791.                                                     'class': 'custom-quantity hide-number-input h-100 bg-white',
  792.                                                     'readonly': 'readonly',
  793.                                                 }
  794.                                             }) }}
  795.                                         </div>
  796.                                         <button type="button" class="quantity-btn quantity-btn--plus item-plus btn-disabled">
  797.                                             <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>
  798.                                         </button>
  799.                                         {{ form_errors(form.quantity) }}
  800.                                     </div>
  802.                         </div>
  804.                         <!-- Add to Cart / Favorite -->
  805.                         <div class="product-cart-actions">
  806.                             <button type="submit" class="btn-add-to-cart add-cart">
  807.                                 <span>カートに入れる</span>
  808.                                 <div class="btn-add-to-cart__icon">
  809.                                     <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>
  810.                                 </div>
  811.                             </button>
  812.                             {% include 'Product/favorite_button.twig' %}
  813.                         </div>
  815.                         {% else %}
  816.                         <!-- button out of stock -->
  817.                         <div class="product-cart-actions">
  818.                             <button class="btn-add-to-cart btn-add-to-cart--out-of-stock" disabled="disabled">
  819.                                 <span>{{ 'front.product.out_of_stock'|trans }}</span>
  820.                             </button>
  821.                             {% include 'Product/favorite_button.twig' %}
  822.                         </div>
  823.                     {% endif %}
  824.                 </div>
  825.                 {% if form.user_imei is defined %}
  826.                     <div class="user-imei-form mt-4">
  827.                         <div class="btn-group__header group__header-mobile mb-12" style="margin-bottom: 16px !important;">IMEI番号</div>
  828.                         {{ form_widget(form.user_imei, {required: false}) }}
  829.                         {{ form_errors(form.user_imei) }}
  830.                     </div>
  831.                 {% endif %}
  832.                 </form>
  833.                 {% if BaseInfo.option_favorite_product %}
  834.                     <form id="favorite-form" action="{{ url('product_add_favorite', {id: Product.id}) }}" method="post" hidden></form>
  835.                 {% endif %}
  836.                 <!-- Divider -->
  837.                 <div class="product-divider"></div>
  839.                 <!-- Product Description Section -->
  840.                 <div class="btn-group__header mb-16">商品説明</div>
  841.                 <div class="product-description">
  842.                     {{ Product.description_detail | nl2br }}
  843.                 </div>
  846.                 {% if Product.product_note is not empty %}
  847.                     <div class="btn-group__header mb-16">備考</div>
  848.                     <div class="product-remarks">{{ Product.product_note | nl2br }}</div>
  849.                 {% endif %}
  850.             </div>
  851.         </div>
  853.         <!-- border bottom -->
  854.         <div class="product-detail-border-bottom"></div>
  856.         <!-- btn bottom -->
  857.         <div class="btn-bottom">
  858.             <button class="btn-return" onclick="history.back()">
  859.                 <div class="btn-return__icon">
  860.                     <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>
  861.                 </div>
  862.                 <span>前のページに戻る</span>
  863.             </button>
  864.         </div>
  865.     </div>
  867.     <!-- Modal -->
  868.     {% include 'CustomComponent/modal.twig' with {
  869.         id: 'cart-success-modal',
  870.         title: 'front.modal.cart_success.title'|trans({}, 'messages'),
  871.         message: 'front.modal.cart_success.message'|trans({}, 'messages'),
  872.         showCancelButton: false,
  873.         showActionButton: true,
  874.         actionText: 'front.modal.cart_success.action_text'|trans({}, 'messages'),
  875.         actionUrl: url('cart'),
  876.         autoRedirect: false,
  877.         redirectUrl: '',
  878.         redirectDelay: 0,
  879.         reloadOnCancel: true,
  880.         reloadOnError: false
  881.     } %}
  883. {% endblock %}