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.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 30px;
  20.         }
  22.         .slick-dots {
  23.             position: absolute;
  24.             bottom: -45px;
  25.             display: block;
  26.             width: 100%;
  27.             padding: 0;
  28.             list-style: none;
  29.             text-align: center;
  30.         }
  32.         .slick-dots li {
  33.             position: relative;
  34.             display: inline-block;
  35.             width: 20px;
  36.             height: 20px;
  37.             margin: 0 5px;
  38.             padding: 0;
  40.             cursor: pointer;
  41.         }
  43.         .slick-dots li button {
  44.             font-size: 0;
  45.             line-height: 0;
  46.             display: block;
  47.             width: 20px;
  48.             height: 20px;
  49.             padding: 5px;
  50.             cursor: pointer;
  51.             color: transparent;
  52.             border: 0;
  53.             outline: none;
  54.             background: transparent;
  55.         }
  57.         .slick-dots li button:hover,
  58.         .slick-dots li button:focus {
  59.             outline: none;
  60.         }
  62.         .slick-dots li button:hover:before,
  63.         .slick-dots li button:focus:before {
  64.             opacity: 1;
  65.         }
  67.         .slick-dots li button:before {
  68.             content: " ";
  69.             line-height: 20px;
  70.             position: absolute;
  71.             top: 0;
  72.             left: 0;
  73.             width: 12px;
  74.             height: 12px;
  75.             text-align: center;
  76.             opacity: .25;
  77.             background-color: black;
  78.             border-radius: 50%;
  80.         }
  82.         .slick-dots li.slick-active button:before {
  83.             opacity: .75;
  84.             background-color: black;
  85.         }
  87.         .slick-dots li button.thumbnail img {
  88.             width: 0;
  89.             height: 0;
  90.         }
  92. /*=========▽ Youtube表示のためのCSS ▽===============*/
  93. .youtube{
  94.   position:relative;
  95.   padding-bottom: 56.25%;
  96.   padding-top: 25px;
  97.   height: 0;
  98. }
  99.  
  100. .youtube iframe{
  101.   position:absolute;
  102.   top:0;
  103.   right:0;
  104.   width:100%;
  105.   height:100%;
  106. }
  107. /*========= △Youtube表示のためのCSS △===============*/
  111. /*=========▽ プロ会員専用通知CSS▽===============*/
  112. .custom_shop_desc{
  113.   position:relative;
  114.   top:0;
  115.   right:0;
  116.   width:40%;
  117.   margin:auto;
  119. }
  120. /*========= △プロ会員専用通知CSS△===============*/
  122. /*=========▽ 折りたたむメニュー▽===============*/
  123. details[open] summary ~ * {
  124.   animation: open 0.5s ease-in-out;
  125. }
  126. @keyframes open {
  127.   0%   { height: 0; }
  128.   100% { height: 100%; }
  129. }
  131. details[open] p {
  132.   animation: grow 0.8s ease-in-out;
  133. }
  134. @keyframes grow {
  135.   0%   { opacity: 0; }
  136.   100% { opacity: 1; }
  137. }
  139. details summary:after {
  140.   content: "+";
  141.   color: black;
  142.   position: absolute;
  143.   font-size: 1.75rem;
  144.   line-height: 0;
  145.   margin-top: 1.25rem;
  146.   right: 0;
  147.   font-weight: 200;
  148.   transform-origin: center 17%;
  149.   font-size: 2rem;
  150.   display:inline-block;
  151.   height:1rem;
  152.   transition: 800ms linear;
  153. }
  154. details[open] summary:after {
  155.   transform: rotate(945deg);
  156. }
  158. details summary::-webkit-details-marker {
  159.   display: none;
  160. }
  162. details summary {
  163.   width: 100%;
  164.   padding: 0.1rem 0;
  165.   border-top: 0.1px solid black;
  166.   position: relative;
  167.   cursor: pointer;
  168.   font-size: 1.75rem;
  169.   font-weight: 300;
  170.   list-style: none;
  171. }
  173. details summary {
  174.   outline: 0;
  175. }
  176. details p {
  177.   font-size: 1.5rem;
  178.   margin: 0 0 0rem;
  179.   padding-top: 0rem;
  180. }
  182. }
  183. section {
  184.   padding-top: 1em;
  185.   width: 50%;
  186.   margin: auto;
  187. }
  188. .custom_jiasuan_jifen{
  189.   color:#c80be5 !important;
  190.   font-size: 1em;
  191.   padding-left: 0 !important;
  192.   display: inline-block;
  193.     padding: 0 0.3em;
  194.     font-weight: bold;
  195. }
  196. /*========= △折りたたむメニュー△===============*/
  198. #payment-request-button{
  199.     display: none !important;
  200. }
  203.     </style>
  204. {% endblock %}
  206. {% block javascript %}
  207.     <script>
  208.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  210.         // 規格2に選択肢を割り当てる。
  211.         function fnSetClassCategories(form, classcat_id2_selected) {
  212.             var $form = $(form);
  213.             var product_id = $form.find('input[name=product_id]').val();
  214.             var $sele1 = $form.find('select[name=classcategory_id1]');
  215.             var $sele2 = $form.find('select[name=classcategory_id2]');
  216.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  217.         }
  219.         {% if form.classcategory_id2 is defined %}
  220.         fnSetClassCategories(
  221.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  222.         );
  223.         {% elseif form.classcategory_id1 is defined %}
  224.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  225.         {% endif %}
  226.     </script>
  227.     <script>
  228.         $(function() {
  229.             // bfcache無効化
  230.             $(window).bind('pageshow', function(event) {
  231.                 if (event.originalEvent.persisted) {
  232.                     location.reload(true);
  233.                 }
  234.             });
  236.             $('.item_visual').slick({
  237.                 dots: false,
  238.                 arrows: false,
  239.                 responsive: [{
  240.                     breakpoint: 768,
  241.                     settings: {
  242.                         dots: true
  243.                     }
  244.                 }]
  245.             });
  247.             $('.slideThumb').on('click', function() {
  248.                 var index = $(this).attr('data-index');
  249.                 $('.item_visual').slick('slickGoTo', index, false);
  250.             })
  251.         });
  252.     </script>
  253.     <script>
  254.         $(function() {
  255.             // 获取所有具有 class="product-option-select" 的 select 标签
  256.             const selects = document.querySelectorAll('.product-option-select');
  258.             // 检查是否所有 select 标签都选择了选项
  259.             function areAllOptionsSelected() {
  260.                 for (let select of selects) {
  261.                     if (select.value === "") { // 检查是否有未选择的选项
  262.                         return false;
  263.                     }
  264.                 }
  265.                 return true;
  266.             }
  268.             // 绑定一个事件监听器，监控选项的变化
  269.             selects.forEach(select => {
  270.                 select.addEventListener('change', function() {
  271.                     if (areAllOptionsSelected()) {
  272.                         console.log('所有选项都已选择');
  273.                     } else {
  274.                         console.log('还有选项未选择');
  275.                     }
  276.                 });
  277.             });
  281.             $('.add-cart').on('click', function(event) {
  282.                 {% if form.classcategory_id1 is defined %}
  283.                 // 規格1フォームの必須チェック
  284.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  285.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  286.                     return true;
  287.                 } else {
  288.                     $('#classcategory_id1')[0].setCustomValidity('');
  289.                 }
  290.                 {% endif %}
  292.                 {% if form.classcategory_id2 is defined %}
  293.                 // 規格2フォームの必須チェック
  294.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  295.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  296.                     return true;
  297.                 } else {
  298.                     $('#classcategory_id2')[0].setCustomValidity('');
  299.                 }
  300.                 {% endif %}
  302.                 if (!areAllOptionsSelected()) {
  303.                     alert('未選択の項目があります！');
  304.                     return false;
  305.                 }
  307.                 // 個数フォームのチェック
  308.                 if ($('#quantity').val() < 1) {
  309.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  310.                     return true;
  311.                 } else {
  312.                     $('#quantity')[0].setCustomValidity('');
  313.                 }
  315.                 event.preventDefault();
  316.                 $form = $('#form1');
  317.                 $.ajax({
  318.                     url: $form.attr('action'),
  319.                     type: $form.attr('method'),
  320.                     data: $form.serialize(),
  321.                     dataType: 'json',
  322.                     beforeSend: function(xhr, settings) {
  323.                         // Buttonを無効にする
  324.                         $('.add-cart').prop('disabled', true);
  325.                     }
  326.                 }).done(function(data) {
  327.                     // レスポンス内のメッセージをalertで表示
  328.                     $.each(data.messages, function() {
  329.                         $('#ec-modal-header').html(this);
  330.                     });
  332.                     
  334.                     if ('{{user_login}}' == "N") {
  335.                         var cartUrl = '{{ url('shopping_nonmember') }}';
  336.                         window.location.href = cartUrl;
  337.                     }
  338.                     else{
  339.                         $('.ec-modal').show();
  340.                     }
  344.                     // カートブロックを更新する
  345.                     $.ajax({
  346.                         url: "{{ url('block_cart') }}",
  347.                         type: 'GET',
  348.                         dataType: 'html'
  349.                     }).done(function(html) {
  350.                         $('.ec-headerRole__cart').html(html);
  351.                     });
  352.                 }).fail(function(data) {
  353.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  354.                 }).always(function(data) {
  355.                     // Buttonを有効にする
  356.                     $('.add-cart').prop('disabled', false);
  357.                 });
  358.             });
  359.         });
  361.         $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
  362.             $('.ec-modal').hide()
  363.         });
  364.     </script>
  366. {% endblock %}
  368. {% block main %}
  369.     <div class="ec-productRole">
  370.         <div class="ec-grid2">
  371.             <div class="ec-grid2__cell">
  372.                 <div class="ec-sliderItemRole">
  373.                     <div class="item_visual">
  374.                         {% for ProductImage in Product.ProductImage %}
  375.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  376.                         {% else %}
  377.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  378.                         {% endfor %}
  379.                     </div>
  380.                     <div class="item_nav">
  381.                         {% for ProductImage in Product.ProductImage %}
  382.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  383.                         {% endfor %}
  384.                     </div>
  385.                 </div>
  386.             </div>
  387.             <div class="ec-grid2__cell">
  388.                 <div class="ec-productRole__profile">
  389.                     {# 商品名 #}
  390.                     <div class="ec-productRole__title">
  391.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  392.                     </div>
  393.                     {# タグ #}
  394.                     <ul class="ec-productRole__tags">
  395.                         {% for Tag in Product.Tags %}
  396.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  397.                         {% endfor %}
  398.                     </ul>
  400.                     {# 関連カテゴリ #}
  401.                     {% if Product.ProductCategories is not empty %}
  402.                         <div class="ec-productRole__category">
  403.                             <div>{{ '関連カテゴリ'|trans }}</div>
  404.                             {% for ProductCategory in Product.ProductCategories %}
  405.                                 <ul>
  406.                                     <li>
  407.                                         {% for Category in ProductCategory.Category.path %}
  408.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a>
  409.                                         {%- if loop.last == false %}
  410.                                             <span>＞</span>
  411.                                         {% endif -%}
  412.                                         {% endfor %}
  413.                                     </li>
  414.                                 </ul>
  415.                             {% endfor %}
  416.                         </div>
  417.                     {% endif %}
  418.                         </div>
  419.                         
  420.                     {# 商品コード #}
  421.                     {# {% if Product.code_min is not empty %}
  422.                         <div class="ec-productRole__code">
  423.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}
  424.                             {% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  425.                         </div>
  426.                     {% endif %} #}
  428.                         
  429.                     {# 通常価格 #}
  430.                     {% if Product.hasProductClass -%}
  431.                         <div class="ec-productRole__priceRegular">
  432.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  433.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  434.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  435.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  436.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  437.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  438.                             {% endif %}
  439.                         </div>
  440.                     {% else %}
  441.                         {% if Product.getPrice01Max is not null %}
  442.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  443.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  444.                         {% endif %}
  445.                     {% endif %}
  446.                     {# 販売価格 #}
  447.                     <div class="ec-productRole__price">
  448.                         {% if Product.hasProductClass -%}
  449.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  450.                                 <div class="ec-price">
  451.                                     <span style="font-size: 1em;font-weight: bold;    color: #F74B57;line-height: 1.6;">販売価格：</span>
  452.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  453.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  454.                                 </div>
  455.                             {# 商户会员显示折扣价格 #}
  456.                             {% if is_shop %}
  457.                                 {% if Product.getShopDiscount =='Y' %}
  458.                                     {% set discount_price = (100-discount)/100 * Product.getPrice02IncTaxMin %}
  459.                                     <div class="ec-price">
  460.                                         <span class="ec-price__price price02-default">割引価格：{{ discount_price|price }}</span>
  461.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  462.                                     </div>
  463.                                 {% else %}{# 非折扣商品显示'プロ会員値引き対象外商品'#}
  464.                                     <div class="ec-price">
  465.                                         <span class="ec-price__price price02-default">プロ会員値引き対象外商品</span>
  466.                                     </div>
  467.                                 {% endif %}
  468.                             {% elseif points_rate != 0 %}{#  非商户会员情况下，显示积分 #}
  469.                                 {% set points = (points_rate/100) * Product.getPrice02Min %}
  470.                                     <div class="ec-price">
  471.                                         <span class="custom_jiasuan_jifen">加算ポイント：{{ points|round(0,'common')|number_format }}pt</span>
  472.                                     </div>
  473.                             {% endif %}
  475.                             {% else %}
  476.                                 <div class="ec-price">
  477.                                     <span style="font-size: 1em;font-weight: bold;    color: #F74B57;line-height: 1.6;">販売価格：</span>
  478.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  479.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  480.                                 </div>
  481.                                 {# 商户会员显示折扣价格 #}
  482.                                 {% if is_shop %}
  483.                                     {% if Product.getShopDiscount =='Y' %}
  484.                                         {% set discount_price1 = (100-discount)/100 * Product.getPrice02IncTaxMin %}
  485.                                         {% set discount_price2 = (100-discount)/100 * Product.getPrice02IncTaxMax %}
  486.                                         <div class="ec-price">
  487.                                             <span class="ec-price__price price02-default">割引価格：{{ discount_price1|price }} ～ {{ discount_price1|price }}</span>
  488.                                             <span class="ec-price__tax">{{ '税込'|trans }}</span>
  489.                                         </div>
  490.                                     {% else %}{# 非折扣商品显示'プロ会員値引き対象外商品'#}
  491.                                         <div class="ec-price">
  492.                                             <span class="ec-price__price price02-default">プロ会員値引き対象外商品</span>
  493.                                         </div>
  494.                                     {% endif %}
  495.                                 {% elseif points_rate != 0 %} {#  非商户会员情况下，显示积分 #}
  496.                                     {% set points1 = (points_rate/100) * Product.getPrice02Min %}
  497.                                     {% set points2 = (points_rate/100) * Product.getPrice02Max %}
  498.                                         <div class="ec-price">
  499.                                             <span class="custom_jiasuan_jifen">加算ポイント：{{ points1|round(0,'common')|number_format }} ～ {{ points2|round(0,'common')|number_format }}pt</span>
  500.                                         </div>                               
  501.                                 {% endif %}
  502.                             {% endif %}
  503.                         {% else %}
  504.                             <div class="ec-price">
  505.                                 <span style="font-size: 1em;font-weight: bold;    color: #F74B57;line-height: 1.6;">販売価格：</span>
  506.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}{{ '税込'|trans }}</span>
  507.                                 <span class="ec-price__tax"></span>
  508.                             </div>
  509.                             {# 商户会员显示折扣价格 #}
  510.                             {% if is_shop %}
  511.                                 {% if Product.getShopDiscount =='Y' %}
  512.                                     {% set discount_price = (100-discount)/100 * Product.getPrice02IncTaxMin %}
  513.                                     <div class="ec-price">
  514.                                         <span class="ec-price__price price02-default">割引価格：{{ discount_price|price }}</span>
  515.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  516.                                     </div>
  517.                                 {% else %}{# 非折扣商品显示'プロ会員値引き対象外商品'#}
  518.                                     <div class="ec-price">
  519.                                         <span class="ec-price__price price02-default">プロ会員値引き対象外商品</span>
  520.                                     </div>
  521.                                 {% endif %}
  522.                             {% elseif points_rate != 0 %}{#  非商户会员情况下，显示积分 #}
  523.                                 {% set points = (points_rate/100) * Product.getPrice02Min %}
  524.                                     <div class="ec-price">
  525.                                         <span class="custom_jiasuan_jifen">加算ポイント：{{ points|round(0,'common')|number_format }}pt</span>
  526.                                     </div>
  527.                             {% endif %}
  528.                         {% endif %}
  529.                     </div>
  530.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  531.                         {% if Product.stock_find %}
  532.                             <div class="ec-productRole__actions">
  533.                                 {% if form.classcategory_id1 is defined %}
  534.                                     <div class="ec-select">
  535.                                         {{ form_label(form.classcategory_id1) }}
  536.                                         {{ form_widget(form.classcategory_id1) }}
  537.                                         {{ form_errors(form.classcategory_id1) }}
  538.                                     </div>
  539.                                     {% if form.classcategory_id2 is defined %}
  540.                                         <div class="ec-select">
  541.                                             {{ form_label(form.classcategory_id2) }}
  542.                                             {{ form_widget(form.classcategory_id2) }}
  543.                                             {{ form_errors(form.classcategory_id2) }}
  544.                                         </div>
  545.                                     {% endif %}
  546.                                 {% endif %}
  547.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  548.                                     {{ form_widget(form.quantity) }}
  549.                                     {{ form_errors(form.quantity) }}
  550.                                 </div>
  551.                             </div>
  552.                             <div class="ec-productRole__btn custom_add_cart">
  553.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  554.                                     {{ 'カートに入れる'|trans }}   
  555.                                 </button>
  556.                             </div>
  557.                         {% else %}
  558.                             <div class="ec-productRole__btn ">
  559.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  560.                                     {{ 'ただいま品切れ中です。'|trans }}
  561.                                 </button>
  562.                             </div>
  563.                         {% endif %} 
  564.                         {{ form_rest(form) }}
  565.                     </form>
  566.                     <div class="ec-modal">
  567.                         <div class="ec-modal-overlay">
  568.                             <div class="ec-modal-wrap">
  569.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  570.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  571.                                 <div class="ec-modal-box">
  572.                                     <div class="ec-role">
  573.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  574.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  575.                                     </div>
  576.                                 </div>
  577.                             </div>
  578.                         </div>
  579.                     </div>
  580.                     {% if BaseInfo.option_favorite_product %}
  581.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  582.                             <div class="ec-productRole__btn">
  583.                                 {% if is_favorite == false %}
  584.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  585.                                         {{ 'お気に入りに追加'|trans }}
  586.                                         {% if favorite_count %}
  587.                                             <span class="favorite-count" data-prefix="件">{{ favorite_count }}件</span>
  588.                                         {% endif %}
  589.                                     </button>
  590.                                 {% else %}
  591.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  592.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  593.                                     </button>
  594.                                 {% endif %}
  595.                             </div>
  596.                         </form>
  597.                     {% endif %}
  598.                     {% if is_shop == false %}
  599.                         <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}</div>
  600.                     {% else %}
  601.                         <div class="ec-productRole__description custom_shop_detail">{{ Product.description_detail|raw|nl2br }}</div>
  602.                     {% endif %}
  604.                     {% if Product.freearea %}
  605.                         {% if is_shop == false %}
  606.                             <!-- <div class="ec-productRole__description">{{ include(template_from_string(Product.freearea)) }}</div> -->
  607.                             <div class="ec-productRole__description">{{ Product.freearea|raw|nl2br }}</div>
  608.                         {% else %}
  609.                             <!-- <div class="ec-productRole__description custom_shop_detail">{{ include(template_from_string(Product.freearea)) }}</div> -->
  610.                             <div class="ec-productRole__description custom_shop_detail">{{ Product.freearea|raw|nl2br }}</div>
  611.                         {% endif %}
  612.                     {% endif %}
  613.                 </div>
  614.            </div>
  615.      </div>
  616.     </div>
  617. {% endblock %}