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-single-page' %}
  15. {% block javascript %}
  16.     <script>
  17.         $(function() {
  18.             // bfcache無効化
  19.             $(window).bind('pageshow', function(event) {
  20.                 if (event.originalEvent.persisted) {
  21.                     location.reload(true);
  22.                 }
  23.             });
  25.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  26.             // img タグに width, height が付与されている.
  27.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  28.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  29.             $('.ec-grid2__cell').hide();
  30.             var removeSize = function () {
  31.                 $('.slide-item').height('');
  32.                 $('.slide-item img')
  33.                     .removeAttr('width')
  34.                     .removeAttr('height')
  35.                     .removeAttr('style');
  36.             };
  37.             var slickInitial = function(slick) {
  38.                 $('.ec-grid2__cell').fadeIn(1500);
  39.                 var baseHeight = $(slick.target).height();
  40.                 var baseWidth = $(slick.target).width();
  41.                 var rate = baseWidth / baseHeight;
  43.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  44.                 // transform を使用することでCLSの影響を受けないようにする
  45.                 $('.slide-item img')
  46.                     .css(
  47.                         {
  48.                             'transform-origin': 'top left',
  49.                             'transform': 'scaleY(' + rate + ')',
  50.                             'transition': 'transform .1s'
  51.                         }
  52.                     );
  53.                 // 正しいサイズに近くなったら属性を解除する
  54.                 setTimeout(removeSize, 500);
  55.             };
  56.             $('.item_visual').on('init', slickInitial);
  57.             // リサイズ時は CLS の影響を受けないため属性を解除する
  58.             $(window).resize(removeSize);
  59.             $('.item_visual').slick({
  60.                 dots: false,
  61.                 arrows: false,
  62.                 responsive: [{
  63.                     breakpoint: 768,
  64.                     settings: {
  65.                         dots: true
  66.                     }
  67.                 }]
  68.             });
  70.             $('.slideThumb').on('click', function() {
  71.                 var index = $(this).attr('data-index');
  72.                 $('.item_visual').slick('slickGoTo', index, false);
  73.             })
  74.         });
  75.     </script>
  76.     <script>
  77.         $(function() {
  78.             $('.add-cart').on('click', function(event) {
  79.                 {% if form.classcategory_id1 is defined %}
  80.                 // 規格1フォームの必須チェック
  81.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  82.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  83.                     return true;
  84.                 } else {
  85.                     $('#classcategory_id1')[0].setCustomValidity('');
  86.                 }
  87.                 {% endif %}
  89.                 {% if form.classcategory_id2 is defined %}
  90.                 // 規格2フォームの必須チェック
  91.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  92.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  93.                     return true;
  94.                 } else {
  95.                     $('#classcategory_id2')[0].setCustomValidity('');
  96.                 }
  97.                 {% endif %}
  99.                 // 個数フォームのチェック
  100.                 if ($('#quantity').val() < 1) {
  101.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  102.                     return true;
  103.                 } else {
  104.                     $('#quantity')[0].setCustomValidity('');
  105.                 }
  107.                 event.preventDefault();
  108.                 $form = $('#form1');
  109.                 $.ajax({
  110.                     url: $form.attr('action'),
  111.                     type: $form.attr('method'),
  112.                     data: $form.serialize(),
  113.                     dataType: 'json',
  114.                     beforeSend: function(xhr, settings) {
  115.                         // Buttonを無効にする
  116.                         $('.add-cart').prop('disabled', true);
  117.                     }
  118.                 }).done(function(data) {
  119.                     // レスポンス内のメッセージをalertで表示
  120.                     $.each(data.messages, function() {
  121.                         $('#ec-modal-header').text(this);
  122.                     });
  124.                     $('.ec-modal').show()
  126.                     // カートブロックを更新する
  127.                     $.ajax({
  128.                         url: "{{ url('block_cart') }}",
  129.                         type: 'GET',
  130.                         dataType: 'html'
  131.                     }).done(function(html) {
  132.                         $('.ec-headerRole__cart').html(html);
  133.                     });
  134.                 }).fail(function(data) {
  135.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  136.                 }).always(function(data) {
  137.                     // Buttonを有効にする
  138.                     $('.add-cart').prop('disabled', false);
  139.                 });
  140.             });
  141.         });
  143.         $('.ec-modal-wrap').on('click', function(e) {
  144.             // モーダル内の処理は外側にバブリングさせない
  145.             e.stopPropagation();
  146.         });
  147.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  148.             $('.ec-modal').hide()
  149.         });
  151.         // form_restで出力されるquantityを削除
  152.         $(() => {
  153.           $('#quantity').remove();
  154.         })
  155.     </script>
  157.     <script type="application/ld+json">
  158.     {
  159.         "@context": "https://schema.org/",
  160.         "@type": "Product",
  161.         "name": "{{ Product.name }}",
  162.         "image": [
  163.             {% for img in Product.ProductImage %}
  164.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  166.             {% else %}
  167.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  168.             {% endfor %}
  169.         ],
  170.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  171.         {% if Product.code_min %}
  172.         "sku": "{{ Product.code_min }}",
  173.         {% endif %}
  174.         "offers": {
  175.             "@type": "Offer",
  176.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  177.             "priceCurrency": "{{ eccube_config.currency }}",
  178.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  179.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  180.         }
  181.     }
  182.     </script>
  183. {% endblock %}
  185. {% block main %}
  186. <div class="product-single">
  187.   <h1 class="product-single__head inview">PRODUCT</h1>
  188.   <div class="product-single__main-row inview">
  189.     <div class="product-single__main-thumb img-slider">
  190.       <div class="arrow arrow-left"></div>
  191.       <div class="arrow arrow-right"></div>
  192.       <ul class="index__list">
  193.         {% for ProductImage in Product.ProductImage %}
  194.         <li class="index__item"></li>
  195.         {% endfor %}
  196.       </ul>
  198.       <div class="img-wrap">
  199.         {% for ProductImage in Product.ProductImage %}
  200.           <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}>
  201.         {% else %}
  202.           <img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550">
  203.         {% endfor %}
  204.       </div>
  205.     </div>
  206.     <div class="product-single__main-col">
  207.       <h2 class="product-single__main-title">{{ Product.name }}</h2>
  208.       <p class="product-single__main-price">
  209.         {% if Product.subscription_discount_rate is defined and Product.subscription_discount_rate > 0 %}
  210.           {% set discount_rate = Product.subscription_discount_rate %}
  211.           {% set original_price = Product.getPrice02IncTaxMin %}
  212.           {% set discounted_price = (original_price * (100 - discount_rate) / 100)|round(0, 'floor') %}
  213.           <span style="color: red; font-weight: bold; margin-right: 10px;">-{{ discount_rate }}%</span>
  214.           <span style="color: var(--color-black);">{{ discounted_price|price }}（税込）</span>
  215.           <br>
  216.           <span style="font-size: 0.9em; color: #999;">参考価格:
  217.           <span style="text-decoration: line-through; color: #999;">{{ original_price|price }}</span>
  218.           <br>
  219.           <span>※送料{{ fee|price }}円～</span>
  220.           </span>
  221.         {% else %}
  222.           {{ Product.getPrice02IncTaxMin|price }}（税込）<span>
  223.             <br>
  224.             ※送料{{ fee|price }}円～(沖縄離島除く国内)</span>
  225.         {% endif %}
  226.       </p>
  227.       {% if Product.subscription %}
  228.       <p class="product-single__main-terms">
  229.       <a href="/subscription_terms">定期購入ご利用規約</a>
  230.       </p>
  231.       {% endif %}
  232.       <div class="product-single__count">
  233.         <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1" class="product-single___count-form">
  234.           {% if Product.stock_find %}
  235.           <div class="product-single__count-wrap">
  236.             <label class="product-single__count-label">数量</label>
  237.             <div class="product-single__count-select">
  238.               <select id="customQuantity" name="quantity" required="required">
  239.                 {% for i in 1..(Product.getProductClasses()|length == 1 ? Product.getProductClasses()[0].saleLimit : 7) %}
  240.                   <option value="{{ i }}">{{ i }}</option>
  241.                 {% endfor %}
  242.               </select>
  243.               {{ form_errors(form.quantity) }}
  244.             </div>
  245.           </div>
  246.           <button class="product-single__count-btn btn -cart">
  247.           予約購入
  248.           </button>
  249.           <p style="color: red; padding: 5px 0; font-size: 12px;text-align: center;">※ こちらの商品は2月上旬にお届け予定です。</p>
  250.           {% else %}
  251.           <button class="product-single__count-btn btn" disabled="disabled">
  252.             在庫切れ
  253.           </button>
  254.           {% endif %}
  255.           <div style="display:none">
  256.             {{ form_rest(form) }}
  257.           </div>
  258.         </form>
  259.       </div>
  260.     </div>
  261.   </div>
  262.   <div class="product-single__content inview">
  263.     <div class="container product-single__container">
  264.       <section class="product-single__section">
  265.         <h3 class="product-single__section-title">製品概要</h3>
  266.         <div class="product-single__section-text">
  267.           <p>
  268.           {{ Product.description_list | default(Product.description_detail) }}
  269.           </p>
  270.         </div>
  271.       </section>
  272.       <section class="product-single__section">
  273.         <h3 class="product-single__section-title">原材料</h3>
  274.         <div class="product-single__section-text">
  275.           <p>米ぬか加工食品乳酸菌酵母含有米ぬか発酵物、デキストリン、ビタミンB12、ミルクシスル、HMPC（カプセル）</p>
  276.         </div>
  277.       </section>
  278.       <section class="product-single__section">
  279.         <h3 class="product-single__section-title">成分</h3>
  280.         <div class="product-single__section-text">
  281.           <p>1食分:2カプセル<br />
  282.           <table>
  283.             <tr>
  284.               <th></th>
  285.               <th>1食分の量</th>
  286.             </tr>
  287.             <tbody>
  288.               <tr>
  289.                 <td>エネルギー</td>
  290.                 <td>2.8kcal</td>
  291.               </tr>
  292.               <tr>
  293.                 <td>たんぱく質</td>
  294.                 <td>0.1g</td>
  295.               </tr>
  296.               <tr>
  297.                 <td>脂質</td>
  298.                 <td>0.02g</td>
  299.               </tr>
  300.               <tr>
  301.                 <td>炭水化物</td>
  302.                 <td>0.5g</td>
  303.               </tr>
  304.             </tbody>
  305.           </table>
  306.           <p>
  307.             <span>警告：18歳未満のお子様、妊娠中または授乳中の女性には適していません。<br />薬を服用されている方、持病のある方は、かかりつけ医や専門医にご相談されることをお勧めしま
  308.               す。</span
  309.             >
  310.           </p>
  311.         </div>
  312.       </section>
  313.       <section class="product-single__section">
  314.         <h3 class="product-single__section-title">配送について</h3>
  315.         <div class="product-single__section-text">
  316.           <p>
  317.           ご注文から6日以内にお届け致します。(土日祝日を除く)<br />
  318.           ただし2026年1月中においては商品切替時期のため、2月上旬以降に順次発送いたします。
  319.           </p>
  320.         </div>
  321.       </section>
  322.     </div>
  323.   </div>
  324. </div>
  325. {% endblock %}