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