app/template/default/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'product_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block javascript %}
  78.     <!-- CSS -->
  79.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  80.     <!-- JS -->
  81.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  82.     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
  83.     <script>
  84.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  85.         // 規格2に選択肢を割り当てる。
  86.         function fnSetClassCategories(form, classcat_id2_selected) {
  87.             var $form = $(form);
  88.             var product_id = $form.find('input[name=product_id]').val();
  89.             var $sele1 = $form.find('select[name=classcategory_id1]');
  90.             var $sele2 = $form.find('select[name=classcategory_id2]');
  91.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  92.         }
  93.         {% if form.classcategory_id2 is defined %}
  94.         fnSetClassCategories(
  95.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  96.         );
  97.         {% elseif form.classcategory_id1 is defined %}
  98.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  99.         {% endif %}
  100.     </script>
  101.     <script>
  102.         $(function() {
  103.             // bfcache無効化
  104.             $(window).bind('pageshow', function(event) {
  105.                 if (event.originalEvent.persisted) {
  106.                     location.reload(true);
  107.                 }
  108.             });
  109.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  110.             // img タグに width, height が付与されている.
  111.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  112.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  113.             $('.ec-grid2__cell').hide();
  114.             var removeSize = function () {
  115.                 $('.slide-item').height('');
  116.                 $('.slide-item img')
  117.                     .removeAttr('width')
  118.                     .removeAttr('height')
  119.                     .removeAttr('style');
  120.             };
  121.             var slickInitial = function(slick) {
  122.                 $('.ec-grid2__cell').fadeIn(1500);
  123.                 var baseHeight = $(slick.target).height();
  124.                 var baseWidth = $(slick.target).width();
  125.                 var rate = baseWidth / baseHeight;
  126.                 $('.slide-item').height(baseHeight * rate); // 余白を削除する
  127.                 // transform を使用することでCLSの影響を受けないようにする
  128.                 $('.slide-item img')
  129.                     .css(
  130.                         {
  131.                             'transform-origin': 'top left',
  132.                             'transform': 'scaleY(' + rate + ')',
  133.                             'transition': 'transform .1s'
  134.                         }
  135.                     );
  136.                 // 正しいサイズに近くなったら属性を解除する
  137.                 setTimeout(removeSize, 500);
  138.             };
  139.             $('.item_visual').on('init', slickInitial);
  140.             // リサイズ時は CLS の影響を受けないため属性を解除する
  141.             $(window).resize(removeSize);
  142.             $('.item_visual').slick({
  143.                 dots: false,
  144.                 arrows: false,
  145.                 responsive: [{
  146.                     breakpoint: 768,
  147.                     settings: {
  148.                         dots: true
  149.                     }
  150.                 }]
  151.             });
  152.             $('.slideThumb').on('click', function() {
  153.                 var index = $(this).attr('data-index');
  154.                 $('.item_visual').slick('slickGoTo', index, false);
  155.             })
  156.         });
  157.     </script>
  158.     <script>
  159.         $(function() {
  160.             $('.add-cart').on('click', function(event) {
  161.                 {% if form.classcategory_id1 is defined %}
  162.                 // 規格1フォームの必須チェック
  163.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  164.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  165.                     return true;
  166.                 } else {
  167.                     $('#classcategory_id1')[0].setCustomValidity('');
  168.                 }
  169.                 {% endif %}
  170.                 {% if form.classcategory_id2 is defined %}
  171.                 // 規格2フォームの必須チェック
  172.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  173.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  174.                     return true;
  175.                 } else {
  176.                     $('#classcategory_id2')[0].setCustomValidity('');
  177.                 }
  178.                 {% endif %}
  179.                 // 個数フォームのチェック
  180.                 if ($('#quantity').val() < 1) {
  181.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  182.                     return true;
  183.                 } else {
  184.                     $('#quantity')[0].setCustomValidity('');
  185.                 }
  186.                 event.preventDefault();
  187.                 $form = $('#form1');
  188.                 $.ajax({
  189.                     url: $form.attr('action'),
  190.                     type: $form.attr('method'),
  191.                     data: $form.serialize(),
  192.                     dataType: 'json',
  193.                     beforeSend: function(xhr, settings) {
  194.                         // Buttonを無効にする
  195.                         $('.add-cart').prop('disabled', true);
  196.                     }
  197.                 }).done(function(data) {
  198.                     // レスポンス内のメッセージをalertで表示
  199.                     $.each(data.messages, function() {
  200.                         $('#ec-modal-header').text(this);
  201.                     });
  202.                     $('.ec-modal').show()
  203.                     // カートブロックを更新する
  204.                     $.ajax({
  205.                         url: "{{ url('block_cart') }}",
  206.                         type: 'GET',
  207.                         dataType: 'html'
  208.                     }).done(function(html) {
  209.                         $('.ec-headerRole__cart').html(html);
  210.                     });
  211.                 }).fail(function(data) {
  212.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  213.                 }).always(function(data) {
  214.                     // Buttonを有効にする
  215.                     $('.add-cart').prop('disabled', false);
  216.                 });
  217.             });
  218.         });
  219.         $('.ec-modal-wrap').on('click', function(e) {
  220.             // モーダル内の処理は外側にバブリングさせない
  221.             e.stopPropagation();
  222.         });
  223.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  224.             $('.ec-modal').hide()
  225.         });
  226.     </script>
  227.     <script type="application/ld+json">
  228.     {
  229.         "@context": "https://schema.org/",
  230.         "@type": "Product",
  231.         "name": "{{ Product.name }}",
  232.         "image": [
  233.             {% for img in Product.ProductImage %}
  234.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  235.             {% else %}
  236.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  237.             {% endfor %}
  238.         ],
  239.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  240.         {% if Product.code_min %}
  241.         "sku": "{{ Product.code_min }}",
  242.         {% endif %}
  243.         "offers": {
  244.             "@type": "Offer",
  245.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  246.             "priceCurrency": "{{ eccube_config.currency }}",
  247.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  248.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  249.         }
  250.     }
  251.     </script>
  252.     <script>
  253.         $(document).ready(function() {
  254.             $('.zoom-image').magnificPopup({
  255.                 type: 'image',
  256.                 closeOnContentClick: true,
  257.                 image: {
  258.                     verticalFit: true
  259.                 }
  260.             });
  261.         });
  262.     </script>
  263. {% endblock %}
  264. {% block main %}
  265.     <div class="ec-productRole">
  266.         <div class="ec-grid2 row">
  267.             <div class="col-md-4">
  268.                 <div class="ec-sliderItemRole">
  269.                     <div class="item_visual">
  270.                         <img src="{{ asset(Product.mainFileName|no_image_product, "save_image") }}">
  271.                         {% if Product.mainFileName %}
  272.                             <a href="{{ asset(Product.mainFileName|no_image_product, "save_image") }}" class="zoom-image">画像を拡大する</a>
  273.                         {% endif %}
  274.                     </div>
  275.                     {# <div class="item_nav">
  276.                         {% for ProductImage in Product.ProductImage %}
  277.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="133" height="133" loading="lazy"></div>
  278.                         {% endfor %}
  279.                     </div> #}
  280.                 </div>
  281.             </div>
  282.             <div class="col-md-8">
  283.                 <div class="ec-productRole__profile">
  284.                     {# タグ #}
  285.                     <ul class="ec-productRole__tags">
  286.                         {% for Tag in Product.Tags %}
  287.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  288.                         {% endfor %}
  289.                     </ul>
  290.                     {# 商品コード #}
  291.                     {% if Product.code_min is not empty %}
  292.                         <div class="">
  293.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  294.                         </div>
  295.                     {% endif %}
  296.                     {# 商品名 #}
  297.                     <div class="ec-productRole__title ec-productRole__code">
  298.                         <h4 class="fw-bold">{{ Product.name }}</h4>
  299.                     </div>
  300.                     <div class="ec-productRole__description mt-3">{{ Product.description_list|raw|nl2br }}
  301.                     </div>
  302.                     {# 通常価格 #}
  303.                     {% if Product.hasProductClass -%}
  304.                         <div class="ec-productRole__priceRegular">
  305.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  306.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price_jp }}</span></span>
  307.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  308.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  309.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price_jp }}~ {{ Product.getPrice01IncTaxMax|price_jp }}</span></span>
  310.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  311.                             {% endif %}
  312.                         </div>
  313.                     {% else %}
  314.                         {% if Product.getPrice01Max is not null %}
  315.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price_jp }}</span>
  316.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  317.                         {% endif %}
  318.                     {% endif %}
  319.                     {# 販売価格 #}
  320.                     <div class="ec-productRole__price">
  321.                         {% if Product.hasProductClass -%}
  322.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  323.                                 <div class="ec-price">
  324.                                     <span class="ec-price__price price02-default">販売価格 (税込): {{ Product.getPrice02IncTaxMin|price_jp }}</span>
  325.                                     {# <span class="ec-price__tax">{{ '税込'|trans }}</span> #}
  326.                                 </div>
  327.                             {% else %}
  328.                                 <div class="ec-price">
  329.                                     <span class="ec-price__price price02-default">販売価格 (税込): {{ Product.getPrice02IncTaxMin|price_jp }} ~ {{ Product.getPrice02IncTaxMax|price_jp }}</span>
  330.                                     {# <span class="ec-price__tax">{{ '税込'|trans }}</span> #}
  331.                                 </div>
  332.                             {% endif %}
  333.                         {% else %}
  334.                             <div class="ec-price">
  335.                                 <span class="ec-price__price">販売価格 (税込): {{ Product.getPrice02IncTaxMin|price_jp }}</span>
  336.                                 {# <span class="ec-price__tax">{{ '税込'|trans }}</span> #}
  337.                             </div>
  338.                         {% endif %}
  339.                     </div>
  340.                     
  341.                     {# 関連カテゴリ #}
  342.                     {% if Product.ProductCategories is not empty %}
  343.     <div class="ec-productRole__category">
  344.         <div>{{ '関連カテゴリ'|trans }}</div>
  345.         <ul>
  346.             {% set displayed_categories = [] %}
  347.             {% for ProductCategory in Product.ProductCategories %}
  348.                 {% set category_path = [] %}
  349.                 {% for Category in ProductCategory.Category.path %}
  350.                     {% set category_path = category_path|merge([Category]) %}
  351.                 {% endfor %}
  352.                 {% if category_path|length > 1 %}
  353.                     {# Nếu có cả danh mục cha và con, chỉ hiển thị cha > con #}
  354.                     {% set category_string = category_path|map(c => c.name)|join(' > ') %}
  355.                     {% set category_id = category_path|last.id %}
  356.                 {% else %}
  357.                     {# Nếu chỉ có danh mục cha, hiển thị nó #}
  358.                     {% set category_string = category_path[0].name %}
  359.                     {% set category_id = category_path[0].id %}
  360.                 {% endif %}
  361.                 {# Kiểm tra nếu chưa hiển thị danh mục này thì mới in ra #}
  362.                 {% if category_string not in displayed_categories %}
  363.                     <li>
  364.                         <a href="{{ url('product_list') }}?category_id={{ category_id }}">
  365.                             {{ category_string }}
  366.                         </a>
  367.                     </li>
  368.                     {% set displayed_categories = displayed_categories|merge([category_string]) %}
  369.                 {% endif %}
  370.             {% endfor %}
  371.         </ul>
  372.     </div>
  373. {% endif %}
  374.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  375.                         {% if Product.stock_find %}
  376.                             <div class="row">
  377.                                 <div class="col-md-4 ec-productRole__actions">
  378.                                     {% if form.classcategory_id1 is defined %}
  379.                                         <div class="ec-select">
  380.                                             {{ form_row(form.classcategory_id1) }}
  381.                                             {{ form_errors(form.classcategory_id1) }}
  382.                                         </div>
  383.                                         {% if form.classcategory_id2 is defined %}
  384.                                             <div class="ec-select">
  385.                                                 {{ form_row(form.classcategory_id2) }}
  386.                                                 {{ form_errors(form.classcategory_id2) }}
  387.                                             </div>
  388.                                         {% endif %}
  389.                                     {% endif %}
  390.                                     <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  391.                                         {{ form_widget(form.quantity) }}
  392.                                         {{ form_errors(form.quantity) }}
  393.                                     </div>
  394.                                 </div>
  395.                                 <div class="col-md-8 ec-productRole__btn mt-3">
  396.                                     <button type="submit" class="ec-blockBtn--action add-cart">
  397.                                         {{ 'カートに入れる'|trans }}
  398.                                     </button>
  399.                                 </div>
  400.                             </div>  
  401.                         {% else %}
  402.                             <div class="ec-productRole__btn">
  403.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  404.                                     {{ 'ただいま品切れ中です。'|trans }}
  405.                                 </button>
  406.                             </div>
  407.                         {% endif %}
  408.                         {{ form_rest(form) }}
  409.                     </form>
  410.                     <div class="ec-modal">
  411.                         <div class="ec-modal-overlay">
  412.                             <div class="ec-modal-wrap">
  413.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  414.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  415.                                 <div class="ec-modal-box">
  416.                                     <div class="ec-role">
  417.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  418.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  419.                                     </div>
  420.                                 </div>
  421.                             </div>
  422.                         </div>
  423.                     </div>
  424.                     {% if BaseInfo.option_favorite_product %}
  425.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  426.                             <div class="row">
  427.                                 <div class="col-md-4"></div>
  428.                                 <div class="col-md-8 ec-productRole__btn">
  429.                                     {% if is_favorite == false %}
  430.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  431.                                             {{ 'お気に入りに追加'|trans }}
  432.                                         </button>
  433.                                     {% else %}
  434.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  435.                                                 disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  436.                                         </button>
  437.                                     {% endif %}
  438.                                 </div>
  439.                             </div>
  440.                         </form>
  441.                     {% endif %}
  442.                 </div>
  443.             </div>
  444.         </div>
  445.         <div class="mt-3">{{ Product.description_detail|raw|nl2br }}</div>
  446.         {% if Product.freearea %}
  447.              <div class="ec-productRole__description">
  448.                  {{ include(template_from_string(Product.freearea), sandboxed = true) }}
  449.             </div>
  450.         {% endif %}
  451.     </div>
  452. {% endblock %}