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.     // Tự động chọn option theo product_code (sản phẩm nhiều lựa chọn)
  366.     function autoSelectByProductCode() {
  367.         const productCode = params.get('product_code');
  368.         const $select1 = $('select[name=classcategory_id1]');
  370.         if (!productCode || !eccube.classCategories || !$select1.length) {
  371.             return;
  372.         }
  374.         let matchId1 = null;
  375.         let matchId2 = '';
  377.         Object.keys(eccube.classCategories).some(function(id1) {
  378.             if (id1 === '__unselected') {
  379.                 return false;
  380.             }
  382.             const classcat2Map = eccube.classCategories[id1];
  383.             if (!classcat2Map) {
  384.                 return false;
  385.             }
  387.             return Object.keys(classcat2Map).some(function(key) {
  388.                 const item = classcat2Map[key];
  389.                 if (item && item.product_code && item.product_code === productCode) {
  390.                     matchId1 = id1;
  391.                     matchId2 = item.classcategory_id2 || '';
  392.                     return true;
  393.                 }
  394.                 return false;
  395.             });
  396.         });
  398.         if (!matchId1) {
  399.             return;
  400.         }
  402.         $select1.val(matchId1).trigger('change');
  404.         const $select2 = $('select[name=classcategory_id2]');
  405.         if ($select2.length && matchId2) {
  406.             $select2.val(matchId2).trigger('change');
  407.         }
  408.     }
  410.     // Chạy function khi document ready và sau khi các select đã được khởi tạo
  411.     $(document).ready(function() {
  412.         // Delay một chút để đảm bảo các select đã được khởi tạo
  413.         setTimeout(function() {
  414.             addCountryCategoryAttributes();
  415.             autoSelectByProductCode();
  416.         }, 100);
  417.     });
  420.     // Custom function to update price display
  421.     function updatePriceDisplay(classcat2) {
  422.         var $price02 = $('.price02-default');
  423.         try {
  424.             if (classcat2 && typeof classcat2.price02_inc_tax !== 'undefined' && String(classcat2.price02_inc_tax).length >= 1) {
  425.                 // Show specific price when category is selected
  426.                 $price02.text(classcat2.price02_inc_tax_with_currency).addClass('selected');
  427.             } else {
  428.                 // Show range price when no category is selected
  429.                 var originalPrice = $price02.attr('data-original-price');
  430.                 if (originalPrice) {
  431.                     $price02.text(originalPrice).removeClass('selected');
  432.                 }
  433.             }
  434.         } catch (e) {
  435.             console.log('Error updating price display:', e);
  436.             // Fallback to original price
  437.             var originalPrice = $price02.attr('data-original-price');
  438.             if (originalPrice) {
  439.                 $price02.text(originalPrice).removeClass('selected');
  440.             }
  441.         }
  442.     }
  444.     // Add event listeners for category changes
  445.     $(document).ready(function() {
  446.         // Listen for category 1 changes
  447.         $('select[name=classcategory_id1]').on('change', function() {
  448.             var $form = $(this).parents('form');
  449.             var product_id = $form.find('input[name=product_id]').val();
  450.             var $sele1 = $(this);
  451.             var $sele2 = $form.find('select[name=classcategory_id2]');
  453.             // Update price display after a short delay to let original function complete
  454.             setTimeout(function() {
  455.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  456.             }, 150);
  457.         });
  459.         // Listen for category 2 changes
  460.         $('select[name=classcategory_id2]').on('change', function() {
  461.             var $form = $(this).parents('form');
  462.             var product_id = $form.find('input[name=product_id]').val();
  463.             var $sele1 = $form.find('select[name=classcategory_id1]');
  464.             var $sele2 = $form.find('select[name=classcategory_id2]');
  466.             // Update price display after a short delay to let original function complete
  467.             setTimeout(function() {
  468.                 updatePriceFromCategories(product_id, $sele1.val(), $sele2.val());
  469.             }, 150);
  470.         });
  471.     });
  473.     // Function to update price based on selected categories
  474.     function updatePriceFromCategories(product_id, classcat_id1, classcat_id2) {
  475.         try {
  476.             // Don't update if categories are not properly selected
  477.             if (!classcat_id1 || classcat_id1 === '__unselected' || classcat_id1 === '') {
  478.                 var $price02 = $('.price02-default');
  479.                 var originalPrice = $price02.attr('data-original-price');
  480.                 if (originalPrice) {
  481.                     $price02.text(originalPrice).removeClass('selected');
  482.                 }
  483.                 return;
  484.             }
  486.             // Normalize: khi classcat_id2 là null hoặc __unselected phải dùng '' để lookup đúng key '#'
  487.             var classcat2Key = '#' + (classcat_id2 && classcat_id2 !== '__unselected' ? classcat_id2 : '');
  489.             var classcat2;
  490.             if (eccube.hasOwnProperty('productsClassCategories')) {
  491.                 if (eccube.productsClassCategories[product_id] &&
  492.                     eccube.productsClassCategories[product_id][classcat_id1]) {
  493.                     classcat2 = eccube.productsClassCategories[product_id][classcat_id1][classcat2Key];
  494.                 }
  495.             } else {
  496.                 if (typeof eccube.classCategories[classcat_id1] !== 'undefined') {
  497.                     classcat2 = eccube.classCategories[classcat_id1][classcat2Key];
  498.                 }
  499.             }
  501.             updatePriceDisplay(classcat2);
  502.         } catch (e) {
  503.             console.log('Error updating price from categories:', e);
  504.             // Fallback to original price
  505.             var $price02 = $('.price02-default');
  506.             var originalPrice = $price02.attr('data-original-price');
  507.             if (originalPrice) {
  508.                 $price02.text(originalPrice).removeClass('selected');
  509.             }
  510.         }
  511.     }
  513.     // Initialize price display when page loads
  514.     $(document).ready(function() {
  515.         // Store original price if not already stored
  516.         var $price02 = $('.price02-default');
  517.         if (!$price02.attr('data-original-price')) {
  518.             $price02.attr('data-original-price', $price02.text());
  519.         }
  521.         // Check if any category is selected on page load
  522.         var $classcat1 = $('select[name=classcategory_id1]');
  523.         var $classcat2 = $('select[name=classcategory_id2]');
  525.         // Only update price if categories are properly selected
  526.         if ($classcat1.length && $classcat1.val() && $classcat1.val() !== '__unselected') {
  527.             // Category 1 is selected, trigger price update
  528.             if ($classcat2.length && $classcat2.val() && $classcat2.val() !== '__unselected') {
  529.                 // Both categories are selected
  530.                 setTimeout(function() {
  531.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), $classcat2.val());
  532.                 }, 200);
  533.             } else {
  534.                 // Only category 1 is selected
  535.                 setTimeout(function() {
  536.                     updatePriceFromCategories({{ Product.id }}, $classcat1.val(), null);
  537.                 }, 200);
  538.             }
  539.         }
  540.     });
  541. </script>
  542.     <script>
  543.         $(function() {
  544.             // bfcache無効化
  545.             $(window).bind('pageshow', function(event) {
  546.                 if (event.originalEvent.persisted) {
  547.                     location.reload(true);
  548.                 }
  549.             });
  551.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  552.             // img タグに width, height が付与されている.
  553.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  554.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  555.             $('.ec-grid2__cell').hide();
  556.             var removeSize = function () {
  557.                 $('.slide-item').height('');
  558.                 $('.slide-item img')
  559.                     .removeAttr('width')
  560.                     .removeAttr('height')
  561.                     .removeAttr('style');
  562.             };
  563.             var slickInitial = function(slick) {
  564.                 $('.ec-grid2__cell').fadeIn(1500);
  565.                 var baseHeight = $(slick.target).height();
  566.                 var baseWidth = $(slick.target).width();
  567.                 var rate = baseWidth / baseHeight;
  569.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  570.                 // transform を使用することでCLSの影響を受けないようにする
  571.                 $('.slide-item img')
  572.                     .css(
  573.                         {
  574.                             'transform-origin': 'top left',
  575.                             'transform': 'scaleY(' + rate + ')',
  576.                             'transition': 'transform .1s'
  577.                         }
  578.                     );
  579.                 // 正しいサイズに近くなったら属性を解除する
  580.                 setTimeout(removeSize, 500);
  581.             };
  582.             $('.item_visual').on('init', slickInitial);
  583.             // リサイズ時は CLS の影響を受けないため属性を解除する
  584.             $(window).resize(removeSize);
  585.             $('.item_visual').slick({
  586.                 dots: false,
  587.                 arrows: false
  588.             });
  590.             $('.slideThumb').on('click', function() {
  591.                 var index = $(this).attr('data-index');
  592.                 $('.item_visual').slick('slickGoTo', index, false);
  593.             })
  594.         });
  595.     </script>
  596.     <script>
  597.         $(function() {
  598.             {% set just_added_favorite = app.session.flashbag.get('product_detail.just_added_favorite') %}
  599.             {% if just_added_favorite and Product.id == just_added_favorite[0] %}
  600.                 alert('{{ 'front.product.added_to_favorite'|trans }}');
  601.             {% endif %}
  603.             $('.add-cart').on('click', function(event) {
  604.                 {% if form.classcategory_id1 is defined %}
  605.                     // 規格1フォームの必須チェック
  606.                     if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  607.                         $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  608.                         return true;
  609.                     } else {
  610.                         $('#classcategory_id1')[0].setCustomValidity('');
  611.                     }
  612.                 {% endif %}
  614.                 {% if form.classcategory_id2 is defined %}
  615.                     // 規格2フォームの必須チェック
  616.                     if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  617.                         $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  618.                         return true;
  619.                     } else {
  620.                         $('#classcategory_id2')[0].setCustomValidity('');
  621.                     }
  622.                 {% endif %}
  624.                 // 個数フォームのチェック
  625.                 if ($('#quantity').val() < 1) {
  626.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  627.                     return true;
  628.                 } else {
  629.                     $('#quantity')[0].setCustomValidity('');
  630.                 }
  632.                 // IMEIフォームのチェック
  633.                 {% if Product.hasUserImeiCategory %}
  634.                     var $imei = $('#user_imei');
  635.                     var imeiRequiredMsg = '{{ 'front.cart.user_imei_required'|trans }}';
  636.                     if (!$imei.length || !$.trim($imei.val() || '')) {
  637.                         event.preventDefault();
  638.                         if ($imei.length && window.CustomerInputValidate) {
  639.                             CustomerInputValidate.showInlineError($imei, imeiRequiredMsg, '.user-imei-form');
  640.                             CustomerInputValidate.scrollAndFlash($imei, { wrapperSelector: '.user-imei-form' });
  641.                         } else if ($imei.length) {
  642.                             alert(imeiRequiredMsg);
  643.                         } else {
  644.                             alert(imeiRequiredMsg);
  645.                         }
  646.                         return false;
  647.                     } else if ($imei.length && window.CustomerInputValidate) {
  648.                         CustomerInputValidate.clearInlineError($imei, '.user-imei-form');
  649.                     }
  650.                 {% endif %}
  652.                 event.preventDefault();
  653.                 $form = $('#form1');
  654.                 $.ajax({
  655.                     url: $form.attr('action'),
  656.                     type: $form.attr('method'),
  657.                     data: $form.serialize(),
  658.                     dataType: 'json',
  659.                     beforeSend: function(xhr, settings) {
  660.                         // Buttonを無効にする
  661.                         $('.add-cart').prop('disabled', true);
  662.                     }
  663.                 }).done(function(data) {
  664.                     if (data.error_code == 'OUT_OF_STOCK_ZERO' || data.error_code == 'OUT_OF_STOCK') {
  665.                         alert('この商品の在庫は残り' + data.stock_left + 'です。');
  666.                     } else if (data.error_code == 'DUPLICATE_IMEI') {
  667.                         {% if form.user_imei is defined %}
  668.                         if (window.CustomerInputValidate && $('#user_imei').length) {
  669.                             CustomerInputValidate.showInlineError($('#user_imei'), '{{ 'front.shopping.duplicate_imei'|trans }}', '.user-imei-form');
  670.                             CustomerInputValidate.scrollAndFlash($('#user_imei'), { wrapperSelector: '.user-imei-form' });
  671.                         } else {
  672.                             alert('{{ 'front.shopping.duplicate_imei'|trans }}');
  673.                         }
  674.                         {% else %}
  675.                         alert('{{ 'front.shopping.duplicate_imei'|trans }}');
  676.                         {% endif %}
  677.                     } else if (data.error_code == 'CART_HAS_PRODUCT') {
  678.                         alert('{{ 'front.shopping.cart_has_product'|trans }}');
  679.                     } else if (data.error_code == 'IMEI_VALIDATION_FAILED') {
  680.                         {% if form.user_imei is defined %}
  681.                         if (window.CustomerInputValidate && $('#user_imei').length) {
  682.                             CustomerInputValidate.showInlineError($('#user_imei'), '{{ 'front.shopping.imei_validation_failed'|trans }}', '.user-imei-form');
  683.                             CustomerInputValidate.scrollAndFlash($('#user_imei'), { wrapperSelector: '.user-imei-form' });
  684.                         } else {
  685.                             alert('{{ 'front.shopping.imei_validation_failed'|trans }}');
  686.                         }
  687.                         {% else %}
  688.                         alert('{{ 'front.shopping.imei_validation_failed'|trans }}');
  689.                         {% endif %}
  690.                     } else {
  691.                         // カートブロックを更新する
  692.                         $.ajax({
  693.                             url: "{{ url('block_cart') }}",
  694.                             type: 'GET',
  695.                             dataType: 'html'
  696.                         }).done(function(html) {
  697.                             $('.ec-headerRole__cart').html(html);
  698.                         });
  700.                         // Hiển thị popup thông báo thành công sử dụng ModalComponent
  701.                         if (window.ModalUtils) {
  702.                             window.ModalUtils.showSuccess('cart-success-modal',
  703.                                 '{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}',
  704.                                 '{{ 'front.modal.cart_success.message'|trans({}, 'messages') }}'
  705.                             );
  706.                         } else {
  707.                             // Fallback nếu ModalComponent chưa load
  708.                             alert('{{ 'front.modal.cart_success.title'|trans({}, 'messages') }}');
  709.                         }
  710.                     }
  711.                 }).fail(function(data) {
  712.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  713.                 }).always(function(data) {
  714.                     // Buttonを有効にする
  715.                     $('.add-cart').prop('disabled', false);
  716.                 });
  717.             });
  718.         });
  720.         // Modal events are now handled by ModalComponent
  721.     </script>
  722.     <script src="{{ asset('assets/CustomComponent/modal.js') }}"></script>
  723.     </script>
  724.     <script type="application/ld+json">
  725.     {
  726.         "@context": "https://schema.org/",
  727.         "@type": "Product",
  728.         "name": "{{ Product.name }}",
  729.         "image": [
  730.             {% for img in Product.ProductImage %}
  731.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  733.             {% else %}
  734.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  735.             {% endfor %}
  736.         ],
  737.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  738.         {% if Product.code_min %}
  739.         "sku": "{{ Product.code_min }}",
  740.         {% endif %}
  741.         "offers": {
  742.             "@type": "Offer",
  743.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  744.             "priceCurrency": "{{ eccube_config.currency }}",
  745.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  746.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  747.         }
  748.     }
  749.     </script>
  751. {% endblock %}
  752. {% block main %}
  753.     <!-- breadcrumb section -->
  754.     <div class="breadcrumb-section">
  755.         <div class="container-1360 border-box px-40">
  756.             <nav class="breadcrumb">
  757.                 <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  758.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  759.                 <a href="{{ url('product_list') }}" class="breadcrumb__item text-black">商品一覧</a>
  760.                 <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  761.                 <span class="breadcrumb__item breadcrumb__item--current text-black">{{ Product.name }}</span>
  762.             </nav>
  763.         </div>
  764.     </div>
  766.     <!-- product detail section -->
  767.     <div class="product-detail-section container-1200">
  768.         <div class="product-detail-wrapper">
  769.             <div class="product-detail-left">
  770.                 <!-- Main gallery (using existing slick) -->
  771.                 <div class="item_visual">
  772.                     {% for ProductImage in Product.ProductImage %}
  773.                         <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>
  774.                     {% else %}
  775.                         <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  776.                     {% endfor %}
  777.                 </div>
  779.                 <!-- Thumbs below -->
  780.                 <div class="product-detail-left-bottom">
  781.                     <div class="item_nav">
  782.                         {% for ProductImage in Product.ProductImage %}
  783.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  784.                                 <div class="product-thumbnail"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  785.                             </div>
  786.                         {% endfor %}
  787.                     </div>
  788.                 </div>
  789.             </div>
  790.             <div class="product-detail-right">
  791.                 <!-- Product Title -->
  792.                 <h1 class="product-title">{{ Product.name }}</h1>
  794.                 <!-- Product Price -->
  795.                 <div class="product-price">
  796.                     {% if Product.hasProductClass -%}
  797.                         <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>
  798.                     {% else %}
  799.                         <span class="product-price-value price02-default text-color-primary" data-original-price="{{ Product.getPrice02IncTaxMin|price }}">{{ Product.getPrice02IncTaxMin|price }}</span>
  800.                     {% endif %}
  801.                     <span class="price-tax">(税込)</span>
  802.                 </div>
  804.                 <!-- Quantity and Add to Cart -->
  805.                 <form method="post" id="form1" action="{{ url('product_add_cart', {'id': Product.id}) }}">
  806.                 <div class="product-quantity-wrapper">
  807.                     {% if Product.stock_find %}
  808.                         <div class="product-quantity-left{% if not Product.hasProductClass %} d-none{% endif %}">
  809.                             {# <div class="btn-group__header group__header-mobile mb-12">数量</div> #}
  810.                                     {{ form_widget(form._token) }}
  811.                                     {{ form_widget(form.product_id) }}
  812.                                     {{ form_widget(form.ProductClass) }}
  813.                                     {% if form.classcategory_id1 is defined or form.classcategory_id2 is defined %}
  814.                                         <div class="product-classcategory-list">
  815.                                             {% if form.classcategory_id1 is defined %}
  816.                                                 <div class="classcategory-wrapper" data-category-type="1">
  817.                                                     {{ form_widget(form.classcategory_id1, {'attr': {'class': 'classcategory-select'}}) }}
  818.                                                     {{ form_errors(form.classcategory_id1) }}
  819.                                                 </div>
  820.                                             {% endif %}
  821.                                             {% if form.classcategory_id2 is defined %}
  822.                                                 <div class="classcategory-wrapper" data-category-type="2">
  823.                                                     {{ form_widget(form.classcategory_id2, {'attr': {'class': 'classcategory-select'}}) }}
  824.                                                     {{ form_errors(form.classcategory_id2) }}
  825.                                                 </div>
  826.                                             {% endif %}
  827.                                         </div>
  828.                                     {% endif %}
  830.                                     <div class="product-quantity" style="display: none;">
  831.                                         <button type="button" class="quantity-btn quantity-btn--minus item-minus btn-disabled">
  832.                                             <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect y="5" width="12" height="2" fill="#333333"/></svg>
  833.                                         </button>
  834.                                         <div class="quantity-value">
  835.                                             {{ form_widget(form.quantity, {
  836.                                                 'attr': {
  837.                                                     'class': 'custom-quantity hide-number-input h-100 bg-white',
  838.                                                     'readonly': 'readonly',
  839.                                                 }
  840.                                             }) }}
  841.                                         </div>
  842.                                         <button type="button" class="quantity-btn quantity-btn--plus item-plus btn-disabled">
  843.                                             <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>
  844.                                         </button>
  845.                                         {{ form_errors(form.quantity) }}
  846.                                     </div>
  848.                         </div>
  850.                         <!-- Add to Cart / Favorite -->
  851.                         <div class="product-cart-actions">
  852.                             <button type="submit" class="btn-add-to-cart add-cart">
  853.                                 <span>カートに入れる</span>
  854.                                 <div class="btn-add-to-cart__icon">
  855.                                     <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>
  856.                                 </div>
  857.                             </button>
  858.                             {% include 'Product/favorite_button.twig' %}
  859.                         </div>
  861.                         {% else %}
  862.                         <!-- button out of stock -->
  863.                         <div class="product-cart-actions">
  864.                             <button class="btn-add-to-cart btn-add-to-cart--out-of-stock" disabled="disabled">
  865.                                 <span>{{ 'front.product.out_of_stock'|trans }}</span>
  866.                             </button>
  867.                             {% include 'Product/favorite_button.twig' %}
  868.                         </div>
  869.                     {% endif %}
  870.                 </div>
  871.                 {% if form.user_imei is defined %}
  872.                     <div class="user-imei-form mt-4">
  873.                         <div class="btn-group__header group__header-mobile mb-12" style="margin-bottom: 16px !important;">IMEI番号</div>
  874.                         {{ form_widget(form.user_imei, {required: false}) }}
  875.                         {{ form_errors(form.user_imei) }}
  876.                     </div>
  877.                 {% endif %}
  878.                 </form>
  879.                 {% if BaseInfo.option_favorite_product %}
  880.                     <form id="favorite-form" action="{{ url('product_add_favorite', {id: Product.id}) }}" method="post" hidden></form>
  881.                 {% endif %}
  882.                 <!-- Divider -->
  883.                 <div class="product-divider"></div>
  885.                 <!-- Product Description Section -->
  886.                 <div class="btn-group__header mb-16">商品説明</div>
  887.                 <div class="product-description">
  888.                     {{ Product.description_detail | nl2br }}
  889.                 </div>
  892.                 {% if Product.product_note is not empty %}
  893.                     <div class="btn-group__header mb-16">備考</div>
  894.                     <div class="product-remarks">{{ Product.product_note | nl2br }}</div>
  895.                 {% endif %}
  896.             </div>
  897.         </div>
  899.         <!-- border bottom -->
  900.         <div class="product-detail-border-bottom"></div>
  902.         <!-- btn bottom -->
  903.         <div class="btn-bottom">
  904.             <button class="btn-return" onclick="history.back()">
  905.                 <div class="btn-return__icon">
  906.                     <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>
  907.                 </div>
  908.                 <span>前のページに戻る</span>
  909.             </button>
  910.         </div>
  911.     </div>
  913.     <!-- Modal -->
  914.     {% include 'CustomComponent/modal.twig' with {
  915.         id: 'cart-success-modal',
  916.         title: 'front.modal.cart_success.title'|trans({}, 'messages'),
  917.         message: 'front.modal.cart_success.message'|trans({}, 'messages'),
  918.         showCancelButton: false,
  919.         showActionButton: true,
  920.         actionText: 'front.modal.cart_success.action_text'|trans({}, 'messages'),
  921.         actionUrl: url('cart'),
  922.         autoRedirect: false,
  923.         redirectUrl: '',
  924.         redirectDelay: 0,
  925.         reloadOnCancel: true,
  926.         reloadOnError: false
  927.     } %}
  929. {% endblock %}