app/template/default/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.         /*モーダル本体の指定 + モーダル外側の背景の指定*/
  13.         .modal-container{
  14.           position: fixed;
  15.           top: 0;
  16.           left: 0;
  17.           width: 100%;
  18.           height: 100%;
  19.           text-align: center;
  20.           background: rgba(0,0,0,50%);
  21.           padding: 40px 20px;
  22.           overflow: auto;
  23.           opacity: 0;
  24.           visibility: hidden;
  25.           transition: .3s;
  26.             box-sizing: border-box;
  27.         }
  28.         /*モーダル本体の擬似要素の指定*/
  29.         .modal-container:before{
  30.           content: "";
  31.           display: inline-block;
  32.           vertical-align: middle;
  33.           height: 100%;
  34.         }
  35.         /*モーダル本体に「active」クラス付与した時のスタイル*/
  36.         .modal-container.active{
  37.           opacity: 1;
  38.           visibility: visible;
  39.         }
  40.         /*モーダル枠の指定*/
  41.         .modal-body{
  42.           position: relative;
  43.           display: inline-block;
  44.           vertical-align: middle;
  45.           max-width: 500px;
  46.           width: 90%;
  47.         }
  48.         /*モーダルを閉じるボタンの指定*/
  49.         .modal-close{
  50.           position: absolute;
  51.           display: flex;
  52.             align-items: center;
  53.             justify-content: center;
  54.           top: -40px;
  55.           right: -40px;
  56.           width: 40px;
  57.           height: 40px;
  58.           font-size: 40px;
  59.           color: #fff;
  60.           cursor: pointer;
  61.         }
  62.         /*モーダル内のコンテンツの指定*/
  63.         .modal-content{
  64.           background: #fff;
  65.           text-align: left;
  66.           padding: 30px;
  67.         }
  68.         .slide-item:not(.slick-slide) {
  69.           text-align:center;
  70.         }
  71.         .slide-item:not(.slick-slide) img {
  72.           width: auto;
  73.           height: auto;
  74.           max-width: 100%;
  75.           max-height: 100%;
  76.         }
  77.     </style>
  78. {% endblock %}
  79. {% block javascript %}
  80.     <script>
  81.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  82.         // 規格2に選択肢を割り当てる。
  83.         function fnSetClassCategories(form, classcat_id2_selected) {
  84.             var $form = $(form);
  85.             var product_id = $form.find('input[name=product_id]').val();
  86.             var $sele1 = $form.find('select[name=classcategory_id1]');
  87.             var $sele2 = $form.find('select[name=classcategory_id2]');
  88.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  89.         }
  90.         {% if form.classcategory_id2 is defined %}
  91.         fnSetClassCategories(
  92.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  93.         );
  94.         {% elseif form.classcategory_id1 is defined %}
  95.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  96.         {% endif %}
  97.     </script>
  98.     <script>
  99.         $(function() {
  100.             // bfcache無効化
  101.             $(window).bind('pageshow', function(event) {
  102.                 if (event.originalEvent.persisted) {
  103.                     location.reload(true);
  104.                 }
  105.             });
  106.         });
  107.     </script>
  108.     <script>
  109.         $(function() {
  110.             $('.add-cart').on('click', function(event) {
  111.                 {% if form.classcategory_id1 is defined %}
  112.                 // 規格1フォームの必須チェック
  113.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  114.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  115.                     return true;
  116.                 } else {
  117.                     $('#classcategory_id1')[0].setCustomValidity('');
  118.                 }
  119.                 {% endif %}
  120.                 {% if form.classcategory_id2 is defined %}
  121.                 // 規格2フォームの必須チェック
  122.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  123.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  124.                     return true;
  125.                 } else {
  126.                     $('#classcategory_id2')[0].setCustomValidity('');
  127.                 }
  128.                 {% endif %}
  129.                 // 個数フォームのチェック
  130.                 if ($('#quantity').val() < 1) {
  131.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  132.                     return true;
  133.                 } else {
  134.                     $('#quantity')[0].setCustomValidity('');
  135.                 }
  136.                 event.preventDefault();
  137.                 $form = $('#form1');
  138.                 $.ajax({
  139.                     url: $form.attr('action'),
  140.                     type: $form.attr('method'),
  141.                     data: $form.serialize(),
  142.                     dataType: 'json',
  143.                     beforeSend: function(xhr, settings) {
  144.                         // Buttonを無効にする
  145.                         $('.add-cart').prop('disabled', true);
  146.                     }
  147.                 }).done(function(data) {
  148.                     // レスポンス内のメッセージをalertで表示
  149.                     $.each(data.messages, function() {
  150.                         $('#ec-modal-header').html(this);
  151.                     });
  152.                     $('.ec-modal').show()
  153.                     // カートブロックを更新する
  154.                     $.ajax({
  155.                         url: "{{ url('block_cart') }}",
  156.                         type: 'GET',
  157.                         dataType: 'html'
  158.                     }).done(function(html) {
  159.                         $('.ec-headerRole__cart').html(html);
  160.                     });
  161.                 }).fail(function(data) {
  162.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  163.                 }).always(function(data) {
  164.                     // Buttonを有効にする
  165.                     $('.add-cart').prop('disabled', false);
  166.                 });
  167.             });
  168.             var cat = $(".hide_class_category1 select,.hide_class_category2 select");
  169.             $.each(cat, function(){
  170.                 var select = $(this);
  171.                 select.val(select.find("option:last").val());
  172.                 select.trigger("change");
  173.             });
  174.         });
  175.         $('.ec-modal-wrap').on('click', function(e) {
  176.             // モーダル内の処理は外側にバブリングさせない
  177.             e.stopPropagation();
  178.         });
  179.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  180.             $('.ec-modal').hide()
  181.         });
  182.     </script>
  183.     <script type="application/ld+json">
  184.     {
  185.         "@context": "https://schema.org/",
  186.         "@type": "Product",
  187.         "name": "{{ Product.name }}",
  188.         "image": [
  189.             {% for img in Product.ProductImage %}
  190.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  191.             {% else %}
  192.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  193.             {% endfor %}
  194.         ],
  195.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  196.         {% if Product.code_min %}
  197.         "sku": "{{ Product.code_min }}",
  198.         {% endif %}
  199.         "offers": {
  200.             "@type": "Offer",
  201.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  202.             "priceCurrency": "{{ eccube_config.currency }}",
  203.             "price": {{ Product.getPrice02IncTaxMin }},
  204.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  205.         }
  206.     }
  207.     </script>
  208.     <script>
  209.     $(function(){
  210.       // 変数に要素を入れる
  211.       var open = $('.modal-open'),
  212.         close = $('.modal-close'),
  213.         container = $('.modal-container');
  214.       //開くボタンをクリックしたらモーダルを表示する
  215.       open.on('click',function(){
  216.         container.addClass('active');
  217.         return false;
  218.       });
  219.       //閉じるボタンをクリックしたらモーダルを閉じる
  220.       close.on('click',function(){
  221.         container.removeClass('active');
  222.       });
  223.       //モーダルの外側をクリックしたらモーダルを閉じる
  224.       $(document).on('click',function(e) {
  225.         if(!$(e.target).closest('.modal-body').length) {
  226.           container.removeClass('active');
  227.         }
  228.       });
  229.     });
  230.     </script>
  231.     <script>
  232.         $(function() {
  233.             var w = window.innerWidth;
  234.             $('.slide-thumb').each(function () {
  235.               $(this).appendTo('.item_visual_thumb');
  236.             });
  237.             if( $('.item_visual_main .slide-item').length < 2 ){
  238.               $('.item_visual_thumb').hide();
  239.               return;
  240.             }
  241.             if (w > 767) {
  242.               $('.item_visual_main').not('.slick-initialized').slick({
  243.                   dots: false,
  244.                   arrows: true,
  245.                   autoplay: true,
  246.                   infinite: true,
  247.                   fade: false,
  248.                   autoplaySpeed: 3600,
  249.                   speed: 450,
  250.                   slidesToShow: 1,
  251.                   variableWidth: true,
  252.                   centerMode: true,
  253.                   centerPadding: '50px',
  254.                   lazyLoad: 'progressive',
  255.                   asNavFor: ".item_visual_thumb"
  256.               });
  257.             } else {
  258.               $('.item_visual_main').not('.slick-initialized').slick({
  259.                   dots: false,
  260.                   arrows: true,
  261.                   autoplay: true,
  262.                   infinite: true,
  263.                   fade: false,
  264.                   autoplaySpeed: 3600,
  265.                   speed: 450,
  266.                   slidesToShow: 1,
  267.                   variableWidth: false,
  268.                   centerMode: true,
  269.                   centerPadding: '0',
  270.                   lazyLoad: 'progressive',
  271.                   asNavFor: ".item_visual_thumb"
  272.               });
  273.             }
  274.             if (w > 960) {
  275.                 $('.item_visual_thumb').not('.slick-initialized').slick({
  276.                     dots: false,
  277.                     arrows: false,
  278.                     autoplay: false,
  279.                     infinite: true,
  280.                     slidesToShow: 10,
  281.                     lazyLoad: 'progressive',
  282.                     focusOnSelect: true,
  283.                     asNavFor: ".item_visual_main"
  284.                 });
  285.             } else if (960 >= w > 639) {
  286.                 $('.item_visual_thumb').not('.slick-initialized').slick({
  287.                     dots: false,
  288.                     arrows: false,
  289.                     autoplay: false,
  290.                     infinite: true,
  291.                     rows: 2,
  292.                     slidesToShow: 5,
  293.                     lazyLoad: 'progressive',
  294.                     focusOnSelect: true,
  295.                     asNavFor: ".item_visual_main"
  296.                 });
  297.             } else {
  298.               $('.item_visual_thumb').not('.slick-initialized').slick({
  299.                   dots: false,
  300.                   arrows: false,
  301.                   autoplay: false,
  302.                   infinite: true,
  303.                   rows: 3,
  304.                   slidesToShow: 3,
  305.                   lazyLoad: 'progressive',
  306.                   focusOnSelect: true,
  307.                   asNavFor: ".item_visual_main"
  308.               });
  309.             }
  310.         });
  311.     </script>
  312. {% endblock %}
  313. {% block main %}
  314.     {% if IsChainStore() == false %}
  315.         <div class="breadcrumb-wrapper">
  316.             <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  317.                 <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  318.                     <a itemprop="item" href="{{ url('homepage') }}">
  319.                         <span itemprop="name">HOME</span>
  320.                     </a>
  321.                     <meta itemprop="position" content="1" />
  322.                 </li>
  323.                 <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  324.                     <a itemprop="item" href="{{ url('product_list') }}">
  325.                         <span itemprop="name">ONLINE SHOP</span>
  326.                     </a>
  327.                     <meta itemprop="position" content="2" />
  328.                 </li>
  329.                 <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  330.                     <span itemprop="name">{{ Product.name }}</span>
  331.                     <meta itemprop="position" content="3" />
  332.                 </li>
  333.             </ol>
  334.         </div>
  335.     {% endif %}
  336.     {% set hasCategory = 0 %}
  337.     {% for ProductCategory in Product.ProductCategories %}
  338.           {% if ProductCategory.Category.id == 1 %}
  339.             {% set hasCategory = 1 %}
  340.           {% endif %}
  341.     {% endfor %}
  342.     <div class="ec-productRole">
  343.         {# 商品名 #}
  344.         <div class="ec-productRole__title">
  345.             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  346.         </div>
  347.         <div class="ec-grid2">
  348.             <div class="ec-grid2__column">
  349.                 <div class="ec-sliderItemRole">
  350.                     <div class="item_visual_main">
  351.                         {% for ProductImage in Product.ProductImage %}
  352.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  353.                             <div class="slide-thumb"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  354.                         {% else %}
  355.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  356.                             <div class="slide-thumb"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  357.                         {% endfor %}
  358.                     </div>
  359.                     <div class="item_visual_thumb">
  360.                     </div>
  361.                 </div>
  362.             </div>
  363.             <div class="ec-grid2__column">
  364.                 <div class="ec-productRole__profile">
  365.                     {# タグ #}
  366.                     <ul class="ec-productRole__tags">
  367.                         {% for Tag in Product.Tags %}
  368.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  369.                         {% endfor %}
  370.                     </ul>
  371.                     {# 通常価格 #}
  372.                     {% if Product.hasProductClass -%}
  373.                         <div class="ec-productRole__priceRegular">
  374.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  375.                                 <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  376.                                 <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  377.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  378.                                 <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  379.                                 <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  380.                             {% endif %}
  381.                         </div>
  382.                     {% else %}
  383.                         {% if Product.getPrice01Max is not null %}
  384.                             <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  385.                             <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  386.                         {% endif %}
  387.                     {% endif %}
  388.                     {# 販売価格 #}
  389.                     <div class="ec-productRole__price">
  390.                         {% if Product.hasProductClass -%}
  391.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  392.                                 <div class="ec-price">
  393.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  394.                                     <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  395.                                 </div>
  396.                             {% else %}
  397.                                 <div class="ec-price">
  398.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  399.                                     <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  400.                                 </div>
  401.                             {% endif %}
  402.                         {% else %}
  403.                             <div class="ec-price">
  404.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  405.                                 <span class="ec-price__tax">{{ (EnUser ? 'incl. tax' : 'common.tax_include')|trans }}</span>
  406.                             </div>
  407.                         {% endif %}
  408.                     </div>
  409.                     {# 商品コード #}
  410.                     {% if Product.code_min is not empty %}
  411.                         <div class="ec-productRole__code">
  412.                             {{ (EnUser ? 'Product code' : 'front.product.code')|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  413.                         </div>
  414.                     {% endif %}
  415.                     {# 関連カテゴリ #}
  416.                     {% if Product.ProductCategories is not empty %}
  417.                         <div class="ec-productRole__category">
  418.                             <ul class="ec-productRole-category-list">
  419.                                 {% for ProductCategory in Product.ProductCategories %}
  420.                                     {% set continue1 = false %}
  421.                                     {% if ProductCategory.Category.path[0].id == 11 %}
  422.                                         {% set continue1 = true %}
  423.                                     {% endif %}
  424.                                     {% if not continue1 %}
  425.                                         <li class="ec-productRole-category-list__item">
  426.                                             {% for Category in ProductCategory.Category.path %}
  427.                                                 <a class="category-{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a>{%- if loop.last == false %}<span>></span>{% endif -%}
  428.                                             {% endfor %}
  429.                                         </li>
  430.                                     {% endif %}
  431.                                 {% endfor %}
  432.                             </ul>
  433.                         </div>
  434.                     {% endif %}
  435.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  436.                     </div>
  437.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  438.                         {% if Product.stock_find %}
  439.                             <div class="ec-productRole__actions">
  440.                                 {% if form.classcategory_id1 is defined %}
  441.                                     {% if Product.hide_class_category1 %}
  442.                                         <div class="ec-select hide_class_category1" style="display:none;">
  443.                                     {% else %}
  444.                                         <div class="ec-select">
  445.                                     {% endif %}
  446.                                         {{ form_widget(form.classcategory_id1) }}
  447.                                         {{ form_errors(form.classcategory_id1) }}
  448.                                     </div>
  449.                                     {% if form.classcategory_id2 is defined %}
  450.                                         {% if Product.hide_class_category2 %}
  451.                                             <div class="ec-select hide_class_category2" style="display:none;">
  452.                                         {% else %}
  453.                                             <div class="ec-select">
  454.                                         {% endif %}
  455.                                             {{ form_widget(form.classcategory_id2) }}
  456.                                             {{ form_errors(form.classcategory_id2) }}
  457.                                         </div>
  458.                                     {% endif %}
  459.                                 {% endif %}
  460.                                 <div class="ec-numberInput"><span>{{ (EnUser ? 'Quantity' : 'common.quantity')|trans }}</span>
  461.                                     {{ form_widget(form.quantity) }}
  462.                                     {{ form_errors(form.quantity) }}
  463.                                 </div>
  464.                             </div>
  465.                             <div class="ec-productRole__btn ec-productRole__btn--add">
  466.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  467.                                     {{ (EnUser ? 'Add to cart' : 'front.product.add_cart')|trans }}
  468.                                 </button>
  469.                             </div>
  470.                         {% else %}
  471.                             <div class="ec-productRole__btn">
  472.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  473.                                     {{ (EnUser ? 'Out of stock' : 'front.product.out_of_stock'|trans) }}
  474.                                 </button>
  475.                             </div>
  476.                         {% endif %}
  477.                         {{ form_rest(form) }}
  478.                     </form>
  479.                     <div class="ec-modal">
  480.                         <div class="ec-modal-overlay">
  481.                             <div class="ec-modal-wrap">
  482.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  483.                                 {% if EnUser == false %}
  484.                                     <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  485.                                 {% else %}
  486.                                     <div class="text-center">Added to cart</div>
  487.                                 {% endif %}
  488.                                 <div class="ec-modal-box">
  489.                                     <div class="ec-role">
  490.                                         <span class="ec-inlineBtn--cancel">{{ (EnUser ? 'Keep shopping' : 'front.product.continue')|trans }}</span>
  491.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ (EnUser ? 'Go to cart' : 'common.go_to_cart')|trans }}</a>
  492.                                     </div>
  493.                                 </div>
  494.                             </div>
  495.                         </div>
  496.                     </div>
  497.                     <div class="like_return-btn">
  498.                         {% if EnUser == false %}
  499.                             {% if BaseInfo.option_favorite_product %}
  500.                                 <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  501.                                     <div class="ec-productRole__btn ec-productRole__btn--favorite">
  502.                                         {% if is_favorite == false %}
  503.                                             <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  504.                                                 {{ 'front.product.add_favorite'|trans }}
  505.                                             </button>
  506.                                         {% else %}
  507.                                             <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  508.                                                     disabled="disabled">{{ 'front.product.add_favorite_alrady'|trans }}
  509.                                             </button>
  510.                                         {% endif %}
  511.                                     </div>
  512.                                 </form>
  513.                             {% endif %}
  514.                         {% endif %}
  515.                         <div class="ec-productRole__btn ec-productRole__btn--favorite">
  516.                             <a class="ec-blockBtn--cancel" href="{{ url('product_list') }}">
  517.                               {{ EnUser ? 'Back to product list' : '商品一覧に戻る' }}
  518.                             </a>
  519.                         </div>
  520.                     </div>
  521.                     {% if IsChainStore() == false %}
  522.                     {% if hasCategory == 1 %}
  523.                     <div class="ec-modal-02">
  524.                         <div class="ec-modal-02__banner modal-open">
  525.                             {% if EnUser == false %}
  526.                                 <img src="{{ asset('assets/img/product/banner_howtoeat.png') }}" alt="おいしいお召し上がり方">
  527.                             {% else %}
  528.                                 <img src="{{ asset('assets/img/product/banner_howtoeat_en.png') }}" alt="How to eat deliciously">
  529.                             {% endif %}
  530.                         </div>
  531.                         <div class="modal-container">
  532.                             <div class="modal-body">
  533.                                 <!-- 閉じるボタン -->
  534.                                 <div class="modal-close">×</div>
  535.                                 <!-- モーダル内のコンテンツ -->
  536.                                 <div class="modal-content">
  537.                                     {% if EnUser == false %}
  538.                                         <p><img src="{{ asset('assets/img/product/goodtoeat.jpg') }}" width="500" height="600" alt="ダシーズのおいしい食べ方"></p>
  539.                                     {% else %}
  540.                                         <p><img src="{{ asset('assets/img/product/goodtoeat_en.jpg') }}" width="500" height="600" alt="How to eat deliciously"></p>
  541.                                     {% endif %}
  542.                                 </div>
  543.                             </div>
  544.                         </div>
  545.                     </div>
  546.                     {% endif %}
  547.                     {% endif %}
  548.                 </div>
  549.             </div>
  550.         </div>
  551.         {% if Product.freearea %}
  552.             <div class="ec-productRole__description">
  553.                 {{ include(template_from_string(Product.freearea)) }}
  554.             </div>
  555.         {% endif %}
  556.     </div>
  557.     {% if IsChainStore() == false %}
  558.         {% if EnUser == true %}
  559.             {% set NewProducts = CustomizeNewProduct() %}
  560.             {% if NewProducts|length > 0 %}
  561.                 <div class="ec-products-top-area ec-products-top-area--new-list">
  562.                     <div class="ec-product-category-title">
  563.                         <h2 class="ec-product-category-title__title">{{ EnUser ? 'Recommended' : 'こちらもおすすめ' }}</span></h2>
  564.                     </div>
  565.                     <div class="ec-shelfRole">
  566.                         <ul class="ec-shelfGrid">
  567.                             {% for Product in NewProducts %}
  568.                                 <li class="ec-shelfGrid__item">
  569.                                     <a href="{{ url('product_detail', {'id': Product.id}) }}">
  570.                                         <p class="ec-shelfGrid__item-image">
  571.                                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" loading="lazy">
  572.                                         </p>
  573.                                         <p class="ec-shelfGrid__title">{{ Product.name }}</p>
  574.                                         {% if Product.description_list %}
  575.                                             <p class="ec-shelfGrid__description">{{ Product.description_list|raw|nl2br }}</p>
  576.                                         {% endif %}
  577.                                         <p class="price02-default">
  578.                                             {% if Product.hasProductClass %}
  579.                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  580.                                                     {{ Product.getPrice02IncTaxMin|price }}<span>{{ EnUser ? '(incl. tax)' : '(税込)' }}</span>
  581.                                                 {% else %}
  582.                                                     {{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}<span>{{ EnUser ? '(incl. tax)' : '(税込)' }}</span>
  583.                                                 {% endif %}
  584.                                             {% else %}
  585.                                                 {{ Product.getPrice02IncTaxMin|price }}<span>{{ EnUser ? '(incl. tax)' : '(税込)' }}</span>
  586.                                             {% endif %}
  587.                                         </p>
  588.                                     </a>
  589.                                 </li>
  590.                             {% endfor %}
  591.                         </ul>
  592.                     </div>
  593.                 </div>
  594.             {% endif %}
  595.         {% endif %}
  596.     {% endif %}
  597. {% endblock %}