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.     </style>
  93. {% endblock %}
  95. {% block javascript %}
  96.     <script>
  97.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  98.         
  100.         // 規格2に選択肢を割り当てる。
  101.         function fnSetClassCategories(form, classcat_id2_selected) {
  102.             var $form = $(form);
  103.             var product_id = $form.find('input[name=product_id]').val();
  104.             var $sele1 = $form.find('select[name=classcategory_id1]');
  105.             var $sele2 = $form.find('select[name=classcategory_id2]');
  106.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  107.         }
  109.         {% if form.classcategory_id2 is defined %}
  110.         fnSetClassCategories(
  111.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  112.         );
  113.         {% elseif form.classcategory_id1 is defined %}
  114.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  115.         {% endif %}
  116.     </script>
  117.     <script>
  118.         $(function() {
  119.             // bfcache無効化
  120.             $(window).bind('pageshow', function(event) {
  121.                 if (event.originalEvent.persisted) {
  122.                     location.reload(true);
  123.                 }
  124.             });
  126.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  127.             // img タグに width, height が付与されている.
  128.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  129.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  130.             $('.ec-grid2__cell').hide();
  131.             var removeSize = function () {
  132.                 $('.slide-item').height('');
  133.                 $('.slide-item img')
  134.                     .removeAttr('width')
  135.                     .removeAttr('height')
  136.                     .removeAttr('style');
  137.             };
  138.             var slickInitial = function(slick) {
  139.                 $('.ec-grid2__cell').fadeIn(1500);
  140.                 var baseHeight = $(slick.target).height();
  141.                 var baseWidth = $(slick.target).width();
  142.                 var rate = baseWidth / baseHeight;
  144.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  145.                 // transform を使用することでCLSの影響を受けないようにする
  146.                 $('.slide-item img')
  147.                     .css(
  148.                         {
  149.                             'transform-origin': 'top left',
  150.                             'transform': 'scaleY(' + rate + ')',
  151.                             'transition': 'transform .1s'
  152.                         }
  153.                     );
  154.                 // 正しいサイズに近くなったら属性を解除する
  155.                 setTimeout(removeSize, 500);
  156.             };
  157.             $('.item_visual').on('init', slickInitial);
  158.             // リサイズ時は CLS の影響を受けないため属性を解除する
  159.             $(window).resize(removeSize);
  160.             $('.item_visual').slick({
  161.                 dots: false,
  162.                 arrows: false,
  163.                 responsive: [{
  164.                     breakpoint: 768,
  165.                     settings: {
  166.                         dots: true
  167.                     }
  168.                 }]
  169.             });
  171.             $('.slideThumb').on('click', function() {
  172.                 var index = $(this).attr('data-index');
  173.                 $('.item_visual').slick('slickGoTo', index, false);
  174.             })
  175.         });
  176.     </script>
  177.     <script>
  178.         $(function() {
  179.             $('.add-cart').on('click', function(event) {
  180.                 {% if form.classcategory_id1 is defined %}
  181.                 // 規格1フォームの必須チェック
  182.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  183.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  184.                     return true;
  185.                 } else {
  186.                     $('#classcategory_id1')[0].setCustomValidity('');
  187.                 }
  188.                 {% endif %}
  190.                 {% if form.classcategory_id2 is defined %}
  191.                 // 規格2フォームの必須チェック
  192.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  193.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  194.                     return true;
  195.                 } else {
  196.                     $('#classcategory_id2')[0].setCustomValidity('');
  197.                 }
  198.                 {% endif %}
  200.                 // 個数フォームのチェック
  201.                 if ($('#quantity').val() < 1) {
  202.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  203.                     return true;
  204.                 } else {
  205.                     $('#quantity')[0].setCustomValidity('');
  206.                 }
  208.                 event.preventDefault();
  209.                 $form = $('#form1');
  210.                 $.ajax({
  211.                     url: $form.attr('action'),
  212.                     type: $form.attr('method'),
  213.                     data: $form.serialize(),
  214.                     dataType: 'json',
  215.                     beforeSend: function(xhr, settings) {
  216.                         // Buttonを無効にする
  217.                         $('.add-cart').prop('disabled', true);
  218.                     }
  219.                 }).done(function(data) {
  220.                     // レスポンス内のメッセージをalertで表示
  221.                     $.each(data.messages, function() {
  222.                         $('#ec-modal-header').text(this);
  223.                     });
  225.                     $('.ec-modal').show()
  227.                     // カートブロックを更新する
  228.                     $.ajax({
  229.                         url: "{{ url('block_cart') }}",
  230.                         type: 'GET',
  231.                         dataType: 'html'
  232.                     }).done(function(html) {
  233.                         $('.ec-headerRole__cart').html(html);
  234.                     });
  235.                 }).fail(function(data) {
  236.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  237.                 }).always(function(data) {
  238.                     // Buttonを有効にする
  239.                     $('.add-cart').prop('disabled', false);
  240.                 });
  241.             });
  242.         });
  244.         $('.ec-modal-wrap').on('click', function(e) {
  245.             // モーダル内の処理は外側にバブリングさせない
  246.             e.stopPropagation();
  247.         });
  248.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  249.             $('.ec-modal').hide()
  250.         });
  251.     </script>
  252.     <script type="application/ld+json">
  253.     {
  254.         "@context": "https://schema.org/",
  255.         "@type": "Product",
  256.         "name": "{% if Product.Maker %}{{ Product.Maker.nameEn }} {% endif %}{{ Product.name }}{% if Product.model_year %} {{ Product.model_year }}{{ '年モデル'|trans }}{% endif %}",
  257.         "image": [
  258.             {% for img in Product.ProductImage %}
  259.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  261.             {% else %}
  262.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  263.             {% endfor %}
  264.         ],
  265.     "description": "{{ (Product.description_list ~ ' ' ~ Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  266.         {% if Product.code_min %}
  267.         "sku": "{{ Product.code_min }}",
  268.         {% endif %}
  269.         "offers": {
  270.             "@type": "Offer",
  271.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  272.             "priceCurrency": "{{ eccube_config.currency }}",
  273.             "price": {{ Product.getPrice02IncTaxMin ? (Product.getPrice02IncTaxMin / 1.05)|round(0, 'common') : 0}},
  274.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  275.         }
  276.     }
  277.     </script>
  278. {% endblock %}
  280. {% block main %}
  281.     <div class="ec-productRole">
  282.         <div class="ec-grid2">
  283.             <div class="ec-grid2__cell">
  284.                 <div class="ec-sliderItemRole">
  286.                     <div class="item_visual">
  287.                         {% set ImageLoop = '' %}
  288.                         {% for ProductImage in Product.ProductImage %}
  289.                             {% set ImageLoop = loop.index %}
  290.                             <div class="slide-item">
  291.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="{% if loop.first %}{{ Product.Maker ? Product.Maker.nameEn ~ ' ' : '' }}{{ Product.name }}{% if Product.model_year %} {{ Product.model_year }}{{ '年モデル'|trans }}{% endif %}{% endif %}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  292.                                 {% if Product.ProductImageAlts is defined and Product.ProductImageAlts is not null %}
  293.                                     {% set altText = '' %}
  294.                                     {% set ProductImageAlt = Product.ProductImageAlts|filter(alt => alt.sort_no == ImageLoop)|first %}
  295.                                     {% if ProductImageAlt.alt_text is defined and ProductImageAlt.alt_text is not null %}
  296.                                         {% set altText = ProductImageAlt.alt_text %}
  297.                                         <p class="text-center" style="width:80%; margin-top:1em;">{{ altText }}</p>
  298.                                     {% endif %}
  299.                                 {% endif %}
  300.                             </div>
  301.                         {% else %}
  302.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{% if loop.first %}{{ Product.Maker ? Product.Maker.nameEn ~ ' ' : '' }}{{ Product.name }}{% if Product.model_year %} {{ Product.model_year }}{{ '年モデル'|trans }}{% endif %}{% endif %}" width="550" height="550"></div>
  303.                         {% endfor %}
  304.                     </div>
  305.                     <div class="item_nav">
  306.                         {% set ImageLoop = '' %}
  307.                         {% for ProductImage in Product.ProductImage %}
  308.                             {% set ImageLoop = loop.index %}
  309.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  310.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.Maker ? Product.Maker.nameEn ~ ' ' : '' }}{{ Product.name }}{% if Product.model_year %} {{ Product.model_year }}{{ '年モデル'|trans }}{% endif %}" width="133" height="133" loading="lazy">
  311.                                 {% if Product.ProductImageAlts is defined and Product.ProductImageAlts is not null %}
  312.                                     {% set altText = '' %}
  313.                                     {% set ProductImageAlt = Product.ProductImageAlts|filter(alt => alt.sort_no == ImageLoop)|first %}
  314.                                     {% if ProductImageAlt.alt_text is defined and ProductImageAlt.alt_text is not null %}
  315.                                         {% set altText = ProductImageAlt.alt_text %}
  316.                                         <p class="text-center" style="width:80%;">{{ altText }}</p>
  317.                                     {% endif %}
  318.                                 {% endif %}
  319.                             </div>
  320.                         {% endfor %}
  321.                     </div>
  322.                 </div>
  323.             </div>
  324.             <div class="ec-grid2__cell">
  325.                 <div class="ec-productRole__profile">
  326.                     {# 商品名 #}
  327.                     <div class="ec-productRole__title">
  328.                         <h2 class="ec-headingTitle">{% if Product.Maker %}<span class="small"> {{ Product.Maker.nameEn }}（{{ Product.Maker.nameJp }}）</span>{% endif %}<br />{{ Product.name }}{% if Product.model_year %} {{ Product.model_year }}{{ '年モデル'|trans }}{% endif %}</h2>
  329.                     </div>
  330.                     {# タグ #}
  331.                     <ul class="ec-productRole__tags">
  332.                         {% for Tag in Product.Tags %}
  333.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  334.                         {% endfor %}
  335.                     </ul>
  336.                     {# 通常価格 #}
  337.                     {% if Product.hasProductClass -%}
  338.                         <div class="ec-productRole__priceRegular">
  339.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  340.                                 <span class="ec-productRole__priceRegularPrice">{{ 'メーカー希望小売価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  341.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  342.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  343.                                 <span class="ec-productRole__priceRegularPrice">{{ 'メーカー希望小売価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  344.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  345.                             {% endif %}
  346.                         </div>
  347.                     {% else %}
  348.                         {% if Product.getPrice01Max is not null %}
  349.                             <span class="ec-productRole__priceRegularPrice">{{ 'メーカー希望小売価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
  350.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  351.                         {% endif %}
  352.                     {% endif %}
  353.                     {# 販売価格、その他備考 #}
  354.                     {# 表示について、規格1の選択肢がapp/Customize/Entity/ProductTrait.php、規格2の選択肢はeccube.jsで制御。 #}
  355.                     {# 規格を持たない商品はこのファイル上で制御しているよう。 #}
  356.                     {# 表示フラグ系はProductTypeExtension.phpで実装、ask_priceのみカートに値を渡して、値引処理に使用している。 #}
  357.                     <div class="ec-productRole__price">
  358.                         {% if Product.hasProductClass -%}
  359.                             {# 規格を持つ商品の場合の処理 #}
  360.                             {% if 'teika_price' in Product.ask_price and 'hidden_price' not in Product.ask_price %}
  361.                             {# 現金特価未適用フラグがある場合、現金特価計算をさせないように動作。規格1規格2がある場合の動作修正はeccube.jsも触る。 #}
  362.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  363.                                     <div class="ec-price">
  364.                                         <span class="ec-price__price">販売価格：</span>
  365.                                         <span class="ec-price__price price02-default teika_price">{{ Product.getPrice02IncTaxMin|price }}</span>
  366.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  367.                                     </div>
  368.                                 {% else %}
  369.                                     <div class="ec-price">
  370.                                         <span class="ec-price__price">販売価格：</span>
  371.                                         <span class="ec-price__price price02-default teika_price">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  372.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  373.                                     </div>
  374.                                 {% endif %}
  375.                             {% elseif 'hidden_price' in Product.ask_price %}
  376.                             {# 売価非表示フラグがある場合の処理。コメントありとなしで条件分岐。 #}
  377.                                 {% if Product.info_comment2 is not empty %}
  378.                                     <div class="ec-price">
  379.                                         <span class="ec-price__price">{{ Product.info_comment2|trans }}</span>
  380.                                     </div>
  381.                                 {% elseif Product.info_comment2 is empty %}
  382.                                     <div class="ec-price">
  383.                                         <span class="ec-price__price">{{ 'ビックリ大特価！'|trans }}</span>
  384.                                     </div>
  385.                                 {% endif %}
  386.                             {% else %}
  387.                             {# 条件なしの処理。現金特価での表示。規格2がある場合の動作修正はeccube.jsも同時に触る必要がある。 #}
  388.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  389.                                     <div class="ec-price">
  390.                                         <span class="ec-price__price">現金特価：</span>
  391.                                         <span class="ec-price__price price02-default genkin_tokka">{{ (Product.getPrice02IncTaxMin / 1.05)|price }}</span>
  392.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  393.                                     </div>
  394.                                 {% else %}
  395.                                     <div class="ec-price">
  396.                                         <span class="ec-price__price">現金特価：</span>
  397.                                         <span class="ec-price__price price02-default genkin_tokka">{{ (Product.getPrice02IncTaxMin / 1.05)|price }} ～ {{ (Product.getPrice02IncTaxMax / 1.05)|price }}</span>
  398.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  399.                                     </div>
  400.                                 {% endif %}
  401.                             {% endif %}
  402.                         {% else %}
  403.                             {# 規格がない商品の場合の処理 #}
  404.                             {% if 'teika_price' in Product.ask_price and 'hidden_price' not in Product.ask_price %}
  405.                                 <div class="ec-price">
  406.                                         <span class="ec-price__price">販売価格：</span>
  407.                                     <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  408.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  409.                                 </div>
  410.                             {% elseif 'hidden_price' in Product.ask_price and Product.info_comment2 is not empty %}
  411.                                 <div class="ec-price">
  412.                                     <span class="ec-price__price">{{ Product.info_comment2|trans }}</span>
  413.                                 </div>
  414.                             {% elseif 'hidden_price' in Product.ask_price and Product.info_comment2 is empty %}
  415.                                 <div class="ec-price">
  416.                                     <span class="ec-price__price">{{ 'ビックリ大特価！'|trans }}</span>
  417.                                 </div>
  418.                             {% else %}
  419.                                 <div class="ec-price">
  420.                                         <span class="ec-price__price">現金特価：</span>
  421.                                     <span class="ec-price__price">{{ (Product.getPrice02IncTaxMin / 1.05)|price }}</span>
  422.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  423.                                 </div>
  424.                             {% endif %}
  425.                         {% endif %}
  426.                     </div>
  427.                     {# 商品コード #}
  428.                     {% if Product.code_min is not empty %}
  429.                         <div class="ec-productRole__code">
  430.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  431.                         </div>
  432.                     {% endif %}
  434.                     {# 関連カテゴリ #}
  435.                     {% if Product.ProductCategories is not empty %}
  436.                         <div class="ec-productRole__category">
  437.                             <div>{{ '関連カテゴリ'|trans }}</div>
  438.                             {% for ProductCategory in Product.ProductCategories %}
  439.                                 {% if ProductCategory.Category.countBranches == 1 %}
  440.                                     <ul>
  441.                                         <li>
  442.                                             {% for Category in ProductCategory.Category.path %}
  443.                                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  444.                                                 <span>＞</span>{% endif -%}
  445.                                             {% endfor %}
  446.                                         </li>
  447.                                     </ul>
  448.                                 {% endif %}
  449.                             {% endfor %}
  450.                         </div>
  451.                     {% endif %}
  452.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  453.                         {% if Product.stock_find %}
  454.                             <div class="ec-productRole__actions">
  455.                                 {% if form.classcategory_id1 is defined %}
  456.                                     <div class="ec-select">
  457.                                         {% form_theme form.classcategory_id1 'Form/custom_form_div_layout.twig' %}
  458.                                         {{ form_row(form.classcategory_id1) }}
  459.                                         {{ form_errors(form.classcategory_id1) }}
  460.                                     </div>
  461.                                     {% if form.classcategory_id2 is defined %}
  462.                                         <div class="ec-select">
  463.                                             {% form_theme form.classcategory_id2 'Form/custom_form_div_layout.twig' %}
  464.                                             {{ form_row(form.classcategory_id2) }}
  465.                                             {{ form_errors(form.classcategory_id2) }}
  466.                                         </div>
  467.                                     {% endif %}
  468.                                 {% endif %}
  469.                                     <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  470.                                         {{ form_widget(form.quantity) }}
  471.                                         {{ form_errors(form.quantity) }}
  472.                                     </div>
  473.                             </div>
  474.                             {% if Product.disable_cart is not empty %}
  475.                                 <div class="ec-productRole__btn">
  476.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  477.                                         {{ '対面販売の為、お問い合わせください。'|trans }}
  478.                                     </button>
  479.                                 </div>
  480.                             {% elseif Product.disable_cart is empty %}
  481.                                <div class="ec-productRole__btn">
  482.                                     <button type="submit" class="ec-blockBtn--action add-cart">
  483.                                         {{ 'カートに入れる'|trans }}
  484.                                     </button>
  485.                                 </div>
  486.                             {% endif %}
  487.                         {% else %}
  488.                             {% if Product.disable_cart is not empty %}
  489.                                 <div class="ec-productRole__btn">
  490.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  491.                                         {{ '対面販売の為、お問い合わせください。'|trans }}
  492.                                     </button>
  493.                                 </div>
  494.                             {% elseif Product.disable_cart is empty %}
  495.                                 <div class="ec-productRole__btn">
  496.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  497.                                         {{ 'ただいま品切れ中です。'|trans }}
  498.                                     </button>
  499.                                 </div>
  500.                             {% endif %}
  501.                         {% endif %}
  503.                         {{ form_rest(form) }}
  504.                     </form>
  506.                     <div class="ec-modal">
  507.                         <div class="ec-modal-overlay">
  508.                             <div class="ec-modal-wrap">
  509.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  510.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  511.                                 <div class="ec-modal-box">
  512.                                     <div class="ec-role">
  513.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  514.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  515.                                     </div>
  516.                                 </div>
  517.                             </div>
  518.                         </div>
  519.                     </div>
  520.                     <div class="ec-productRole__btn">
  521.                                 <button onclick="location.href='{{ url('contact',{'contact_pname':contact_pname, 'contact_pcode':contact_pcode, 'contact_pid':contact_pid, })}}'" id="favorite" class="ec-blockBtn--cancel">
  522.                                     {{ 'お問い合わせ'|trans }}
  523.                                 </button>
  524.                             </div>
  525.                     <!--{% if BaseInfo.option_favorite_product %}
  526.                         <form action="{{ url('contact') }}" method="post">
  527.                             <div class="ec-productRole__btn">
  528.                                 {% if is_favorite == false %}
  529.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  530.                                         {{ 'お問い合わせ'|trans }}
  531.                                     </button>
  532.                                 {% else %}
  533.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  534.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  535.                                     </button>
  536.                                 {% endif %}
  537.                             </div>
  538.                         </form>
  539.                     {% endif %}-->
  541.                     {# 以下商品の属性ごとの注意書きを表記する。 #}
  542.                     <div>
  543.                         <ul>
  544.                             {% if Product.stock_find %} {# 在庫数が1以上のSKUが含まれている場合 #}
  545.                                 <li><span class="ec-color-red">在庫有り表示でも店頭展示していない場合があります。<span class="ec-font-bold">実物をご覧になりたい場合はご来店前にメールにてご連絡ください。</span></span></li>
  546.                             {% endif %}
  547.                             {% if Product.Tags|filter(tag => tag.id == 10)|length > 0 %} {# 商品タグにメーカー取寄せが含まれる場合 #}
  548.                                 <li>メーカー取寄せとなります。在庫状況はできる限り反映しておりますが、タイミングによっては欠品の場合もございます。</li>
  549.                             {% endif %}
  550.                             {% if 'f2f' in Product.delivery_product_type %} {# 商品の配送属性にf2f（対面販売）が含まれる場合 #}
  551.                                 <li>こちらの商品は原則<span class="ec-font-bold">対面販売</span>となります。ご購入の際は店頭かメールにてご相談ください。</li>
  552.                             {% endif %}
  553.                             {% if 'ebike' in Product.delivery_product_type %} {# 商品の配送属性にebikeが含まれる場合 #}
  554.                                 <li>大型商品となります。<span class="ec-font-bold">配送をご希望の場合は送料にご注意ください。</span>当店より30km圏内であれば、弊社スタッフが配送に伺いますので送料無料です。詳しくは店頭にてご相談ください。</li>
  555.                             {% endif %}
  556.                             {% if Product.Tags|filter(tag => tag.id == 8)|length > 0 %} {# 商品タグにアウトレット品が含まれる場合 #}
  557.                                 <li><span class="ec-font-bold">アウトレット品となります。</span>キズや塗装不良がある場合や、通常商品と保証内容が異なる場合があります。詳しくは店頭かメールにてご相談ください。</li>
  558.                             {% endif %}
  559.                             {% if Product.Tags|filter(tag => tag.id == 7)|length > 0 %} {# 商品タグに代理店取り寄せ特価が含まれる場合 #}
  560.                                 <li>代理店取り寄せの特価品です。当店で在庫はしていない場合は実物をご覧いただけません。</li>
  561.                             {% endif %}
  562.                         </ul>
  563.                     </div>
  564.                 </div>
  565.             </div>
  566.         </div>
  568.         {% if Product.description_detail %}
  569.             <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  570.                     </div>
  571.         {% endif %}
  573.         {% if Product.freearea %}
  574.              <div class="ec-productRole__description">
  575.                  {{ include(template_from_string(Product.freearea)) }}
  576.             </div>
  577.         {% endif %}
  578.     </div>
  579. {% endblock %}