app/template/kaorime/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 }};
  99.         // 規格2に選択肢を割り当てる。
  100.         function fnSetClassCategories(form, classcat_id2_selected) {
  101.             var $form = $(form);
  102.             var product_id = $form.find('input[name=product_id]').val();
  103.             var $sele1 = $form.find('select[name=classcategory_id1]');
  104.             var $sele2 = $form.find('select[name=classcategory_id2]');
  105.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  106.         }
  108.         {% if form.classcategory_id2 is defined %}
  109.         fnSetClassCategories(
  110.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  111.         );
  112.         {% elseif form.classcategory_id1 is defined %}
  113.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  114.         {% endif %}
  115.     </script>
  116.     <script>
  117.         $(function() {
  118.             // bfcache無効化
  119.             $(window).bind('pageshow', function(event) {
  120.                 if (event.originalEvent.persisted) {
  121.                     location.reload(true);
  122.                 }
  123.             });
  125.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  126.             // img タグに width, height が付与されている.
  127.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  128.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  129.             $('.ec-grid2__cell').hide();
  130.             var removeSize = function () {
  131.                 $('.slide-item').height('');
  132.                 $('.slide-item img')
  133.                     .removeAttr('width')
  134.                     .removeAttr('height')
  135.                     .removeAttr('style');
  136.             };
  137.             var slickInitial = function(slick) {
  138.                 $('.ec-grid2__cell').fadeIn(1500);
  139.                 var baseHeight = $(slick.target).height();
  140.                 var baseWidth = $(slick.target).width();
  141.                 var rate = baseWidth / baseHeight;
  143.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  144.                 // transform を使用することでCLSの影響を受けないようにする
  145.                 $('.slide-item img')
  146.                     .css(
  147.                         {
  148.                             'transform-origin': 'top left',
  149.                             'transform': 'scaleY(' + rate + ')',
  150.                             'transition': 'transform .1s'
  151.                         }
  152.                     );
  153.                 // 正しいサイズに近くなったら属性を解除する
  154.                 setTimeout(removeSize, 500);
  155.             };
  156.             $('.item_visual').on('init', slickInitial);
  157.             // リサイズ時は CLS の影響を受けないため属性を解除する
  158.             $(window).resize(removeSize);
  159.             $('.item_visual').slick({
  160.                 dots: false,
  161.                 arrows: false,
  162.                 responsive: [{
  163.                     breakpoint: 768,
  164.                     settings: {
  165.                         dots: true
  166.                     }
  167.                 }]
  168.             });
  170.             $('.slideThumb').on('click', function() {
  171.                 var index = $(this).attr('data-index');
  172.                 $('.item_visual').slick('slickGoTo', index, false);
  173.             })
  174.         });
  175.     </script>
  176.     <script>
  177.         $(function() {
  178.             $('.add-cart').on('click', function(event) {
  179.                 {% if form.classcategory_id1 is defined %}
  180.                 // 規格1フォームの必須チェック
  181.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  182.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  183.                     return true;
  184.                 } else {
  185.                     $('#classcategory_id1')[0].setCustomValidity('');
  186.                 }
  187.                 {% endif %}
  189.                 {% if form.classcategory_id2 is defined %}
  190.                 // 規格2フォームの必須チェック
  191.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  192.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  193.                     return true;
  194.                 } else {
  195.                     $('#classcategory_id2')[0].setCustomValidity('');
  196.                 }
  197.                 {% endif %}
  199.                 // 個数フォームのチェック
  200.                 if ($('#quantity').val() < 1) {
  201.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  202.                     return true;
  203.                 } else {
  204.                     $('#quantity')[0].setCustomValidity('');
  205.                 }
  207.                 event.preventDefault();
  208.                 $form = $('#form1');
  209.                 $.ajax({
  210.                     url: $form.attr('action'),
  211.                     type: $form.attr('method'),
  212.                     data: $form.serialize(),
  213.                     dataType: 'json',
  214.                     beforeSend: function(xhr, settings) {
  215.                         // Buttonを無効にする
  216.                         $('.add-cart').prop('disabled', true);
  217.                     }
  218.                 }).done(function(data) {
  219.                     // レスポンス内のメッセージをalertで表示
  220.                     $.each(data.messages, function() {
  221.                         $('#ec-modal-header').text(this);
  222.                     });
  224.                     $('.ec-modal').show()
  226.                     // カートブロックを更新する
  227.                     $.ajax({
  228.                         url: "{{ url('block_cart') }}",
  229.                         type: 'GET',
  230.                         dataType: 'html'
  231.                     }).done(function(html) {
  232.                         $('.ec-headerRole__cart').html(html);
  233.                     });
  234.                 }).fail(function(data) {
  235.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  236.                 }).always(function(data) {
  237.                     // Buttonを有効にする
  238.                     $('.add-cart').prop('disabled', false);
  239.                 });
  240.             });
  241.         });
  243.         $('.ec-modal-wrap').on('click', function(e) {
  244.             // モーダル内の処理は外側にバブリングさせない
  245.             e.stopPropagation();
  246.         });
  247.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  248.             $('.ec-modal').hide()
  249.         });
  250.     </script>
  251.     <script type="application/ld+json">
  252.     {
  253.         "@context": "https://schema.org/",
  254.         "@type": "Product",
  255.         "name": "{{ Product.name }}",
  256.         "image": [
  257.             {% for img in Product.ProductImage %}
  258.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  260.             {% else %}
  261.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  262.             {% endfor %}
  263.         ],
  264.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  265.         {% if Product.code_min %}
  266.         "sku": "{{ Product.code_min }}",
  267.         {% endif %}
  268.         "offers": {
  269.             "@type": "Offer",
  270.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  271.             "priceCurrency": "{{ eccube_config.currency }}",
  272.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  273.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  274.         }
  275.     }
  276.     </script>
  277. {% endblock %}
  279. {% block main %}
  281.     <!-- PAGE CONTENTS -->
  282.     <div class="products productsWakamefurikake productsSingle">
  283.         <section class="sub-container">
  284.         
  285.             {# 広告流入かそれ以外かの条件分岐 #}
  286.             {% if Product.id is same as(59) %}
  288.             <div class="ad">
  289.             <section class="ad-kvArea">
  290.               <div class="ad-kvArea__inner">
  291.                 <h1 class="dn">しそ入ひじきふりかけ</h1>
  292.                 <img src="{{ asset('assets/img/product-ad/kv.png')}}" class="imgFit dn-sp__ad kv__ad">
  293.                 <img src="{{ asset('assets/img/product-ad/kv-sp.png')}}" class="imgAd dn-pcTab__ad">
  294.               </div>
  295.             </section>
  296.             <section class="ad-timeArea">
  297.               <div class="ad-timeArea__inner">
  298.                 <h2><span class="hl-red">うま味と甘味</span>の絶妙なバランスが<br><span class="hl-big">様々な場面で<br class="dn-pc__ad"><span class="hl-red">大活躍！</span></h2>
  299.                 <div class="ad-timeArea__contents">
  300.                   <section class="ad-timeArea__contents-time">
  301.                     <div class="ad-timeArea__contents-time__left">
  302.                       <h3>時短×簡単</h3>
  303.                       <p>
  304.                         おにぎりが簡単に絶品に！<br>
  305.                         忙しい朝やお弁当作りにも時短で便利。<br>
  306.                         <br>
  307.                         パパッとひとふりで、お茶漬けが本格的な味に。<br>
  308.                         しその風味豊かなひじきふりかけで
  309.                         <span class="timeTxt">時短料理<span class="black">を</span>実現！</span>
  310.                       </p>
  311.                     </div>
  312.                     <div class="ad-timeArea__contents-time__right">
  313.                       <img src="{{ asset('assets/img/product-ad/furikake_img.png')}}" class="dn-mobile">
  314.                       <img src="{{ asset('assets/img/product-ad/furikake_img-sp.png')}}" class="dn-pc__ad">
  315.                     </div>
  316.                   </section>
  317.                   <section class="ad-timeArea__contents-arrangement">
  318.                     <div class="ad-timeArea__contents-arrangement__heading">
  319.                       <h3>アレンジは多種多様<span>いつもの料理が手軽に<br class="dn-pc__ad">美味しく健康的に！</span></h3>
  320.                     </div>
  321.                     <div class="ad-timeArea__contents-arrangement__items">
  322.                       <div class="ad-timeArea__contents-arrangement__item">
  323.                           <img src="{{ asset('assets/img/product-ad/cooki_img01.png')}}" class="imgFit">
  324.                           <p>チャーハンに！</p>
  325.                         </div>
  326.                         <div class="ad-timeArea__contents-arrangement__item">
  327.                           <img src="{{ asset('assets/img/product-ad/cooki_img02.png')}}" class="imgFit">
  328.                           <p>浅漬けに！</p>
  329.                         </div>
  330.                         <div class="ad-timeArea__contents-arrangement__item">
  331.                           <img src="{{ asset('assets/img/product-ad/cooki_img03.png')}}" class="imgFit">
  332.                           <p>トーストにも！</p>
  333.                         </div>
  334.                     </div>
  335.                   </section>
  336.                 </div>
  337.               </div>
  338.             </section>
  339.             <section class="ad-healthyArea">
  340.               <div class="ad-healthyArea__inner">
  341.                 <h2><span>食物繊維</span>と<br class="dn-pcTab__ad"><span>ミネラル</span>たっぷり！</h2>
  342.                 <div class="ad-healthyArea__inner__inner">
  343.                   <div class="ad-healthyArea__txt">
  344.                     <p class="top-txt">
  345.                       海藻類の中でも特に<br>
  346.                       <span>栄養価の高い</span>ひじき。
  347.                     </p>
  348.                     <p class="bottom-txt">
  349.                       カルシウム、食物繊維、マグネシウムが<br>
  350.                       豊富に含まれます。<br>
  351.                       その他にも、ビタミンBや鉄分なども含ま<br>
  352.                       れ、しかも低カロリー。
  353.                     </p>
  354.                   </div>
  355.                   <div  class="ad-healthyArea__img dn-pc__ad">
  356.                     <img src="{{ asset('assets/img/product-ad/healthy-sp.png')}}" class="imgFit">
  357.                   </div>
  358.                 </div>
  359.               </div>
  360.             </section>
  361.             <section class="ad-voiceArea">
  362.               <div class="ad-voiceArea__inner">
  363.                 <div class="ad-voiceArea__content">
  364.                   <div class="ad-voiceArea__heading">
  365.                     <h2><span>いつも沢山のお声<br class="dn-pc__ad">ありがとうございます！</span><br class="dn-mobile">ご利用いただいた<br class="dn-pc">お客様からのお声</h2>
  366.                   </div>
  367.                   <div class="ad-voiceArea__items">
  368.                     <div class="ad-voiceArea__item">
  369.                       <div class="ad-voiceArea__item-left">VOICE<br>01</div>
  370.                       <div class="ad-voiceArea__item-right">
  371.                         <p><span>とても美味しい</span>ひじきふりかけです。<br>
  372.                         しっとりしていて食べやすく、<span>ホカホカご飯にもお弁当にも最適</span>です。</p>
  373.                       </div>
  374.                     </div>
  375.                     <div class="ad-voiceArea__item">
  376.                       <div class="ad-voiceArea__item-left">VOICE<br>02</div>
  377.                       <div class="ad-voiceArea__item-right">
  378.                         <p>しっとりとしたヒジキがほんのりしそ風味で<span>すごく好きな味です。</span><br>
  379.                           <span>もう一袋買えば良かった、</span>と後悔してます。</p>
  380.                       </div>
  381.                     </div>
  382.                     <div class="ad-voiceArea__item">
  383.                       <div class="ad-voiceArea__item-left">VOICE<br>03</div>
  384.                       <div class="ad-voiceArea__item-right">
  385.                         <p>毎朝食べてます。美味しいし、<span>手軽にひじきが食べれてとても満足</span>です。<br>
  386.                           いつも塩分無視してたっぷりかけてるので、<span>無くなったらリピ</span>します。</p>
  387.                       </div>
  388.                     </div>
  389.                     <div class="ad-voiceArea__item">
  390.                       <div class="ad-voiceArea__item-left">VOICE<br>04</div>
  391.                       <div class="ad-voiceArea__item-right">
  392.                         <p>おにぎりに使うのがお気に入りで<span>幼稚園児のお弁当や食事に栄養をプラス</span><br class="dn-mobile">
  393.                           するのに活用させてもらってます！</p>
  394.                       </div>
  395.                     </div>
  396.                   </div>
  397.                 </div>
  398.               </div>
  399.             </section>
  400.             <section class="ad-aboutArea">
  401.               <div class="ad-aboutArea__inner">
  402.                 <h2>30年以上の<br class="dn-pcTab__ad"><span>「おいしさの追求」</span>で<br>多くのファンに<br class="dn-pcTab__ad">ご支持いただく</h2>
  403.                 <div class="ad-aboutArea__content">
  404.                   <div class="ad-aboutArea__content-kv">
  405.                     <img src="{{ asset('assets/img/product-ad/history1.png')}}" class="imgFit">
  406.                   </div>
  407.                   <div class="ad-aboutArea__content-items">
  408.                     <div class="ad-aboutArea__content-items__left">
  409.                       <h3>大正10年（1921年）創業<br>100年の歴史と革新</h3>
  410.                       <p>
  411.                         1921年に山陰特産品の板わかめ問屋として創業。<br>
  412.                         <br>
  413.                         「ひじきふりかけ」の先駆者<br>
  414.                         30年以上の「おいしさの追求」で、<br>
  415.                         多くのファンに支持されてきました。<br>
  416.                         <br>
  417.                         忙しくても、自分や大切な人の健康を支えたい<br class="dn-mobile">
  418.                         あなたへ。<br>
  419.                         栄養豊富な海の幸を、食卓と健康を大切にする<br class="dn-mobile">
  420.                         すべての方のためにお届けします。<br>
  421.                       </p>
  422.                     </div>
  423.                     <div class="ad-aboutArea__content-items__right">
  424.                       <div class="ad-aboutArea__content-items__right-top">
  425.                         <img src="{{ asset('assets/img/product-ad/history2.png')}}" class="imgFit">
  426.                       </div>
  427.                       <div class="ad-aboutArea__content-items__right-bottom">
  428.                         <img src="{{ asset('assets/img/product-ad/history3.png')}}" class="imgFit">
  429.                       </div>
  430.                     </div>
  431.                   </div>
  432.                 </div>
  433.               </div>
  434.             </section>
  435.             <div class="ad-cart">
  436.               <a href="#cart__area">
  437.                 <div>
  438.                   <div>
  439.                     <img src="{{ asset('assets/img/product-ad/icon-cart.png')}}" class="imgFit dn-sp__ad">
  440.                     <img src="{{ asset('assets/img/product-ad/icon-cart-sp.png')}}" class="imgFit dn-pcTab__ad">
  441.                   </div>
  442.                   <p>
  443.                     商品をカートに<br class="dn-sp__ad">追加する
  444.                   </p>
  445.                 </div>
  446.               </a>
  447.             </div>
  448.           </div>
  450.             {% else %}
  451.             <!-- H1 商品カテゴリーの見出し -->
  452.             <div class="sub-h1--products">
  453.                 <h1 class="itemTitle">
  454.                     {{ Product.name }}
  455.                 </h1>
  456.                 <div class="itemImg">
  457.                     <div class="itemImgInner">
  458.                         <img src="{{ asset('assets/img/products/wf_h1_01.jpg') }}" alt="" class="imgObjectFitCover">
  459.                     </div>
  460.                 </div>
  461.             </div>
  462.             <!-- /H1 -->
  463.             {% endif %}
  464.             <!-- CONTENTS -->
  465.             <div class="l-container l-2ColumnContainer">
  466.                 <!-- MAIN-CONTENTS -->
  467.                 <div class="l-main">
  468.                     <!-- BREAD CRUMBS -->
  469.                     <div class="sub-breadcrumbsWrap">
  470.                         <ul class="sub-breadcrumbs">
  471.                             <li><a href="/">TOP</a></li>
  472.                             <li><a href="/products/list">商品一覧</a></li>
  473.                             <li>{{ Product.name }}</li>
  474.                         </ul>
  475.                     </div>
  476.                     <!-- /BREAD CRUMBS -->
  477.                     <!-- MAIN CONTENTS -->
  478.                     <section class="products-sgContent">
  479.                         <!-- PRODUCTS PHOTO -->
  480.                         <div class="products-sgContent__pPhoto">
  481.                             <div class="productsPhotoSlide">
  482.                                 <ul id="categorySingleSlider" class="main clearfix">
  483.                                     {% for ProductImage in Product.ProductImage %}
  484.                                         <li><span class="imgWrap">
  485.                                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" alt=""
  486.                                                                        class="imgObjectFitCover" {% if loop.index > 1 %} loading="lazy"{% endif %}>
  487.                                             </span>
  488.                                         </li>
  489.                                     {% else %}
  490.                                         <li>
  491.                                             <span class="imgWrap">
  492.                                                 <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"
  493.                                                                        class="imgObjectFitCover">
  494.                                             </span>
  495.                                         </li>
  496.                                     {% endfor %}
  497.                                 </ul>
  498.                                 <ul id="categorySingleSliderNav" class="sub clearfix">
  499.                                     {% for ProductImage in Product.ProductImage %}
  500.                                         <li data-index="{{ loop.index0 }}">
  501.                                             <span class="imgWrap">
  502.                                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt=""
  503.                                                      class="imgObjectFitCover" loading="lazy">
  504.                                             </span>
  505.                                         </li>
  506.                                     {% endfor %}
  507.                                 </ul>
  508.                             </div>
  509.                         </div>
  510.                         <!-- /PRODUCTS PHOTO -->
  512.                         <!-- PRODUCTS DATA -->
  513.                         <div class="products-sgContent__pData" id="cart__area">
  514.                             <div class="titleWrap">
  515.                                 <h2 class="itemPName">{{ Product.name }}</h2>
  516.                                 {% if Product.hasProductClass -%}
  517.                                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  518.                                         <p class="itemPrice">
  519.                                             {{ Product.getPrice02IncTaxMin|price }}
  520.                                             <span class="tax">{{ '(税込）'|trans }}</span>
  521.                                         </p>
  522.                                     {% else %}
  523.                                         <p class="itemPrice">
  524.                                             {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  525.                                             <span class="tax">{{ '(税込）'|trans }}</span>
  526.                                         </p>
  527.                                     {% endif %}
  528.                                 {% else %}
  529.                                         <p class="itemPrice">
  530.                                             {{ Product.getPrice02IncTaxMin|price }}
  531.                                             <span class="tax">{{ '(税込）'|trans }}</span>
  532.                                         </p>
  533.                                 {% endif %}
  534.                             </div>
  536.                             <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  537.                                 {% if Product.stock_find %}
  538.                                     <div class="ec-productRole__actions">
  539.                                         {% if form.classcategory_id1 is defined %}
  540.                                             <div class="ec-select">
  541.                                                 {{ form_row(form.classcategory_id1) }}
  542.                                                 {{ form_errors(form.classcategory_id1) }}
  543.                                             </div>
  544.                                             {% if form.classcategory_id2 is defined %}
  545.                                                 <div class="ec-select">
  546.                                                     {{ form_row(form.classcategory_id2) }}
  547.                                                     {{ form_errors(form.classcategory_id2) }}
  548.                                                 </div>
  549.                                             {% endif %}
  550.                                         {% endif %}
  551.                                         <div class="quantityWrap">
  552.                                             <span>数量</span>
  553.                                             <div class="quantityWrapInner">
  554.                                                 <div class="item-select">
  555.                                                     {{ form_widget(form.quantity) }}
  556.                                                     {{ form_errors(form.quantity) }}
  557.                                                 </div>
  558.                                                 <div class="product-single-quantityBtnBlock">
  559.                                                     <div class="quantityBtn quantityBtn__plus"><span class="btnInner">+</span></div>
  560.                                                     <div class="quantityBtn quantityBtn__minus"><span class="btnInner">-</span></div>
  561.                                                 </div>
  562.                                             </div>
  563.                                         </div>
  564.                                     </div>
  565.                                     <div class="cartBtnWrap">
  566.                                         <button type="submit" class="ec-blockBtn--action add-cart mod-btn-02 cartBtn">
  567.                                             {{ 'カートに入れる'|trans }}
  568.                                         </button>
  569.                                     </div>
  570.                                 {% else %}
  571.                                     <div class="ec-productRole__btn">
  572.                                         <button type="button" class="ec-blockBtn--action" disabled="disabled">
  573.                                             {{ 'ただいま品切れ中です。'|trans }}
  574.                                         </button>
  575.                                     </div>
  576.                                 {% endif %}
  577.                                 <div class="ec-modal">
  578.                                     <div class="ec-modal-overlay">
  579.                                         <div class="ec-modal-wrap">
  580.                                             <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  581.                                             <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  582.                                             <div class="ec-modal-box">
  583.                                                 <div class="ec-role">
  584.                                                     <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  585.                                                     <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  586.                                                 </div>
  587.                                             </div>
  588.                                         </div>
  589.                                     </div>
  590.                                 </div>
  592.                                 {{ form_rest(form) }}
  594.                             </form>
  596.                             {% if BaseInfo.option_favorite_product %}
  597.                                 <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  598.                                     <div class="favoriteBtnWrap">
  599.                                     {% if is_favorite == false %}
  600.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel mod-btn-02 favoriteBtn">お気に入りに追加</button>
  601.                                     {% else %}
  602.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel mod-btn-02 favoriteBtn"
  603.                                                 disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  604.                                         </button>
  605.                                     {% endif %}
  606.                                     </div>
  607.                                 </form>
  608.                             {% endif %}
  610.                             <div class="itemInfoWrap">
  611.                                 <p>
  612.                                     {{ Product.description_detail|raw|nl2br }}
  613.                                 </p>
  614.                             </div>
  615.                             {% if Product.freearea %}
  616.                                 <div class="ec-productRole__description">
  617.                                     {{ include(template_from_string(Product.freearea), sandboxed = true) }}
  618.                                 </div>
  619.                             {% endif %}
  620.                         </div>
  621.                         <!-- /PRODUCTS DATA -->
  622.                     </section>
  623.                     <!-- /MAIN CONTENTS -->
  625.                     <div class="marginTop30">
  626.                     {% if plugin_snippets is defined %}
  627.                         {{ include('snippet.twig', { snippets: plugin_snippets }) }}
  628.                     {% endif %}
  629.                     </div>
  631.                     {% if Layout.MainBottom %}
  632.                         {{ include('block.twig', {'Blocks': Layout.MainBottom}) }}
  633.                     {% endif %}
  635.                     {% if Layout.ContentsBottom %}
  636.                         <div class="ec-layoutRole__contentBottom">
  637.                             {{ include('block.twig', {'Blocks': Layout.ContentsBottom}) }}
  638.                         </div>
  639.                     {% endif %}
  640.                 </div>
  641.                 <!-- /MAIN-CONTENTS -->
  643.                 <!-- SIDE-CONTENTS -->
  644.                 {{ include('Block/side_menu.twig') }}
  645.                 <!-- /SIDE-CONTENTS -->
  647.             </div>
  648.             <!-- /CONTENTS -->
  649.         </section>
  650.     </div>
  651.     <!-- /PAGE CONTENTS -->
  654. {% endblock %}