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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'product_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block javascript %}
  78.     <script>
  79.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  80.         // 規格2に選択肢を割り当てる。
  81.         function fnSetClassCategories(form, classcat_id2_selected) {
  82.             var $form = $(form);
  83.             var product_id = $form.find('input[name=product_id]').val();
  84.             var $sele1 = $form.find('select[name=classcategory_id1]');
  85.             var $sele2 = $form.find('select[name=classcategory_id2]');
  86.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  87.         }
  88.         {% if form.classcategory_id2 is defined %}
  89.         fnSetClassCategories(
  90.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  91.         );
  92.         {% elseif form.classcategory_id1 is defined %}
  93.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  94.         {% endif %}
  95.     </script>
  96.     <script>
  97.         $(function() {
  98.             // bfcache無効化
  99.             $(window).bind('pageshow', function(event) {
  100.                 if (event.originalEvent.persisted) {
  101.                     location.reload(true);
  102.                 }
  103.             });
  104.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  105.             // img タグに width, height が付与されている.
  106.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  107.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  108.             $('.ec-grid2__cell').hide();
  109.             var removeSize = function () {
  110.                 $('.slide-item').height('');
  111.                 $('.slide-item img')
  112.                     .removeAttr('width')
  113.                     .removeAttr('height')
  114.                     .removeAttr('style');
  115.             };
  116.             var slickInitial = function(slick) {
  117.                 $('.ec-grid2__cell').fadeIn(1500);
  118.                 var baseHeight = $(slick.target).height();
  119.                 var baseWidth = $(slick.target).width();
  120.                 var rate = baseWidth / baseHeight;
  121.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  122.                 // transform を使用することでCLSの影響を受けないようにする
  123.                 $('.slide-item img')
  124.                     .css(
  125.                         {
  126.                             'transform-origin': 'top left',
  127.                             'transform': 'scaleY(' + rate + ')',
  128.                             'transition': 'transform .1s'
  129.                         }
  130.                     );
  131.                 // 正しいサイズに近くなったら属性を解除する
  132.                 setTimeout(removeSize, 500);
  133.             };
  134.             $('.item_visual').on('init', slickInitial);
  135.             // リサイズ時は CLS の影響を受けないため属性を解除する
  136.             $(window).resize(removeSize);
  137.             $('.item_visual').slick({
  138.                 dots: false,
  139.                 arrows: false,
  140.                 responsive: [{
  141.                     breakpoint: 768,
  142.                     settings: {
  143.                         dots: true
  144.                     }
  145.                 }]
  146.             });
  147.             $('.slideThumb').on('click', function() {
  148.                 var index = $(this).attr('data-index');
  149.                 $('.item_visual').slick('slickGoTo', index, false);
  150.             })
  151.         });
  152.     </script>
  153.     <script>
  154.         $(function() {
  155.             $('.add-cart').on('click', function(event) {
  156.                 // 入力チェックここから
  157.                 if($(this).hasClass('add-cart_left') || $(this).hasClass('add-cart_set') || $(this).hasClass('add-cart_no_type')) {
  158.                     var data_0_classcategory_id1 = document.getElementById("form_data_0_classcategory_id1");
  159.                     if (data_0_classcategory_id1 === null) {
  160.                     } else {
  161.                         // 規格1フォームの必須チェック
  162.                         if ($('#form_data_0_classcategory_id1').val() == '__unselected' || $('#form_data_0_classcategory_id1').val() == '') {
  163.                             $('#form_data_0_classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  164.                             return true;
  165.                         } else {
  166.                             $('#form_data_0_classcategory_id1')[0].setCustomValidity('');
  167.                         }
  168.                     }
  169.                     var data_0_classcategory_id2 = document.getElementById("form_data_0_classcategory_id2");
  170.                     if (data_0_classcategory_id2 === null) {
  171.                     } else {
  172.                         // 規格2フォームの必須チェック
  173.                         if ($('#form_data_0_classcategory_id2').val() == '__unselected' || $('#form_data_0_classcategory_id2').val() == '') {
  174.                             $('#form_data_0_classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  175.                             return true;
  176.                         } else {
  177.                             $('#form_data_0_classcategory_id2')[0].setCustomValidity('');
  178.                         }
  179.                     }
  180.                     // サイズの入力チェックは結婚指輪・婚約指輪の場合のみ
  181.                     var category=0;
  182.                     {% for ProductCategory in Product.ProductCategories %}
  183.                         {% if ProductCategory.Category.id == 1 %}
  184.                             // 結婚指輪
  185.                             category = 1;
  186.                         {% elseif ProductCategory.Category.id == 2 %}
  187.                             // 婚約指輪
  188.                             category = 2;
  189.                         {% endif %}
  190.                     {% endfor %}
  191.                     if (category == 1 || category == 2) {
  192.                         var form_data_0_size = document.getElementById("form_data_0_size");
  193.                         if (form_data_0_size === null) {
  194.                         } else {
  195.                             // サイズ フォームの必須チェック
  196.                             if ($('#form_data_0_size').val() == '__unselected' || $('#form_data_0_size').val() == '') {
  197.                                 $('#form_data_0_size')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  198.                                 return true;
  199.                             } else {
  200.                                 $('#form_data_0_size')[0].setCustomValidity('');
  201.                             }
  202.                         }
  203.                     }
  204.                 }
  205.            
  206.                 if($(this).hasClass('add-cart_right') || $(this).hasClass('add-cart_set')) {
  207.                     var data_1_classcategory_id1 = document.getElementById("form_data_1_classcategory_id1");
  208.                     if (data_1_classcategory_id1 === null) {
  209.                     } else {
  210.                         // 規格1フォームの必須チェック
  211.                         if ($('#form_data_1_classcategory_id1').val() == '__unselected' || $('#form_data_1_classcategory_id1').val() == '') {
  212.                             $('#form_data_1_classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  213.                             if ($(this).hasClass('add-cart_right')) {
  214.                                 $('#form_data_0_classcategory_id1')[0].setCustomValidity('');
  215.                                 $('#form_data_0_classcategory_id2')[0].setCustomValidity('');
  216.                                 $('#form_data_0_size')[0].setCustomValidity('');
  217.                             }
  218.                             return true;
  219.                         } else {
  220.                             $('#form_data_1_classcategory_id1')[0].setCustomValidity('');
  221.                         }
  222.                     }
  223.                     var data_1_classcategory_id2 = document.getElementById("form_data_1_classcategory_id2");
  224.                     if (data_1_classcategory_id2 === null) {
  225.                     } else {
  226.                         // 規格2フォームの必須チェック
  227.                         if ($('#form_data_1_classcategory_id2').val() == '__unselected' || $('#form_data_1_classcategory_id2').val() == '') {
  228.                             $('#form_data_1_classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  229.                             if ($(this).hasClass('add-cart_right')) {
  230.                                 $('#form_data_0_classcategory_id2')[0].setCustomValidity('');
  231.                                 $('#form_data_0_size')[0].setCustomValidity('');
  232.                             }
  233.                             return true;
  234.                         } else {
  235.                             $('#form_data_1_classcategory_id2')[0].setCustomValidity('');
  236.                         }
  237.                     }
  238.                     var form_data_1_size = document.getElementById("form_data_1_size");
  239.                     if (form_data_1_size === null) {
  240.                     } else {
  241.                         // サイズ フォームの必須チェック
  242.                         if ($('#form_data_1_size').val() == '__unselected' || $('#form_data_1_size').val() == '') {
  243.                             $('#form_data_1_size')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  244.                             if ($(this).hasClass('add-cart_right')) {
  245.                                 $('#form_data_0_size')[0].setCustomValidity('');
  246.                             }
  247.                             return true;
  248.                         } else {
  249.                             $('#form_data_1_size')[0].setCustomValidity('');
  250.                         }
  251.                     }
  252.                 }
  253.                 if($(this).hasClass('add-cart_left')) {
  254.                     document.getElementById("form1").action = "{{ url('product_addmulti_cart', {id:Product.id, type:"left"}) }}";
  255.                 } else if($(this).hasClass('add-cart_right')) {
  256.                     document.getElementById("form1").action = "{{ url('product_addmulti_cart', {id:Product.id, type:"right"}) }}";
  257.                 } else if($(this).hasClass('add-cart_set')) {
  258.                     document.getElementById("form1").action = "{{ url('product_addmulti_cart', {id:Product.id, type:"set"}) }}";
  259.                 }
  260.                 // 入力チェックここまで
  261.                 
  262.                 {% if form.classcategory_id1 is defined %}
  263.                 // 規格1フォームの必須チェック
  264.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  265.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  266.                     return true;
  267.                 } else {
  268.                     $('#classcategory_id1')[0].setCustomValidity('');
  269.                 }
  270.                 {% endif %}
  271.                 {% if form.classcategory_id2 is defined %}
  272.                 // 規格2フォームの必須チェック
  273.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  274.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  275.                     return true;
  276.                 } else {
  277.                     $('#classcategory_id2')[0].setCustomValidity('');
  278.                 }
  279.                 {% endif %}
  280.                 // 個数フォームのチェック
  281.                 /*
  282.                 if ($('#quantity').val() < 1) {
  283.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  284.                     return true;
  285.                 } else {
  286.                     $('#quantity')[0].setCustomValidity('');
  287.                 }
  288.                 */
  289.                 
  290.                 event.preventDefault();
  291.                 $form = $('#form1');
  292.                 $.ajax({
  293.                     url: $form.attr('action'),
  294.                     type: $form.attr('method'),
  295.                     data: $form.serialize(),
  296.                     dataType: 'json',
  297.                     beforeSend: function(xhr, settings) {
  298.                         // Buttonを無効にする
  299.                         $('.add-cart').prop('disabled', true);
  300.                     }
  301.                 }).done(function(data) {
  302.                     // レスポンス内のメッセージをalertで表示
  303.                     $.each(data.messages, function() {
  304.                         $('#ec-modal-header').text(this);
  305.                     });
  306.                     $('.ec-modal').show()
  307.                     // カートブロックを更新する
  308.                     $.ajax({
  309.                         url: "{{ url('block_cart') }}",
  310.                         type: 'GET',
  311.                         dataType: 'html'
  312.                     }).done(function(html) {
  313.                         $('.ec-headerRole__cart').html(html);
  314.                     });
  315.                 }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
  316.                     console.log("XMLHttpRequest : " + XMLHttpRequest.status);
  317.                     console.log("textStatus     : " + textStatus);
  318.                     console.log("errorThrown    : " + errorThrown.message);
  319.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  320.                 }).always(function(data) {
  321.                     // Buttonを有効にする
  322.                     $('.add-cart').prop('disabled', false);
  323.                 });
  324.             });
  325.         });
  326.         $('.ec-modal-wrap').on('click', function(e) {
  327.             // モーダル内の処理は外側にバブリングさせない
  328.             e.stopPropagation();
  329.         });
  330.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  331.             $('.ec-modal').hide()
  332.         });
  333.     </script>
  334.     <script type="application/ld+json">
  335.     {
  336.         "@context": "https://schema.org/",
  337.         "@type": "Product",
  338.         "name": "{{ Product.name }}",
  339.         "image": [
  340.             {% for img in Product.ProductImage %}
  341.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  342.             {% else %}
  343.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  344.             {% endfor %}
  345.         ],
  346.         // description_list 使わない 2024.10 "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  347.         "description": "{{ Product.description_detail | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  348.         {% if Product.code_min %}
  349.         "sku": "{{ Product.code_min }}",
  350.         {% endif %}
  351.         "offers": {
  352.             "@type": "Offer",
  353.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  354.             "priceCurrency": "{{ eccube_config.currency }}",
  355.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  356.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  357.         }
  358.     }
  359.     </script>
  360.     <script>
  361.         var localfavo = localStorage.getItem('favo');
  362.         if(localfavo) {
  363.             var lsfavo = JSON.parse(localfavo);
  364.             if (lsfavo.length) {
  365.                 console.log(lsfavo);
  366.                 for (i=0;i<lsfavo.length;i++) {
  367.                     if(lsfavo[i][0] == {{ Product.id }}) {
  368.                         //$("#favorite_local").removeAttr("onclick");
  369.                         //$("#favorite_local").prop('disabled', true);
  370.                         $("#favorite_local").addClass("registered");
  371.                         $("#favorite_local").html("お気に入りに追加済みです");
  372.                     }
  373.                 }
  374.             }
  375.         }
  376.     </script>
  377.     <script>
  378.         $(function() {
  379.             //$('.js_form_add').on('click', function(e) {
  380.                 //e.preventDefault
  381.             var category=0;
  382.             {% for ProductCategory in Product.ProductCategories %}
  383.                 {% if ProductCategory.Category.id == 1 %}
  384.                     // 結婚指輪
  385.                     category = 1;
  386.                 {% elseif ProductCategory.Category.id == 2 %}
  387.                     // 婚約指輪
  388.                     category = 2;
  389.                 {% endif %}
  390.             {% endfor %}
  391.             // 結婚指輪は規格1がタイプ、規格2が素材
  392.             // 婚約指輪は規格1が素材、規格2がカラット数
  393.             for (let i = 0; i < 2; i++){ 
  394.                 // Get the data-prototype explained earlier
  395.                 var prototype = $('.product-class-item').data('prototype');
  396.                 // get the new index
  397.                 var index = $('.product-class-item').data('index');
  398.                 // Replace '__name__' in the prototype's HTML to
  399.                 // instead be a number based on how many items we have
  400.                 var newForm = '';
  401.                 if (index == 0) {
  402.                     if(category == 1) {
  403.                         newForm += '<div class="category1 left_option"><p class="fw-bold">左のリング:<span class="ps-3 fs-3 text-danger fw-normal left_price"></span></p>';
  404.                     } else if (category == 2) {
  405.                         {% if Product.id == 119 %}
  406.                             newForm += '<div class="category2"><p class="mb-3"><span class="fs-3 text-danger ring_price"></p>';
  407.                         {% else %}
  408.                             newForm += '<div class="category2"><p class="mb-3"><span class="fs-3 text-danger ring_price"></p><p>まず素材を選択してください。<br>素材を選択するとダイヤモンドの選択肢が表示されます。</p>';
  409.                         {% endif %}
  410.                     } else {
  411.                         newForm += '<div class="category0"><p class="mb-3"><span class="fs-3 text-danger ring_price"></p>';
  412.                     }
  413.                 } else {
  414.                     if(category == 1) {
  415.                         newForm += '<div class="category1 right_option"><p class="fw-bold">右のリング:<span class="ps-3 fs-3 text-danger fw-normal right_price"></span></p>';
  416.                     } else if (category == 2) {
  417.                         newForm += '<div class="category2">';
  418.                     } else {
  419.                         newForm += '<div class="category0">';
  420.                     }
  421.                 }
  422.                 newForm += prototype.replace(/__name__/g, index);
  423.                 newForm += '</div>';
  424.                 // increase the index with one for the next item
  425.                 $('.product-class-item').data('index', index + 1);
  426.                 // Display the form in the page before the "new" link
  427.                 //$(this).before(newForm);
  428.                 $('.js_form_add').before(newForm);
  429.             }
  430.             
  431.             if(category == 1) {
  432.                 document.getElementById("form_data_0_classcategory_id1").value = 1;
  433.                 document.getElementById("form_data_1_classcategory_id1").value = 2;
  434.             }
  435.             var data_0_classcategory_id1 = document.getElementById("form_data_0_classcategory_id1");
  436.             if (data_0_classcategory_id1 === null) {
  437.             } else {
  438.                 // 規格2に選択肢を割り当てる。
  439.                 function fnSetClassCategories(form, classcat_id2_selected) {
  440.                     var $form = $(form);
  441.                     var product_id = $form.find('input[name=product_id]').val();
  442.                     var $sele1 = $form.find('#form_data_0_classcategory_id1');
  443.                     var $sele2 = $form.find('#form_data_0_classcategory_id2');
  444.                     eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  445.                 }
  446.                 var $form = $('#form1');
  447.                 var $sele2 = $form.find('#form_data_0_classcategory_id2');
  448.                 if (data_0_classcategory_id1 === null) {
  449.                     
  450.                 } else {
  451.                     {% if form.data.vars.prototype.classcategory_id2 is defined %}
  452.                         fnSetClassCategories(
  453.                             $('#form1'), {{ form.data.vars.prototype.classcategory_id2.vars.value|json_encode|raw }}
  454.                         );
  455.                     {% elseif form.data.vars.prototype.classcategory_id1 is defined %}
  456.                         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.data.vars.prototype.classcategory_id1.vars.value|json_encode|raw }}, null);
  457.                     {% endif %}
  458.                 }
  459.             }
  460.             
  461.             var data_1_classcategory_id1 = document.getElementById("form_data_1_classcategory_id1");
  462.             if (data_1_classcategory_id1 === null) {
  463.             } else {
  464.                 // 規格2に選択肢を割り当てる。
  465.                 function fnSetClassCategories(form, classcat_id2_selected) {
  466.                     var $form = $(form);
  467.                     var product_id = $form.find('input[name=product_id]').val();
  468.                     var $sele1 = $form.find('#form_data_1_classcategory_id1');
  469.                     var $sele2 = $form.find('#form_data_1_classcategory_id2');
  470.                     eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  471.                 }
  472.                 var $form = $('#form1');
  473.                 var $sele2 = $form.find('#form_data_1_classcategory_id2');
  474.                 if (data_0_classcategory_id1 === null) {
  475.                     
  476.                 } else {
  477.                     {% if form.data.vars.prototype.classcategory_id2 is defined %}
  478.                         fnSetClassCategories(
  479.                             $('#form1'), {{ form.data.vars.prototype.classcategory_id2.vars.value|json_encode|raw }}
  480.                         );
  481.                     {% elseif form.data.vars.prototype.classcategory_id1 is defined %}
  482.                         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.data.vars.prototype.classcategory_id1.vars.value|json_encode|raw }}, null);
  483.                     {% endif %}
  484.                 }
  485.             }
  486.             //});
  487.             {% if Product.hasProductClass %}
  488.                 if(category == 2) {
  489.                     // 婚約指輪は2本同時購入はない
  490.                     const element = document.getElementById('form_data_1'); 
  491.                     element.remove();
  492.                 }
  493.             {% else %}
  494.                 // 規格なし
  495.                 $('#form1').addClass('no_product_class');
  496.                 const element = document.getElementById('form_data_1'); 
  497.                 element.remove();
  498.             {% endif %}
  499.             
  500.             // 婚約指輪で素材が選択されたとき
  501.             if (category == 2) {
  502.                 $('#form_data_0_classcategory_id1').change(function() {
  503.                     // 規格2に選択肢を割り当てる。
  504.                     function fnSetClassCategories(form, classcat_id2_selected) {
  505.                         var $form = $(form);
  506.                         var product_id = $form.find('input[name=product_id]').val();
  507.                         var $sele1 = $form.find('#form_data_0_classcategory_id1');
  508.                         var $sele2 = $form.find('#form_data_0_classcategory_id2');
  509.                         eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  510.                     }
  511.                     
  512.                     var $form = $('#form1');
  513.                     var $sele2 = $form.find('#form_data_1_classcategory_id2');
  514.                     {% if form.data.vars.prototype.classcategory_id2 is defined %}
  515.                     fnSetClassCategories(
  516.                         $('#form1'), {{ form.data.vars.prototype.classcategory_id2.vars.value|json_encode|raw }}
  517.                     );
  518.                     {% elseif form.data.vars.prototype.classcategory_id1 is defined %}
  519.                     eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.data.vars.prototype.classcategory_id1.vars.value|json_encode|raw }}, null);
  520.                     {% endif %}
  521.                 });
  522.             }
  523.             
  524.             // 選択肢と連動する価格の表示
  525.             {% if Product.hasProductClass %}
  526.                 if(category == 1) {
  527.                     var default_left_price = $('.ec-layoutRole__main').find('.price02-default_left').first();
  528.                     var default_right_price = $('.ec-layoutRole__main').find('.price02-default_right').first();
  529.                     $('.left_price').text(default_left_price.text());
  530.                     $('.right_price').text(default_right_price.text());
  531.                 } else if(category == 2) {
  532.                     var default_ring_price = $('.ec-layoutRole__main').find('.price02-default_ring').first();
  533.                     $('.ring_price').text(default_ring_price.text());
  534.                 }
  535.             {% else %}
  536.                 // 規格なし
  537.                 var default_ring_price = $('.ec-layoutRole__main').find('.price02-default_ring').first();
  538.                 $('.ring_price').text(default_ring_price.text());
  539.             {% endif %}
  540.             
  541.             // 結婚指輪・婚約指輪以外の場合
  542.             if(category != 1 && category != 2) {
  543.                 $('#form_data_0_size').parent().css('display','none'); // サイズ不要
  544.             }
  545.             
  546.             // Android firefox 対策
  547.             if (navigator.userAgent.indexOf('Android') > 0) {
  548.                 let main = document.getElementsByTagName('main')[0]; 
  549.                 main.classList.add('Android'); 
  550.             }
  551.         });
  552.     </script>
  553.     <script>
  554.         $(function() {
  555.             function changePrice(category, change_class, classcategory_id1, classcategory_id2, size, product_id) {
  556.                 var price = '';
  557.                 price = $('#price_' + classcategory_id1 + '_' + classcategory_id2).text();
  558.                 price = price * 1; //number
  559.                 if (category == 1) { // 結婚指輪の場合のみサイズによる加算あり
  560.                     if (size) {
  561.                         if(size >= 16.5) {
  562.                             price = price + 22000; // 割り増し(税込)
  563.                         } else if(size >= 12.5) {
  564.                             price = price + 11000; // 割り増し(税込)
  565.                         }
  566.                     }
  567.                 } else if(category == 2) { // 婚約指輪の C110、C112の場合のみサイズによる加算あり
  568.                     if (product_id == 110 || product_id == 112) {
  569.                         if (size) {
  570.                             if(size >= 16) {
  571.                                 price = price + 22000; // 割り増し(税込)
  572.                             }
  573.                         }
  574.                     }
  575.                 }
  576.                 price = String(price).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
  577.                 $(change_class).text("¥" + price);
  578.             }
  579.             
  580.             $('.form-select').on('change', function(event) {
  581.                 var category=0;
  582.                 {% for ProductCategory in Product.ProductCategories %}
  583.                     {% if ProductCategory.Category.id == 1 %}
  584.                         category = 1; // 結婚指輪
  585.                     {% elseif ProductCategory.Category.id == 2 %}
  586.                         category = 2; // 婚約指輪
  587.                     {% endif %}
  588.                 {% endfor %}
  589.                 
  590.                 {% if Product.hasProductClass %}
  591.                     if ($(this).attr("id") == 'form_data_0_classcategory_id1') {
  592.                         if (category == 1) {
  593.                             changePrice(category, ".ring_price", $(this).val(), '', $('#form_data_0_size').val(), {{ Product.id}});
  594.                         } else if (category == 2) {
  595.                             // 規格2の最安値(class_category2 = 19)を表示
  596.                             changePrice(category, ".ring_price", $(this).val(), 19, '', {{ Product.id}});
  597.                         }
  598.                     } else if ($(this).attr("id") == 'form_data_0_classcategory_id2') {
  599.                         if (category == 1) {
  600.                             changePrice(category, ".left_price", 1, $(this).val(), $('#form_data_0_size').val(), {{ Product.id}});
  601.                         } else if (category == 2) {
  602.                             changePrice(category, ".ring_price", $('#form_data_0_classcategory_id1').val(), $(this).val(), $('#form_data_0_size').val(), {{ Product.id}});
  603.                         }
  604.                     } else if ($(this).attr("id") == 'form_data_1_classcategory_id2') {
  605.                         if (category == 1) {
  606.                             changePrice(category, ".right_price", 2, $(this).val(), $('#form_data_1_size').val(), {{ Product.id}});
  607.                         }
  608.                     } else if ($(this).attr("id") == 'form_data_0_size') {
  609.                         if (category == 1) {
  610.                             changePrice(category,".left_price", 1, $('#form_data_0_classcategory_id2').val(), $(this).val(), {{ Product.id}});
  611.                         } else if (category == 2) {
  612.                             changePrice(category, ".ring_price", $('#form_data_0_classcategory_id1').val(), $('#form_data_0_classcategory_id2').val(), $(this).val(), {{ Product.id}});
  613.                         }
  614.                     } else if ($(this).attr("id") == 'form_data_1_size') {
  615.                         if (category == 1) {
  616.                             changePrice(category, ".right_price", 2, $('#form_data_1_classcategory_id2').val(), $(this).val(), {{ Product.id}});
  617.                         }
  618.                     }
  619.                 {% else %}
  620.                     // 規格なし
  621.                     if ($(this).attr("id") == 'form_data_0_size') {
  622.                         changePrice(category, ".ring_price", '', '', $('#form_data_0_size').val(), {{ Product.id}});
  623.                     }
  624.                 {% endif %}
  625.             })
  626.         });
  627.     </script>
  628.     <script>
  629.         $(function() {
  630.             // 119 の場合
  631.             {% if(Product.id == 119) %}
  632.                 $('#form_data_0_classcategory_id1').val('27');
  633.                 $('#form_data_0_classcategory_id1').parent().css('display','none');
  634.                 $('#form_data_0_size').val('11');
  635.                 $('#form_data_0_size').parent().css('display','none');
  636.                 
  637.                 // 規格2に選択肢を割り当てる。
  638.                 function fnSetClassCategories(form, classcat_id2_selected) {
  639.                     var $form = $(form);
  640.                     var product_id = $form.find('input[name=product_id]').val();
  641.                     var $sele1 = $form.find('#form_data_0_classcategory_id1');
  642.                     var $sele2 = $form.find('#form_data_0_classcategory_id2');
  643.                     eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  644.                 }
  645.                 fnSetClassCategories(
  646.                     $('#form1'), {{ form.data.vars.prototype.classcategory_id2.vars.value|json_encode|raw }}
  647.                 );
  648.             {% endif %}
  649.         });
  650.     </script>
  651. {% endblock %}
  652. {% block main %}
  653.     <div class="ec-productRole">
  654.         <div class="ec-grid2">
  655.             <div class="ec-grid2__cell">
  656.                 <div class="ec-sliderItemRole">
  657.                     <div class="item_visual">
  658.                         {% set img ="" %}{# お気に入りリスト登録用 #}
  659.                         {% for ProductImage in Product.ProductImage %}
  660.                             {% if loop.first %}{% set img = ProductImage %}{% endif %}
  661.                             <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>
  662.                         {% else %}
  663.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  664.                         {% endfor %}
  665.                     </div>
  666.                     <div class="item_nav">
  667.                         {% for ProductImage in Product.ProductImage %}
  668.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  669.                         {% endfor %}
  670.                     </div>
  671.                 </div>
  672.             </div>
  673.             <div class="ec-grid2__cell">
  674.                 <div class="ec-productRole__profile">
  675.                     {# 商品名 #}
  676.                     <div class="ec-productRole__title">
  677.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  678.                     </div>
  679.                     {# タグ #}
  680.                     <ul class="ec-productRole__tags">
  681.                         {% for Tag in Product.Tags %}
  682.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  683.                         {% endfor %}
  684.                     </ul>
  685.                     {# 通常価格 #}
  686.                     {# 表示しない
  687.                     {% if Product.hasProductClass -%}
  688.                         <div class="ec-productRole__priceRegular">
  689.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  690.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  691.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  692.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  693.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  694.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  695.                             {% endif %}
  696.                         </div>
  697.                     {% else %}
  698.                         {% if Product.getPrice01Max is not null %}
  699.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  700.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  701.                         {% endif %}
  702.                     {% endif %}
  703.                     #}
  704.                     {# カテゴリ判定用 1:結婚指輪 2:婚約指輪 #}
  705.                     {% set category = 0 %}
  706.                     {% if Product.ProductCategories is not empty %}
  707.                         {% for ProductCategory in Product.ProductCategories %}
  708.                             {% for Category in ProductCategory.Category.path %}
  709.                                 {% if Category.id == 1 %}
  710.                                     {% set category = 1 %}
  711.                                 {% elseif Category.id == 2 %}
  712.                                     {% set category = 2 %}
  713.                                 {% endif %}
  714.                             {% endfor %}
  715.                         {% endfor %}
  716.                     {% endif %}
  717.                     {# 販売価格 #}
  718.                     <div id="calc_price" class="d-none">
  719.                         {% if Product.hasProductClass -%}
  720.                             {% set ProductClass_info_all = repository('Eccube\\Entity\\ProductClass').findBy({ Product: Product }, { ClassCategory1: 'asc', ClassCategory2: 'asc' }) %}
  721.                             {% for ProductClass_info in ProductClass_info_all %}
  722.                                 <p id="price_{{ ProductClass_info.ClassCategory1 ? ProductClass_info.ClassCategory1.id }}_{{ ProductClass_info.ClassCategory2 ? ProductClass_info.ClassCategory2.id }}">{{ ProductClass_info.price02_inc_tax }}</p>
  723.                             {% endfor %}
  724.                         {% else %}
  725.                             <p id="price__">{{ Product.getPrice02IncTaxMin }}</p>
  726.                         {% endif %}
  727.                     </div>
  728.                     <div class="ec-productRole__price">
  729.                         {% if Product.hasProductClass -%}
  730.                             {% if category == 1 %}
  731.                                 {% set ProductClass_left = repository('Eccube\\Entity\\ProductClass').findBy({ Product: Product, ClassCategory1: 1 }, { price02: 'asc' }, 1) %}
  732.                                 {% set ProductClass_right = repository('Eccube\\Entity\\ProductClass').findBy({ Product: Product, ClassCategory1: 2 }, { price02: 'asc' }, 1) %}
  733.                                 <div class="ec-price">
  734.                                     <span class="fs-4">{{ '左のリング'|trans }}</span>
  735.                                     <span class="ec-price__price price02-default price02-default_left pe-0">{{ ProductClass_left[0].price02_inc_tax|price }}</span>
  736.                                     <span class="ec-price__tax">{{ '(税込) ~'|trans }}</span>
  737.                                 </div>
  738.                                 <div class="ec-price">
  739.                                     <span class="fs-4">{{ '右のリング'|trans }}</span>
  740.                                     <span class="ec-price__price price02-default price02-default_right pe-0">{{ ProductClass_right[0].price02_inc_tax|price }}</span>
  741.                                     <span class="ec-price__tax">{{ '(税込) ~'|trans }}</span>
  742.                                 </div>
  743.                             {% elseif category == 2 %}
  744.                                 <div class="ec-price">
  745.                                     <span class="ec-price__price price02-default price02-default_ring pe-0">{{ Product.getPrice02IncTaxMin|price }}</span>
  746.                                     <span class="ec-price__tax">{{ '(税込) ~'|trans }}</span>
  747.                                 </div>
  748.                             {% endif %}
  749.                         {% else %}
  750.                             <div class="ec-price">
  751.                                 <span class="ec-price__price price02-default_ring pe-0">{{ Product.getPrice02IncTaxMin|price }}</span>
  752.                                 <span class="ec-price__tax">{{ '(税込)'|trans }}</span>
  753.                             </div>
  754.                         {% endif %}
  755.                     </div>
  756.                     {# 詳細説明 #}
  757.                     <div class="ec-productRole__description mt-5">{{ Product.description_detail|raw|nl2br }}
  758.                     </div>
  759.                     {# 商品コード #}
  760.                     {% if Product.code_min is not empty %}
  761.                         <div class="ec-productRole__code">
  762.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  763.                         </div>
  764.                     {% endif %}
  765.                     
  766.                     {# 関連カテゴリ #}
  767.                     {% if Product.ProductCategories is not empty %}
  768.                         <div class="ec-productRole__category mb-3">
  769.                             <div>{{ '関連カテゴリ'|trans }}</div>
  770.                             {% for ProductCategory in Product.ProductCategories %}
  771.                                 <ul>
  772.                                     <li>
  773.                                         {% for Category in ProductCategory.Category.path %}
  774.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  775.                                             <span>></span>{% endif -%}
  776.                                         {% endfor %}
  777.                                     </li>
  778.                                 </ul>
  779.                             {% endfor %}
  780.                         </div>
  781.                     {% endif %}
  782.                     
  783.                     {% if Product.id == 38 or Product.id == 39 or Product.id == 47  %}
  784.                         <div class="text_brown lead mt-4 mb-3">
  785.                             男性用リングをお求めの場合は「左のリング」を、<br>
  786.                             女性用リングをお求めの場合は「右のリング」をお選びください。
  787.                         </div>
  788.                     {% endif %}
  789.                     
  790.                     <form action="{{ url('product_addmulti_cart', {id:Product.id, type:"no_type"}) }}" method="post" id="form1" name="form1">
  791.                         <div class="product-class-item" data-prototype="{{ form_widget(form.data.vars.prototype)|e('html_attr') }}" data-index=0></div>
  792.                         
  793.                         {% if Product.stock_find %}
  794.                             {#
  795.                             <div class="ec-productRole__actions">
  796.                                 {% if form.classcategory_id1 is defined %}
  797.                                     <div class="ec-select">
  798.                                         {{ form_row(form.classcategory_id1) }}
  799.                                         {{ form_errors(form.classcategory_id1) }}
  800.                                     </div>
  801.                                     {% if form.classcategory_id2 is defined %}
  802.                                         <div class="ec-select">
  803.                                             {{ form_row(form.classcategory_id2) }}
  804.                                             {{ form_errors(form.classcategory_id2) }}
  805.                                         </div>
  806.                                     {% endif %}
  807.                                 {% endif %}
  808.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  809.                                     {{ form_widget(form.quantity) }}
  810.                                     {{ form_errors(form.quantity) }}
  811.                                 </div>
  812.                             </div>
  813.                             #}
  814.                             
  815.                             <a href="#" class="js_form_add d-none">
  816.                                 <span class="fa fa-plus-circle"></span>
  817.                                 Add Another
  818.                             </a>
  819.                             
  820.                             <!-- trigger modal -->
  821.                             {% if Product.id != 119 and category != 0 %}
  822.                                 <p role="button" class="text-end pb-4 text-danger fw-bold" data-bs-toggle="modal" data-bs-target="#colorSample">
  823.                                     素材サンプル画像はこちらをご覧ください
  824.                                 </p>
  825.                             {% endif %}
  826.                             <!-- Modal -->
  827.                             <div class="modal fade" id="colorSample" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  828.                               <div class="modal-dialog modal-dialog-centered">
  829.                                 <div class="modal-content">
  830.                                   <div class="modal-body">
  831.                                       <img src="{{ asset('assets/img/pages/material.jpg') }}">
  832.                                   </div>
  833.                                   <div class="modal-footer">
  834.                                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  835.                                   </div>
  836.                                 </div>
  837.                               </div>
  838.                             </div>
  839.                             
  840.                             {#{% if Product.hasProductClass %}#}
  841.                                 {% set delivery_duration = Product.ProductClasses[0].getDeliveryDuration() %}
  842.                                 {% if delivery_duration %}
  843.                                     <div id="delivery_duration" class="mt-4">
  844.                                         <p class="fw-bold">
  845.                                             {{ '納期のめやす:'|trans }}<span class="ps-3 fs-4">
  846.                                             {% if delivery_duration.getId() == 11 %}
  847.                                                 {{ "now" |date_modify("+105 day")|date("n月d日") }}
  848.                                             {% elseif delivery_duration.getId() == 10 %}
  849.                                                 {{ "now" |date_modify("+90 day")|date("n月d日") }}
  850.                                             {% elseif delivery_duration.getId() == 9 %}
  851.                                                 {{ "now" |date_modify("+60 day")|date("n月d日") }}
  852.                                             {% elseif delivery_duration.getId() == 8 %}
  853.                                                 {{ "now" |date_modify("+60 day")|date("n月d日") }}
  854.                                             {% elseif delivery_duration.getId() == 7 %}
  855.                                                 {{ "now" |date_modify("+30 day")|date("n月d日") }}
  856.                                             {% elseif delivery_duration.getId() == 6 %}
  857.                                                 {{ "now" |date_modify("+21 day")|date("n月d日") }}
  858.                                             {% elseif delivery_duration.getId() == 5 %}
  859.                                                 {{ "now" |date_modify("+14 day")|date("n月d日") }}
  860.                                             {% elseif delivery_duration.getId() == 4 %}
  861.                                                 {{ "now" |date_modify("+7 day")|date("n月d日") }}
  862.                                             {% elseif delivery_duration.getId() == 3 %}
  863.                                                 {{ "now" |date_modify("+3 day")|date("n月d日") }}
  864.                                             {% endif %}
  865.                                            </span> {{ '頃です。'|trans }}
  866.                                         </p>
  867.                                         <p>短納期をご希望の方は購入手続き画面のお問い合わせ欄にご記入ください。<br>
  868.                                         事前にご相談されたい場合は下記のお問い合わせからお問い合わせ下さい。<br>
  869.                                         <a class="d-inline-block pt-2" href="{{ url('contact') }}">お問い合わせはこちら<i class="fas fa-angle-right ps-2"></i></a></p>
  870.                                     </div>
  871.                                 {% endif %}
  872.                             {#{% endif %}#}
  873.                             
  874.                             <div class="row cartin_btn_area pt-3 gx-2">
  875.                                 {% if category == 1 %}
  876.                                     <div id="cartin_left" class="/*ec-productRole__btn*/ col-6 mb-3">
  877.                                         <button type="submit" class="ec-blockBtn--action add-cart add-cart_left lh-sm text-wrap">
  878.                                             {{ '左のリングを'|trans }}<span class="aks">{{ 'カートに入れる'|trans }}</span>
  879.                                         </button>
  880.                                     </div>
  881.                                     <div id="cartin_right" class="/*ec-productRole__btn*/ col-6 mb-3">
  882.                                         <button type="submit" class="ec-blockBtn--action add-cart add-cart_right lh-sm text-wrap">
  883.                                             {{ '右のリングを'|trans }}<span class="aks">{{ 'カートに入れる'|trans }}</span>
  884.                                         </button>
  885.                                     </div>
  886.                                     <div id="cartin_set" class="/*ec-productRole__btn*/ col-12 lh-sm text-wrap">
  887.                                         <button type="submit" class="ec-blockBtn--action add-cart add-cart_set">
  888.                                             {{ '2本セットでカートに入れる'|trans }}
  889.                                         </button>
  890.                                     </div>
  891.                                 {% else %}
  892.                                     <div id="cartin_no_type"  class="/*ec-productRole__btn*/ col-12">
  893.                                         <button type="submit" class="ec-blockBtn--action add-cart add-cart_no_type">
  894.                                             {{ 'カートに入れる'|trans }}
  895.                                         </button>
  896.                                     </div>
  897.                                 {% endif %}
  898.                             </div>
  899.                         {% else %}
  900.                             <div class="ec-productRole__btn w-100">
  901.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  902.                                     {{ 'ただいま品切れ中です。'|trans }}
  903.                                 </button>
  904.                             </div>
  905.                         {% endif %}
  906.                         {{ form_rest(form) }}
  907.                     </form>
  908.                     <div class="ec-modal">
  909.                         <div class="ec-modal-overlay">
  910.                             <div class="ec-modal-wrap">
  911.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  912.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  913.                                 <div class="ec-modal-box">
  914.                                     <div class="ec-role">
  915.                                         <span class="ec-inlineBtn--cancel mb-2">{{ 'お買い物を続ける'|trans }}</span>
  916.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action mb-2">{{ 'カートへ進む'|trans }}</a>
  917.                                     </div>
  918.                                 </div>
  919.                             </div>
  920.                         </div>
  921.                     </div>
  922.                     
  923.                     <div class="ec-productRole__btn w-100 mt-3 favorite_btn_area">
  924.                         {% if is_favorite == false %}
  925.                             {% if Product.hasProductClass -%}
  926.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  927.                                     <button onclick="favo({{ Product.id }}, '{{ img }}', '{{ Product.name }}', '{{ Product.getPrice02IncTaxMin|price }}')" id="favorite_local" class="ec-blockBtn--cancel">
  928.                                         {{ 'お気に入りに追加'|trans }}
  929.                                     </button>
  930.                                 {% else %}
  931.                                     <button onclick="favo({{ Product.id }}, '{{ img }}', '{{ Product.name }}', '{{ Product.getPrice02IncTaxMin|price }} ~ {#{{ Product.getPrice02IncTaxMax|price }}#}')" id="favorite_local" class="ec-blockBtn--cancel">
  932.                                         {{ 'お気に入りに追加'|trans }}
  933.                                     </button>
  934.                                 {% endif %}
  935.                             {% else %}
  936.                                 <button onclick="favo({{ Product.id }}, '{{ img }}', '{{ Product.name }}', '{{ Product.getPrice02IncTaxMin|price }}')" id="favorite_local" class="ec-blockBtn--cancel">
  937.                                     {{ 'お気に入りに追加'|trans }}
  938.                                 </button>
  939.                             {% endif %}
  940.                         {% else %}
  941.                             <button id="favorite_local" class="ec-blockBtn--cancel"
  942.                                 disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  943.                             </button>
  944.                         {% endif %}
  945.                     </div>
  946.                     
  947.                 </div>
  948.             </div>
  949.         </div>
  950.         <!--div class="row">
  951.             <div class="col-md-6 offset-md-3">
  952.                 <img src="{{ asset('assets/img/pages/material.jpg') }}">
  953.             </div>
  954.         </div>-->
  955.         {% if Product.freearea %}
  956.              <div class="ec-productRole__description">
  957.                  {{ include(template_from_string(Product.freearea), sandboxed = true) }}
  958.             </div>
  959.         {% endif %}
  960.     </div>
  961. {% endblock %}