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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/swiper-bundle.min.css') }}">
  17.     <link rel="stylesheet" href="{{ asset('assets/css/product-detail.css') }}">
  18. {% endblock %}
  20. {% block javascript %}
  21.     <script>
  22.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  24.         // 規格2に選択肢を割り当てる。
  25.         function fnSetClassCategories(form, classcat_id2_selected) {
  26.             var $form = $(form);
  27.             var product_id = $form.find('input[name=product_id]').val();
  28.             var $sele1 = $form.find('select[name=classcategory_id1]');
  29.             var $sele2 = $form.find('select[name=classcategory_id2]');
  30.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  31.         }
  33.         {% if form.classcategory_id2 is defined %}
  34.         fnSetClassCategories(
  35.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  36.         );
  37.         {% elseif form.classcategory_id1 is defined %}
  38.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  39.         {% endif %}
  40.     </script>
  41.     <script src="{{ asset('assets/js/swiper-bundle.min.js') }}"></script>
  42.     <script>
  43.         document.addEventListener('DOMContentLoaded', function() {
  44.             // bfcache無効化
  45.             window.addEventListener('pageshow', function(event) {
  46.                 if (event.persisted) {
  47.                     location.reload(true);
  48.                 }
  49.             });
  51.             // Thumbnails swiper
  52.             const thumbnailsSwiper = new Swiper('#product-detail-thumbnails-swiper-desktop', {
  53.                 spaceBetween: 6,
  54.                 slidesPerView: 4,
  55.                 freeMode: true,
  56.                 watchSlidesProgress: true,
  57.                 breakpoints: {
  58.                     0: {
  59.                         slidesPerView: 3,
  60.                     },
  61.                     600: {
  62.                         slidesPerView: 4,
  63.                     },
  64.                 },
  65.             });
  67.             // Main swiper
  68.             const mainSwiper = new Swiper('#product-detail-main-swiper-desktop', {
  69.                 spaceBetween: 0,
  70.                 slidesPerView: 1,
  71.                 thumbs: {
  72.                     swiper: thumbnailsSwiper,
  73.                 },
  74.             });
  76.             // Quantity controls
  77.             const quantityInput = document.querySelector('#quantity');
  78.             const quantityValue = document.querySelector('.product-info__quantity-value');
  79.             const minusBtn = document.querySelector('.product-info__quantity-btn--minus');
  80.             const plusBtn = document.querySelector('.product-info__quantity-btn--plus');
  82.             if (minusBtn && plusBtn && quantityInput) {
  83.                 minusBtn.addEventListener('click', function() {
  84.                     const currentValue = parseInt(quantityInput.value) || 1;
  85.                     if (currentValue > 1) {
  86.                         quantityInput.value = currentValue - 1;
  87.                         if (quantityValue) {
  88.                             quantityValue.textContent = quantityInput.value;
  89.                         }
  90.                     }
  91.                 });
  93.                 plusBtn.addEventListener('click', function() {
  94.                     const currentValue = parseInt(quantityInput.value) || 1;
  95.                     quantityInput.value = currentValue + 1;
  96.                     if (quantityValue) {
  97.                         quantityValue.textContent = quantityInput.value;
  98.                     }
  99.                 });
  101.                 // Update display when input changes
  102.                 quantityInput.addEventListener('change', function() {
  103.                     if (quantityValue) {
  104.                         quantityValue.textContent = this.value;
  105.                     }
  106.                 });
  108.                 // Initial display
  109.                 if (quantityValue) {
  110.                     quantityValue.textContent = quantityInput.value || 1;
  111.                 }
  112.             }
  113.         });
  114.     </script>
  115.     <script>
  116.         $(function() {
  117.             $('.add-cart').on('click', function(event) {
  118.                 {% if form.classcategory_id1 is defined %}
  119.                 // 規格1フォームの必須チェック
  120.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  121.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  122.                     return true;
  123.                 } else {
  124.                     $('#classcategory_id1')[0].setCustomValidity('');
  125.                 }
  126.                 {% endif %}
  128.                 {% if form.classcategory_id2 is defined %}
  129.                 // 規格2フォームの必須チェック
  130.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  131.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  132.                     return true;
  133.                 } else {
  134.                     $('#classcategory_id2')[0].setCustomValidity('');
  135.                 }
  136.                 {% endif %}
  138.                 // 個数フォームのチェック
  139.                 const quantityInput = $('#quantity');
  140.                 if (quantityInput.length > 0) {
  141.                     if (quantityInput.val() < 1) {
  142.                         quantityInput[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  143.                         return true;
  144.                     } else {
  145.                         quantityInput[0].setCustomValidity('');
  146.                     }
  147.                 }
  149.                 event.preventDefault();
  150.                 $form = $('#form1');
  151.                 $.ajax({
  152.                     url: $form.attr('action'),
  153.                     type: $form.attr('method'),
  154.                     data: $form.serialize(),
  155.                     dataType: 'json',
  156.                     beforeSend: function(xhr, settings) {
  157.                         // Buttonを無効にする
  158.                         $('.add-cart').prop('disabled', true);
  159.                     }
  160.                 }).done(function(data) {
  161.                     // レスポンス内のメッセージをalertで表示
  162.                     $.each(data.messages, function() {
  163.                         $('#ec-modal-header').html(this);
  164.                     });
  166.                     $('.ec-modal').show()
  168.                     // カートブロックを更新する
  169.                     $.ajax({
  170.                         url: "{{ url('block_cart') }}",
  171.                         type: 'GET',
  172.                         dataType: 'html'
  173.                     }).done(function(html) {
  174.                         $('.ec-headerRole__cart').html(html);
  175.                     });
  176.                 }).fail(function(data) {
  177.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  178.                 }).always(function(data) {
  179.                     // Buttonを有効にする
  180.                     $('.add-cart').prop('disabled', false);
  181.                 });
  182.             });
  183.         });
  185.         $('.ec-modal-wrap').on('click', function(e) {
  186.             // モーダル内の処理は外側にバブリングさせない
  187.             e.stopPropagation();
  188.         });
  189.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  190.             $('.ec-modal').hide()
  191.         });
  193.         function reloadPage() {
  194.             window.location.reload();
  195.         }
  196.     </script>
  197.     <script type="application/ld+json">
  198.     {
  199.         "@context": "https://schema.org/",
  200.         "@type": "Product",
  201.         "name": "{{ Product.name }}",
  202.         "image": [
  203.             {% for img in Product.ProductImage %}
  204.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  206.             {% else %}
  207.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  208.             {% endfor %}
  209.         ],
  210.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  211.         {% if Product.code_min %}
  212.         "sku": "{{ Product.code_min }}",
  213.         {% endif %}
  214.         "offers": {
  215.             "@type": "Offer",
  216.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  217.             "priceCurrency": "{{ eccube_config.currency }}",
  218.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  219.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  220.         }
  221.     }
  222.     </script>
  223. {% endblock %}
  225. {% block main %}
  226.     <div class="contact_wrapper body-section-ui">
  227.         <!-- breadcrumb -->
  228.         <nav class="breadcrumb" aria-label="パンくずリスト">
  229.             <a class="breadcrumb__item" href="{{ url('homepage') }}">ホーム</a>
  230.             <img class="breadcrumb__separator" src="{{ asset('assets/img/default/icons/icon-breadcrumb-separator.svg') }}" alt="" width="12" height="12" />
  231.             {% if Product.ProductCategories is not empty %}
  232.                 {% set firstCategory = Product.ProductCategories[0].Category %}
  233.                 {% for Category in firstCategory.path %}
  234.                     <a class="breadcrumb__item" href="{{ url('product_list') }}">備長炭一覧</a>
  235.                     {% if not loop.last %}
  236.                         <img class="breadcrumb__separator" src="{{ asset('assets/img/default/icons/icon-breadcrumb-separator.svg') }}" alt="" width="12" height="12" />
  237.                     {% endif %}
  238.                 {% endfor %}
  239.                 <img class="breadcrumb__separator" src="{{ asset('assets/img/default/icons/icon-breadcrumb-separator.svg') }}" alt="" width="12" height="12" />
  240.             {% endif %}
  241.             <span class="breadcrumb__item breadcrumb__item--current">{{ Product.name }}</span>
  242.         </nav>
  244.         <div class="container-1200">
  245.             <!-- product detail -->
  246.             <div class="product-detail product-layout">
  247.                 <!-- switch from mobile to desktop -->
  248.                 {#  #}
  249.                 <div class="product-info__desktop product-layout-header">
  250.                     <!-- Product Title -->
  251.                     <div class="product-info__header">
  252.                         {% if Product.ProductCategories is not empty %}
  253.                             {% set firstCategory = Product.ProductCategories[0].Category %}
  254.                             <div class="product-info__category-badge">{{ firstCategory.name }}</div>
  255.                         {% endif %}
  256.                         <h1 class="product-info__title">{{ Product.name }}</h1>
  257.                     </div>
  259.                     <!-- Price -->
  260.                     <div class="product-info__price">
  261.                         {% set priceIncTax = Product.getPrice02IncTaxMin %}
  262.                         {% set priceExTax = Product.getPrice02Min %}
  263.                         {% if Product.hasProductClass %}
  264.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  265.                                 <span class="product-info__price-main">{{ priceIncTax|number_format(0, '.', ',') }}</span>
  266.                             {% else %}
  267.                                 <span class="product-info__price-main">{{ priceIncTax|number_format(0, '.', ',') }}</span>
  268.                             {% endif %}
  269.                         {% else %}
  270.                             <span class="product-info__price-main">{{ priceIncTax|number_format(0, '.', ',') }}</span>
  271.                         {% endif %}
  272.                         <span class="product-info__price-unit">円</span>
  273.                         {% if priceExTax %}
  274.                             <span class="product-info__price-tax">（税抜 {{ priceExTax|number_format(0, '.', ',') }}円）</span>
  275.                         {% endif %}
  276.                     </div>
  278.                     <div class="product-info__product-info-wrapper">
  279.                         <form class="product-info__form" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  280.                             {% if form.classcategory_id1 is defined %}
  281.                                 <div class="product-info__variant-wrapper" style="margin-bottom: 16px;">
  282.                                     <div class="product-info__quantity-label" style="margin-bottom: 8px;">{{ form.classcategory_id1.vars.label|default('規格1') }}</div>
  283.                                     <div class="ec-select">
  284.                                         {{ form_widget(form.classcategory_id1) }}
  285.                                         {{ form_errors(form.classcategory_id1) }}
  286.                                     </div>
  287.                                     {% if form.classcategory_id2 is defined %}
  288.                                         <div class="product-info__quantity-label" style="margin-bottom: 8px; margin-top: 16px;">{{ form.classcategory_id2.vars.label|default('規格2') }}</div>
  289.                                         <div class="ec-select">
  290.                                             {{ form_widget(form.classcategory_id2) }}
  291.                                             {{ form_errors(form.classcategory_id2) }}
  292.                                         </div>
  293.                                     {% endif %}
  294.                                 </div>
  295.                             {% endif %}
  296.                             <!-- Quantity Selector -->
  297.                             {% if form.quantity is defined %}
  298.                                 <div class="product-info__quantity-wrapper">
  299.                                     <div class="product-info__quantity-label">数量</div>
  300.                                     <div class="product-info__quantity">
  301.                                         <button class="product-info__quantity-btn product-info__quantity-btn--minus" type="button">
  302.                                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  303.                                                 <rect x="3" y="8" width="14" height="2" fill="#353535"/>
  304.                                             </svg>
  305.                                         </button>
  306.                                         <span class="product-info__quantity-value">{{ form.quantity.vars.value|default(1) }}</span>
  307.                                         {{ form_widget(form.quantity, {'attr': {'style': 'display: none;'}}) }}
  308.                                         {{ form_errors(form.quantity) }}
  309.                                         <button class="product-info__quantity-btn product-info__quantity-btn--plus" type="button">
  310.                                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  311.                                                 <path d="M9 2H11V18H9V2Z" fill="#353535"/>
  312.                                                 <path d="M2 9H18V11H2V9Z" fill="#353535"/>
  313.                                             </svg>
  314.                                         </button>
  315.                                     </div>
  316.                                 </div>
  317.                             {% endif %}
  319.                             <!-- Add to Cart Button -->
  320.                             {% if Product.stock_find %}
  321.                                 <button class="product-info__cart-btn add-cart" type="button">
  322.                                     <span class="product-info__cart-text">
  323.                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  324.                                             <path d="M6 18C5.46957 18 4.96086 18.2107 4.58579 18.5858C4.21071 18.9609 4 19.4696 4 20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22C6.53043 22 7.03914 21.7893 7.41421 21.4142C7.78929 21.0391 8 20.5304 8 20C8 18.89 7.11 18 6 18ZM22 2H18.73L17.79 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5C2 5.17 2.05 5.34 2.12 5.5L5.7 11.97C6.04 12.58 6.7 13 7.45 13H14.9L15.8 14.63L15.83 14.75C15.83 14.8163 15.8037 14.8799 15.7568 14.9268C15.7099 14.9737 15.6463 15 15.58 15H4V17H16C16.5304 17 17.0391 16.7893 17.4142 16.4142C17.7893 16.0391 18 15.5304 18 15C18 14.65 17.91 14.32 17.76 14.04L16.4 11.59L20 4H22V2ZM16 18C15.4696 18 14.9609 18.2107 14.5858 18.5858C14.2107 18.9609 14 19.4696 14 20C14 20.5304 14.2107 21.0391 14.5858 21.4142C14.9609 21.7893 15.4696 22 16 22C16.5304 22 17.0391 21.7893 17.4142 21.4142C17.7893 21.0391 18 20.5304 18 20C18 18.89 17.11 18 16 18ZM7 11L4.22 6H16.86L14.5 11H7Z" fill="#F5F5F5"/>
  325.                                         </svg>
  326.                                         <span>カートに入れる</span>
  327.                                     </span>
  328.                                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  329.                                         <path d="M9 6L15 12L9 18" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  330.                                     </svg>
  331.                                 </button>
  332.                             {% else %}
  333.                                 <button class="product-info__cart-btn product-info__cart-btn--disabled" type="button" disabled="disabled">
  334.                                     <span class="product-info__cart-text">
  335.                                         <span>在庫切れ</span>
  336.                                     </span>
  337.                                 </button>
  338.                             {% endif %}
  340.                             {{ form_rest(form) }}
  341.                         </form>
  342.                     </div>
  343.                 </div>
  345.                 <div class="product-detail__left product-layout-media">
  346.                     <div class="product-images">
  347.                         <!-- Main Swiper -->
  348.                         <div class="swiper product-images__main-swiper" id="product-detail-main-swiper-desktop">
  349.                             <div class="swiper-wrapper">
  350.                                 {% for ProductImage in Product.ProductImage %}
  351.                                     <div class="swiper-slide">
  352.                                         <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.name }}" />
  353.                                     </div>
  354.                                 {% else %}
  355.                                     <div class="swiper-slide">
  356.                                         <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ Product.name }}" />
  357.                                     </div>
  358.                                 {% endfor %}
  359.                             </div>
  360.                         </div>
  362.                         <!-- Thumbnails Swiper -->
  363.                         <div class="swiper product-images__thumbnails-swiper" id="product-detail-thumbnails-swiper-desktop">
  364.                             <div class="swiper-wrapper">
  365.                                 {% for ProductImage in Product.ProductImage %}
  366.                                     <div class="swiper-slide">
  367.                                         <div class="product-images__thumbnail">
  368.                                             <img src="{{ asset(ProductImage, 'save_image') }}" alt="Thumbnail {{ loop.index }}" />
  369.                                         </div>
  370.                                     </div>
  371.                                 {% else %}
  372.                                     <div class="swiper-slide">
  373.                                         <div class="product-images__thumbnail">
  374.                                             <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="Thumbnail" />
  375.                                         </div>
  376.                                     </div>
  377.                                 {% endfor %}
  378.                             </div>
  379.                         </div>
  380.                     </div>
  381.                 </div>
  384.                 <div class="product-detail__right product-layout-detail">
  385.                     <div class="product-info">
  387.                         <!-- Product Details Section -->
  388.                         {% if Product.product_details_info %}
  389.                             <div class="product-info__section">
  390.                                 <div class="product-info__section-header">
  391.                                     <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  392.                                         <path d="M18.0833 16.3333H17.1617L16.835 16.0183C18.0179 14.6464 18.6681 12.8948 18.6667 11.0833C18.6667 9.58349 18.2219 8.11734 17.3886 6.87026C16.5554 5.62319 15.371 4.65121 13.9854 4.07725C12.5997 3.50329 11.0749 3.35311 9.6039 3.64572C8.13288 3.93832 6.78166 4.66056 5.72111 5.72111C4.66056 6.78166 3.93832 8.13288 3.64572 9.6039C3.35311 11.0749 3.50329 12.5997 4.07725 13.9854C4.65121 15.371 5.62319 16.5554 6.87026 17.3886C8.11734 18.2219 9.58349 18.6667 11.0833 18.6667C12.9617 18.6667 14.6883 17.9783 16.0183 16.835L16.3333 17.1617V18.0833L22.1667 23.905L23.905 22.1667L18.0833 16.3333ZM11.0833 16.3333C8.17834 16.3333 5.83334 13.9883 5.83334 11.0833C5.83334 8.17834 8.17834 5.83334 11.0833 5.83334C13.9883 5.83334 16.3333 8.17834 16.3333 11.0833C16.3333 13.9883 13.9883 16.3333 11.0833 16.3333Z" fill="#353535"/>
  393.                                     </svg>
  394.                                     <h3 class="product-info__section-title">商品詳細</h3>
  395.                                 </div>
  396.                                 <div class="product-info__section-content">
  397.                                     <!-- Product Specs -->
  398.                                     <div class="product-info__specs">
  399.                                         {% set details_lines = Product.product_details_info|split("\n") %}
  400.                                         {% for line in details_lines %}
  401.                                             {% if line|trim %}
  402.                                                 {% set normalized_line = line|trim|replace({'　': ' '}) %}
  403.                                                 {% set parts = normalized_line|split(' ', 2) %}
  404.                                                 {% if parts|length >= 2 %}
  405.                                                     <div class="product-info__spec-row">
  406.                                                         <div class="product-info__spec-label">{{ parts[0] }}</div>
  407.                                                         <div class="product-info__spec-value">{{ parts[1] }}</div>
  408.                                                     </div>
  409.                                                 {% endif %}
  410.                                             {% endif %}
  411.                                         {% endfor %}
  412.                                     </div>
  413.                                 </div>
  414.                             </div>
  415.                         {% endif %}
  417.                         <!-- Product Description Section -->
  418.                         {% if Product.description_detail %}
  419.                             <div class="product-info__section">
  420.                                 <div class="product-info__section-header">
  421.                                     <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  422.                                         <rect x="2.5" y="5.5" width="4" height="4" rx="2" fill="#353535"/>
  423.                                         <rect x="2.5" y="12.5" width="4" height="4" rx="2" fill="#353535"/>
  424.                                         <rect x="2.5" y="19.5" width="4" height="4" rx="2" fill="#353535"/>
  425.                                         <rect x="9" y="6" width="15" height="3" rx="1.5" fill="#353535"/>
  426.                                         <rect x="9" y="13" width="11" height="3" rx="1.5" fill="#353535"/>
  427.                                         <rect x="9" y="20" width="6" height="3" rx="1.5" fill="#353535"/>
  428.                                     </svg>
  429.                                     <h3 class="product-info__section-title">商品説明</h3>
  430.                                 </div>
  431.                                 <div class="product-info__description">
  432.                                     {{ Product.description_detail|raw|nl2br }}
  433.                                 </div>
  434.                             </div>
  435.                         {% endif %}
  436.                         <!-- Notes Section -->
  437.                         {% if Product.comment_detail %}
  438.                             <div class="product-info__section">
  439.                                 <div class="product-info__section-header">
  440.                                     <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  441.                                         <circle cx="9.78125" cy="13" r="1.5" fill="#353535"/>
  442.                                         <circle cx="14" cy="13" r="1.5" fill="#353535"/>
  443.                                         <circle cx="18.2188" cy="13" r="1.5" fill="#353535"/>
  444.                                         <mask id="path-4-inside-1_211_2082" fill="white">
  445.                                         <path d="M14 4C20.0751 4 24 6.76238 24 12.5C24 18.2376 20.0751 21 14 21C13.4263 21 12.8718 20.9743 12.3379 20.9248L6 25V18.2246C4.71403 16.844 4 14.9428 4 12.5C4 6.76238 7.92487 4 14 4Z"/>
  446.                                         </mask>
  447.                                         <path d="M24 12.5L26 12.5V12.5H24ZM12.3379 20.9248L12.5224 18.9333L11.836 18.8698L11.2562 19.2425L12.3379 20.9248ZM6 25H4V28.6637L7.08167 26.6823L6 25ZM6 18.2246H8V17.4375L7.46349 16.8615L6 18.2246ZM4 12.5L2 12.5L4 12.5ZM14 4V6C16.771 6 18.7605 6.63437 20.0205 7.65343C21.2128 8.61777 22 10.1258 22 12.5H24H26C26 9.13659 24.8248 6.39461 22.5359 4.54335C20.3146 2.74682 17.3041 2 14 2V4ZM24 12.5L22 12.5C22 14.8742 21.2128 16.3822 20.0205 17.3466C18.7605 18.3656 16.771 19 14 19V21V23C17.3041 23 20.3146 22.2532 22.5359 20.4567C24.8248 18.6054 26 15.8634 26 12.5L24 12.5ZM14 21V19C13.486 19 12.9931 18.9769 12.5224 18.9333L12.3379 20.9248L12.1534 22.9163C12.7504 22.9716 13.3665 23 14 23V21ZM12.3379 20.9248L11.2562 19.2425L4.91833 23.3177L6 25L7.08167 26.6823L13.4196 22.6071L12.3379 20.9248ZM6 25H8V18.2246H6H4V25H6ZM6 18.2246L7.46349 16.8615C6.58412 15.9174 6 14.5356 6 12.5L4 12.5L2 12.5C2 15.3501 2.84393 17.7706 4.53651 19.5878L6 18.2246ZM4 12.5H6C6 10.1258 6.78723 8.61777 7.97954 7.65343C9.23952 6.63437 11.229 6 14 6V4V2C10.6959 2 7.68535 2.74682 5.46411 4.54335C3.1752 6.39461 2 9.13659 2 12.5H4Z" fill="#353535" mask="url(#path-4-inside-1_211_2082)"/>
  448.                                     </svg>
  449.                                     <h3 class="product-info__section-title product-info__section-title-20">備考</h3>
  450.                                 </div>
  451.                                 <div class="product-info__notes">
  452.                                     {{ Product.comment_detail|raw|nl2br }}
  453.                                 </div>
  454.                             </div>
  455.                         {% endif %}
  456.                     </div>
  457.                 </div>
  458.             </div>
  460.             <!-- btn back to product list -->
  461.             <div class="product-detail-button-wrapper">
  462.                 <button class="btn_primary" type="button" onclick="history.back()">
  463.                     <img class="btn_primary-icon" src="{{ asset('assets/img/default/icons/icon-arrow-nav-left.svg') }}" alt="" width="24" height="24" />
  464.                     <span class="btn_primary-text">前のページに戻る</span>
  465.                 </button>
  466.             </div>
  467.         </div>
  468.     </div>
  470.     <!-- Modal -->
  471.     <div class="ec-modal">
  472.         <div class="ec-modal-overlay" onclick="reloadPage()">
  473.             <div class="ec-modal-wrap">
  474.                 <span class="ec-modal-close" onclick="reloadPage()"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  475.                 <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  476.                 <div class="ec-modal-box">
  477.                     <div class="ec-role ec-role-modal-flex">
  478.                         <span onclick="reloadPage()" class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
  479.                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
  480.                     </div>
  481.                 </div>
  482.             </div>
  483.         </div>
  484.     </div>
  486.     {% if Product.freearea %}
  487.         <div class="ec-productRole__description">
  488.             {{ include(template_from_string(Product.freearea)) }}
  489.         </div>
  490.     {% endif %}
  491. {% endblock %}