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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'product_page' %}
  5. {% block stylesheet %}
  6.     <style>
  7.         .slick-slider {
  8.             margin-bottom: 30px;
  9.         }
  11.         .slick-dots {
  12.             position: absolute;
  13.             bottom: -45px;
  14.             display: block;
  15.             width: 100%;
  16.             padding: 0;
  17.             list-style: none;
  18.             text-align: center;
  19.         }
  21.         .slick-dots li {
  22.             position: relative;
  23.             display: inline-block;
  24.             width: 20px;
  25.             height: 20px;
  26.             margin: 0 5px;
  27.             padding: 0;
  29.             cursor: pointer;
  30.         }
  32.         .slick-dots li button {
  33.             font-size: 0;
  34.             line-height: 0;
  35.             display: block;
  36.             width: 20px;
  37.             height: 20px;
  38.             padding: 5px;
  39.             cursor: pointer;
  40.             color: transparent;
  41.             border: 0;
  42.             outline: none;
  43.             background: transparent;
  44.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  51.         .slick-dots li button:hover:before,
  52.         .slick-dots li button:focus:before {
  53.             opacity: 1;
  54.         }
  56.         .slick-dots li button:before {
  57.             content: " ";
  58.             line-height: 20px;
  59.             position: absolute;
  60.             top: 0;
  61.             left: 0;
  62.             width: 12px;
  63.             height: 12px;
  64.             text-align: center;
  65.             opacity: .25;
  66.             background-color: #719933;
  67.             border-radius: 50%;
  69.         }
  71.         .slick-dots li.slick-active button:before {
  72.             opacity: .75;
  73.             background-color: #719933;
  74.         }
  76.         .slick-dots li button.thumbnail img {
  77.             width: 0;
  78.             height: 0;
  79.         }
  80.         .other_recommend_area .slick-prev:before {
  81.             content: '<';
  82.             color: green;
  83.             font-weight: bold;
  84.         }
  85.         .other_recommend_area .slick-next:before {
  86.             content: '>';
  87.             color: green;
  88.             font-weight: bold;
  89.         }
  90.         .other_recommend_area .slick-slide{
  91.             padding: 0 8px 0 0;
  92.         }
  93.         .ec-productRole .ec-productRole__description{
  94.             margin-top: 20px;
  95.             font-size: 14px;
  96.         }
  97.         .ec-productRole .ec-productRole__description .sub_area:not(:first-child){
  98.             margin-top: 20px;
  99.         }
  100.     </style>
  101. {% endblock %}
  103. {% block javascript %}
  104.     <script>
  106.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  108.         // 規格2に選択肢を割り当てる。
  109.         function fnSetClassCategories(form, classcat_id2_selected) {
  110.             var $form = $(form);
  111.             var product_id = $form.find('input[name=product_id]').val();
  112.             var $sele1 = $form.find('select[name=classcategory_id1]');
  113.             var $sele2 = $form.find('select[name=classcategory_id2]');
  114.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  115.         }
  117.         {% if form.classcategory_id2 is defined %}
  118.         fnSetClassCategories(
  119.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  120.         );
  121.         {% elseif form.classcategory_id1 is defined %}
  122.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  123.         {% endif %}
  124.     </script>
  125.     <script>
  126.         function checkBreakPoint() {
  127.             var windowW = $(window).width();
  128.             if(windowW < 768){
  129.                 $('.other_recommend_area').not('.slick-initialized').slick({
  130.                     dots: false,
  131.                     arrows: true,
  132.                     slidesToShow:3,
  133.                     centerMode: false,
  134.                 });
  135.             }else{
  136.                 $('.other_recommend_area.slick-initialized').slick('unslick');
  137.             }
  138.         }
  139.         // ウインドウがリサイズする度にチェック
  140.         $(window).resize(function(){
  141.             checkBreakPoint();
  142.         });
  143.         // 初回チェック
  144.         checkBreakPoint();
  145.         $(function() {
  146.             //目次アコーディオン
  147.             $( '.product_contents' ).show();
  148.             $( '.product-contents__area h3' ).addClass("active").click( function() {
  149.                 $( '.product_contents' ).slideToggle( 200 );
  150.                 $( this ).toggleClass('close');
  151.             });
  152.             //関連商品アコーディオン
  153.             $( '.other_recommend_container' ).show();
  154.             $( '#whobought_area h2' ).addClass("active").click( function() {
  155.                 $( '.other_recommend_container' ).slideToggle( 200 );
  156.                 $( this ).toggleClass('close');
  157.             });
  159.             // bfcache無効化
  160.             $(window).bind('pageshow', function(event) {
  161.                 if (event.originalEvent.persisted) {
  162.                     location.reload(true);
  163.                 }
  164.             });
  166.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  167.             // img タグに width, height が付与されている.
  168.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  169.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  170.             //$('.ec-grid2__cell').hide();
  171.             //var removeSize = function () {
  172.             //    $('.slide-item').height('');
  173.             //    $('.slide-item img')
  174.             //        .removeAttr('width')
  175.             //        .removeAttr('height')
  176.             //        .removeAttr('style');
  177.             //};
  178.             //var slickInitial = function(slick) {
  179.             //    $('.ec-grid2__cell').fadeIn(1500);
  180.             //    var baseHeight = $(slick.target).height();
  181.             //    var baseWidth = $(slick.target).width();
  182.             //    var rate = baseWidth / baseHeight;
  183.             //    $('.slide-item').height(baseHeight * rate); // 余白を削除する
  184.             //    // transform を使用することでCLSの影響を受けないようにする
  185.             //    $('.slide-item img')
  186.             //        .css(
  187.             //            {
  188.             //                'transform-origin': 'top left',
  189.             //                'transform': 'scaleY(' + rate + ')',
  190.             //                'transition': 'transform .1s'
  191.             //            }
  192.             //        );
  193.             //    // 正しいサイズに近くなったら属性を解除する
  194.             //    setTimeout(removeSize, 500);
  195.             //};
  196.             //$('.item_visual').on('init', slickInitial);
  197.             //// リサイズ時は CLS の影響を受けないため属性を解除する
  198.             //$(window).resize(removeSize);
  199.             //$('.item_visual').slick({
  200.             //    dots: true,
  201.             //    arrows: false,
  202.             //});
  203.         });
  204.     </script>
  205.     <script>
  206.         $(function() {
  207.             $('.add-cart').on('click', function(event) {
  208.                 {% if form.classcategory_id1 is defined %}
  209.                 // 規格1フォームの必須チェック
  210.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  211.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  212.                     return true;
  213.                 } else {
  214.                     $('#classcategory_id1')[0].setCustomValidity('');
  215.                 }
  216.                 {% endif %}
  218.                 {% if form.classcategory_id2 is defined %}
  219.                 // 規格2フォームの必須チェック
  220.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  221.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  222.                     return true;
  223.                 } else {
  224.                     $('#classcategory_id2')[0].setCustomValidity('');
  225.                 }
  226.                 {% endif %}
  228.                 // 個数フォームのチェック
  229.                 if ($('#quantity').val() < 1) {
  230.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  231.                     return true;
  232.                 } else {
  233.                     $('#quantity')[0].setCustomValidity('');
  234.                 }
  236.                 event.preventDefault();
  237.                 $form = $('#form1');
  238.                 $.ajax({
  239.                     url: $form.attr('action'),
  240.                     type: $form.attr('method'),
  241.                     data: $form.serialize(),
  242.                     dataType: 'json',
  243.                     beforeSend: function(xhr, settings) {
  244.                         // Buttonを無効にする
  245.                         $('.add-cart').prop('disabled', true);
  246.                     }
  247.                 }).done(function(data) {
  248.                     // レスポンス内のメッセージをalertで表示
  249.                     $.each(data.messages, function() {
  250.                         $('#ec-modal-header').text(this);
  251.                     });
  253.                     $('.ec-modal').show()
  255.                     // カートブロックを更新する
  256.                     $.ajax({
  257.                         url: "{{ url('block_cart') }}",
  258.                         type: 'GET',
  259.                         dataType: 'html'
  260.                     }).done(function(html) {
  261.                         $('.ec-headerRole__cart').html(html);
  262.                     });
  263.                 }).fail(function(data) {
  264.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  265.                 }).always(function(data) {
  266.                     // Buttonを有効にする
  267.                     $('.add-cart').prop('disabled', false);
  268.                 });
  269.             });
  270.         });
  272.         $('.ec-modal-wrap').on('click', function(e) {
  273.             // モーダル内の処理は外側にバブリングさせない
  274.             e.stopPropagation();
  275.         });
  276.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  277.             $('.ec-modal').hide()
  278.         });
  279.     </script>
  280.     <script type="application/ld+json">
  281.     {
  282.         "@context": "https://schema.org/",
  283.         "@type": "Product",
  284.         "name": "{{ Product.name }}",
  285.         "image": [
  286.             {% for img in Product.ProductImage %}
  287.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  289.             {% else %}
  290.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  291.             {% endfor %}
  292.         ],
  293.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  294.         {% if Product.code_min %}
  295.         "sku": "{{ Product.code_min }}",
  296.         {% endif %}
  297.         "offers": {
  298.             "@type": "Offer",
  299.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  300.             "priceCurrency": "{{ eccube_config.currency }}",
  301.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  302.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  303.         }
  304.     }
  305.     </script>
  306.     <script>
  307.         function tatiyomiwindow() {
  308.             var windowW = $(window).width();
  309.             var windowH = $(window).height();
  310.             window.open(
  311.                 "{{ url('stand_reading', {'id': Product.id}) }}", //url
  312.                 "_blank,'teltel'",   //新規ウィンドウにドキュメントを読み込む
  313.                 "width=windowW,height=windowH,menubar=0,toolbar=0"
  314.             )
  315.         };
  316.     </script>
  317. {% endblock %}
  319. {% block main %}
  320. <div class="ec-productRole">
  322.     <h2 class="title">{{ Product.name }}</h2>
  324.     <div class="ec-grid2">
  325.         <div class="ec-grid2__cell" id="detailphotobloc">
  326.             <div class="ec-sliderItemRole">
  327.                 <div class="item_visual">
  328.                     {% for ProductImage in Product.ProductImage %}
  329.                         <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>
  330.                     {% else %}
  331.                         <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  332.                     {% endfor %}
  333.                 </div>
  334.             </div>
  335.         </div>
  336.         <div class="ec-grid2__cell" id="detailrightbloc">
  337.             <div class="ec-productRole__profile">
  338.                 <div class="ec-productRole__title">
  339.                     <p class="subtitle">{{ Product.sub_name_up }}</p>
  340.                     <h3 class="ec-headingTitle">{{ Product.name }}</h3>
  341.                     <p class="subtitle">{{ Product.sub_name_down }}</p>
  342.                 </div>
  344.                 {# 通常価格 #}
  345.                 {% if Product.hasProductClass and Product.getPrice01Min is not null %}
  346.                     <div class="ec-productRole__priceRegular">
  347.                         {% if Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  348.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default sale_price">{{ Product.getPrice01IncTaxMin|number_format}}</span>円</span>
  349.                             <span class="ec-productRole__priceRegularTax">(税込)</span>
  350.                         {% elseif Product.getPrice01Max is not null %}
  351.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default sale_price">{{ Product.getPrice01IncTaxMin|number_format}}～ {{ Product.getPrice01IncTaxMax|number_format}}</span>円</span>
  352.                             <span class="ec-productRole__priceRegularTax">(税込)</span>
  353.                         {% endif %}
  354.                     </div>
  355.                 {% elseif Product.getPrice01Max is not null %}
  356.                     <div class="ec-productRole__priceRegular">
  357.                         <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="sale_price">{{ Product.getPrice01IncTaxMin|number_format}}</span>円</span>
  358.                         <span class="ec-productRole__priceRegularTax">(税込)</span>
  359.                     </div>
  360.                 {% endif %}
  361.                 {# 著者 #}
  362.                 {% if Product.author is not empty %}
  363.                     <div class="ec-productRole__author">
  364.                         {{ Product.author|nl2br }}
  365.                     </div>
  366.                 {% endif %}
  367.                 {# 商品コード #}
  368.                 {% if Product.code_min is not empty %}
  369.                     <div class="ec-productRole__code">
  370.                         ISBN： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  371.                     </div>
  372.                 {% endif %}
  374.                 {# 販売価格 #}
  375.                 <div class="ec-productRole__price">
  376.                     <div class="ec-price">
  377.                         <span class="ec-productRole__pricePrice">定価：
  378.                             {% if Product.hasProductClass %}
  379.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  380.                                     <span class="ec-price__price price02-default"><span class="sale_price">{{ Product.getPrice02IncTaxMin|number_format}}</span>円</span>
  381.                                 {% else %}
  382.                                     <span class="ec-price__price price02-default"><span class="sale_price">{{ Product.getPrice02IncTaxMin|number_format}} ～ {{ Product.getPrice02IncTaxMax|number_format}}</span>円</span>
  383.                                 {% endif %}
  384.                             {% else %}
  385.                                 <span class="ec-price__price"><span class="sale_price">{{ Product.getPrice02IncTaxMin|number_format}}</span>円</span>
  386.                             {% endif %}
  387.                             <span class="ec-price__tax">(税込)</span>
  388.                         </span>
  389.                     </div>
  390.                 </div>
  391.                 <!--★ポイント★-->
  392.                 {#
  393.                 <!--{if $smarty.const.USE_POINT !== false}-->
  394.                     <div class="point">ポイント：
  395.                         <span id="point_default"><!--{strip}-->
  396.                             <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
  397.                                 <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate|number_format}-->
  398.                             <!--{else}-->
  399.                                 <!--{if $arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate == $arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate}-->
  400.                                     <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate|number_format}-->
  401.                                 <!--{else}-->
  402.                                     <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate|number_format}-->～<!--{$arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate|number_format}-->
  403.                                 <!--{/if}-->
  404.                             <!--{/if}-->
  405.                         <!--{/strip}--></span><span id="point_dynamic"></span>
  406.                         Pt
  407.                     </div>
  408.                 <!--{/if}-->
  409.                 #}
  410.             </div>
  411.             <div class="productRole__cartarea">
  412.                 <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  413.                     {% if Product.stock_find %}
  414.                         <div class="ec-productRole__actions">
  415.                             {% if form.classcategory_id1 is defined %}
  416.                                 <div class="classlist">
  417.                                     <div class="ec-select">
  418.                                         {{ form_row(form.classcategory_id1) }}
  419.                                         {{ form_errors(form.classcategory_id1) }}
  420.                                     </div>
  421.                                     {% if form.classcategory_id2 is defined %}
  422.                                         <div class="ec-select">
  423.                                             {{ form_row(form.classcategory_id2) }}
  424.                                             {{ form_errors(form.classcategory_id2) }}
  425.                                         </div>
  426.                                     {% endif %}
  427.                                 </div>
  428.                             {% endif %}
  429.                             <div class="ec-numberInput"><span>数量：</span>
  430.                                 {{ form_widget(form.quantity) }}
  431.                                 {{ form_errors(form.quantity) }}
  432.                             </div>
  433.                         </div>
  434.                         <div class="ec-productRole__btn">
  435.                             <button type="submit" class="ec-blockBtn--action add-cart orange-btn small-btn">カゴに入れる</button>
  436.                         </div>
  437.                     {% else %}
  438.                         <div class="ec-productRole__btn">
  439.                             <div class="attention">
  440.                                 {% set targettag = [] %}
  441.                                 {% for tag in Product.Tags %}
  442.                                     {% set targettag = targettag|merge([tag.id]) %}
  443.                                 {% endfor %}
  444.                                 {% if '7' in targettag %}
  445.                                 申し訳ございませんが、本商品は絶版となりました。
  446.                                 {% elseif '6' in targettag %}
  447.                                 予約受付中です。
  448.                                 {% elseif '5' in targettag %}
  449.                                 この商品は発売前のため購入いただけません。
  450.                                 {% else %}
  451.                                 申し訳ございませんが、本商品は只今品切れ中です。
  452.                                 {% endif %}
  453.                             </div>
  454.                         </div>
  455.                     {% endif %}
  457.                     {{ form_rest(form) }}
  458.                 </form>
  459.                 <div class="ec-modal">
  460.                     <div class="ec-modal-overlay">
  461.                         <div class="ec-modal-wrap">
  462.                             <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  463.                             <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  464.                             <div class="ec-modal-box">
  465.                                 <div class="ec-role">
  466.                                     <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  467.                                     <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  468.                                 </div>
  469.                             </div>
  470.                         </div>
  471.                     </div>
  472.                 </div>
  473.             </div>
  474.             <div class="sub_cart_area flex">
  475.                 <!--★定期購読-->
  476.                 {# 関連カテゴリ #}
  477.                 {% if Product.ProductCategories is not empty %}
  478.                     {% set break = false %}
  479.                     {% for ProductCategory in Product.ProductCategories if not break %}
  480.                         {% for Category in ProductCategory.Category.path %}
  481.                             {% if Category.id == 1 or Category.id == 2 %}
  482.                                 <div class="read_btn">
  483.                                     <a href="{{ url('kenkoukyoushitsu_teiki') }}">
  484.                                         <img class="hover_change_image" src="{{ asset('assets/img/button/btn_teiki.png', 'user_data') }}" alt="定期購読のご案内" />
  485.                                     </a>
  486.                                 </div>
  487.                                 {% set break = true %}
  488.                             {% endif %}
  489.                         {% endfor %}
  490.                     {% endfor %}
  491.                 {% endif %}
  492.                 <!--★立ち読み-->
  493.                 {% if Product.hasStandReadingImage %}
  494.                 <div class="read_btn">
  495.                     <a href=javascript:tatiyomiwindow()><img class="hover_change_image" src="{{ asset('assets/img/button/btn_read.png', 'user_data') }}" alt="立ち読みをする" /></a>
  496.                 </div>
  497.                 {% endif %}
  498.                 <!--★お気に入り登録★-->
  499.                 {% if BaseInfo.option_favorite_product %}
  500.                 <div class="favorite_btn">
  501.                     <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  502.                         <div class="ec-productRole__btn">
  503.                         {% if is_favorite == false %}
  504.                             <button type="submit" id="favorite" class="ec-blockBtn--cancel" aria-label="お気に入りに追加">
  505.                                 <img src="{{ asset('assets/img/button/btn_favorite_on.png', 'user_data') }}" alt="お気に入り登録済" />
  506.                             </button>
  507.                         {% else %}
  508.                             <button type="submit" id="favorite" class="ec-blockBtn--cancel" aria-label="お気に入りに追加済み" disabled="disabled">
  509.                                 <img src="{{ asset('assets/img/button/btn_favorite_add_on.png', 'user_data') }}" alt="お気に入り登録済" />
  510.                             </button>
  511.                         {% endif %}
  512.                         </div>
  513.                     </form>
  514.                 </div>
  515.                 {% endif %}
  516.             </div>
  517.             {# 商品説明 #}
  518.             <div class="ec-productRole__description main_comment">{{ Product.description_detail|raw|nl2br }}</div>
  519.         </div>
  520.     </div>
  521.     {# 目次 #}
  522.     {% if Product.contents %}
  523.         <div class="product-contents__area">
  524.             <h3 class="subtitle">目次</h3>
  525.             <div class="product_contents">{{ Product.contents|raw|nl2br }}</div>
  526.         </div>
  527.     {% endif %}
  529.     <!--▼サブコメント-->
  530.     <!--▲サブコメント-->
  531.     <!--{ if $tpl_product_id == 473 }-->
  532.     <!--{ /if }-->
  533.     <!--この商品に対するお客様の声-->
  534.     {# 4系ではプラグインのため一旦非表示 20240117
  535.     <div id="customervoice_area">
  536.         <div id="customervoice_box">
  537.             <h2><img src="{{ asset('assets/img/title/tit_bloc_review_write.png', 'user_data') }}" alt="この商品に対するお客様の声"></h2>
  538.             <div class="review_box">
  539.                 <div class="review_bloc flex">
  540.                     <p>この商品に対するご感想をぜひお寄せください。</p>
  541.                     <div class="review_btn btn-oldinput__long">
  542.                         <!--★新規コメントを書き込む★-->
  543.                         <a href="./review.php" onclick="eccube.openWindow('./review.php?product_id=580','review','600','640'); return false;" target="_blank" class="">
  544.                             新規コメントを書き込む
  545.                         </a>
  546.                     </div>
  547.                 </div>
  548.             </div>
  549.         </div>
  550.     </div>
  551.     #}
  552.     <!--お客様の声ここまで-->
  553.     <!--▼関連商品-->
  554.     <!--▲関連商品-->
  556.     {# フリーエリア #}
  557.     {% if Product.freearea %}
  558.         <div class="ec-productRole__description">
  559.             {{ include(template_from_string(Product.freearea|raw|nl2br), sandboxed = true) }}
  560.         </div>
  561.     {% endif %}
  562. </div>
  563. {% endblock %}