app/template/default/Product/detail_slug.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. {% form_theme form 'Form/form_div_layout.twig' %}
  11. {% block stylesheet %}
  12.     <style>
  13.         .slick-slider {
  14.             margin-bottom: 30px;
  15.         }
  16.         .slick-dots {
  17.             position: absolute;
  18.             bottom: -45px;
  19.             display: none!important;
  20.             width: 100%;
  21.             padding: 0;
  22.             list-style: none;
  23.             text-align: center;
  24.         }
  25.         .slick-dots li {
  26.             position: relative;
  27.             display: inline-block;
  28.             width: 20px;
  29.             height: 20px;
  30.             margin: 0 5px;
  31.             padding: 0;
  32.             cursor: pointer;
  33.         }
  34.         .slick-dots li button {
  35.             font-size: 0;
  36.             line-height: 0;
  37.             display: block;
  38.             width: 20px;
  39.             height: 20px;
  40.             padding: 5px;
  41.             cursor: pointer;
  42.             color: transparent;
  43.             border: 0;
  44.             outline: none;
  45.             background: transparent;
  46.         }
  47.         .slick-dots li button:hover,
  48.         .slick-dots li button:focus {
  49.             outline: none;
  50.         }
  51.         .slick-dots li button:hover:before,
  52.         .slick-dots li button:focus:before {
  53.             opacity: 1;
  54.         }
  55.         .slick-dots li button:before {
  56.             content: " ";
  57.             line-height: 20px;
  58.             position: absolute;
  59.             top: 0;
  60.             left: 0;
  61.             width: 12px;
  62.             height: 12px;
  63.             text-align: center;
  64.             opacity: .25;
  65.             background-color: black;
  66.             border-radius: 50%;
  67.         }
  68.         .slick-dots li.slick-active button:before {
  69.             opacity: .75;
  70.             background-color: black;
  71.         }
  72.         .slick-dots li button.thumbnail img {
  73.             width: 0;
  74.             height: 0;
  75.         }
  76.         {# タグ #}
  77.         {% for Tag in Product.Tags %}
  78.         .ec-productRole__tag.tag_{{ Tag.id }}{
  79.             {% if Tag.text_color %}color: {{ Tag.text_color }};{% endif %}
  80.             {% if Tag.background_color %}background-color: {{ Tag.background_color }};{% endif %}
  81.             {% if Tag.border_color %}border-color: {{ Tag.border_color }};{% endif %}
  82.         }
  83.         {% endfor %}
  84.         .ec-productRole .ec-productRole__btn {
  85.             width: 100%;
  86.         }
  87.     </style>
  88. {% endblock %}
  89. {% block javascript %}
  90. <script>
  91.     eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  92.         // 規格2に選択肢を割り当てる。
  93.         function fnSetClassCategories(form, classcat_id2_selected) {
  94.             var $form = $(form);
  95.             var product_id = $form.find('input[name=product_id]').val();
  96.             var $sele1 = $form.find('select[name=classcategory_id1]');
  97.             var $sele2 = $form.find('select[name=classcategory_id2]');
  98.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  99.         }
  100.         {% if form.classcategory_id2 is defined %}
  101.         fnSetClassCategories(
  102.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  103.         );
  104.         {% elseif form.classcategory_id1 is defined %}
  105.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  106.         {% endif %}
  107.     </script>
  108.     <script>
  109.         $(function() {
  110.             // bfcache無効化
  111.             $(window).bind('pageshow', function(event) {
  112.                 if (event.originalEvent.persisted) {
  113.                     location.reload(true);
  114.                 }
  115.             });
  116.             $('.item_visual').slick({
  117.                 dots: false,
  118.                 arrows: false,
  119.                 responsive: [{
  120.                     breakpoint: 768,
  121.                     settings: {
  122.                         dots: true
  123.                     }
  124.                 }]
  125.             });
  126.             $('.slideThumb').on('click', function() {
  127.                 var index = $(this).attr('data-index');
  128.                 $('.item_visual').slick('slickGoTo', index, false);
  129.             })
  130.         });
  131.     </script>
  132.     <script>
  133.         $(function() {
  134.             $('.add-cart').on('click', function(event) {
  135.                 {% if form.classcategory_id1 is defined %}
  136.                 // 規格1フォームの必須チェック
  137.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  138.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  139.                     return true;
  140.                 } else {
  141.                     $('#classcategory_id1')[0].setCustomValidity('');
  142.                 }
  143.                 {% endif %}
  144.                 {% if form.classcategory_id2 is defined %}
  145.                 // 規格2フォームの必須チェック
  146.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  147.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  148.                     return true;
  149.                 } else {
  150.                     $('#classcategory_id2')[0].setCustomValidity('');
  151.                 }
  152.                 {% endif %}
  153.                 event.preventDefault();
  154.                 $form = $('#form1');
  155.                 $.ajax({
  156.                     url: $form.attr('action'),
  157.                     type: $form.attr('method'),
  158.                     data: $form.serialize(),
  159.                     dataType: 'json',
  160.                     beforeSend: function(xhr, settings) {
  161.                         // Buttonを無効にする
  162.                         $('.add-cart').prop('disabled', true);
  163.                     }
  164.                 }).done(function(data) {
  165.                     // レスポンス内のメッセージをalertで表示
  166.                     $.each(data.messages, function() {
  167.                         $('#ec-modal-header').html(this);
  168.                     });
  169.                     $('.ec-modal').show()
  170.                     // カートブロックを更新する
  171.                     $.ajax({
  172.                         url: "{{ url('block_cart') }}",
  173.                         type: 'GET',
  174.                         dataType: 'html'
  175.                     }).done(function(html) {
  176.                         $('.ec-headerRole__cart').html(html);
  177.                     });
  178.                 }).fail(function(data) {
  179.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  180.                 }).always(function(data) {
  181.                     // Buttonを有効にする
  182.                     $('.add-cart').prop('disabled', false);
  183.                 });
  184.             });
  185.         });
  186.         $('.ec-modal-wrap').on('click', function(e) {
  187.             // モーダル内の処理は外側にバブリングさせない
  188.             e.stopPropagation();
  189.         });
  190.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  191.             $('.ec-modal').hide()
  192.         });
  193.     </script>
  194.     <script type="application/ld+json">
  195.     {
  196.         "@context": "https://schema.org/",
  197.         "@type": "Product",
  198.         "name": "{{ Product.name }}",
  199.         "image": [
  200.             {% for img in Product.ProductImage %}
  201.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  202.             {% else %}
  203.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  204.             {% endfor %}
  205.         ],
  206.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  207.         {% if Product.code_min %}
  208.         "sku": "{{ Product.code_min }}",
  209.         {% endif %}
  210.         "offers": {
  211.             "@type": "Offer",
  212.             "url": "{{ url('product_detail_slug', {'slug': Product.slug}) }}",
  213.             "priceCurrency": "{{ eccube_config.currency }}",
  214.             "price": {{ Product.getPrice02IncTaxMin }},
  215.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  216.         }
  217.     }
  218.     </script>
  219. {% endblock %}
  220. {% block main %}
  221.     <div class="ec-productRole mb60 pb60 spMb20 dottedBd">
  222.         <div class="displaySp mb10">
  223.             {# 色/サイズ #}
  224.             {% if ProductDataList['colorOrSize'] != "" %}
  225.                 {% if StandardClassificationName %}
  226.                     <p class="mb10">
  227.                         {{ StandardClassificationName }}
  228.                     </p>
  229.                 {% endif %}
  230.                 <div>
  231.                     <ul class="detailColor">
  232.                         {% for key, product in ProductList %}
  233.                             {% if product.productData.getId != Product.id  %}
  234.                                 <li class="detailColorItem mb10">
  235.                                     <a href="{{ url('product_detail', {'id': product.productData.getId}) }}">
  236.                                         {{ product.colorOrSize }}
  237.                                     </a>
  238.                                 </li>
  239.                             {% else %}
  240.                                 <li class="detailColorItem mb10">
  241.                                     <a href="#" class="active">
  242.                                         {{ product.colorOrSize }}
  243.                                     </a>
  244.                                 </li>
  245.                             {% endif %}
  246.                         {% endfor %}
  247.                     </ul>
  248.                 </div>
  249.             {% endif %}
  250.         </div>
  251.         <div class="ec-grid2">
  252.             <div class="ec-grid2__cell">
  253.                 <div class="ec-sliderItemRole">
  254.                     <div class="item_visual">
  255.                         {% for ProductImage in PriorityProduct.ProductImage %}
  256.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></div>
  257.                         {% else %}
  258.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" /></div>
  259.                         {% endfor %}
  260.                     </div>
  261.                     <div class="item_nav">
  262.                         {% for ProductImage in PriorityProduct.ProductImage %}
  263.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>
  264.                         {% endfor %}
  265.                     </div>
  266.                 </div>
  267.             </div>
  268.             <div class="ec-grid2__cell">
  269.                 <div class="ec-productRole__profile">
  270.                     {# タグ #}
  271.                     <ul class="ec-productRole__tags noBb">
  272.                         {% for Tag in Product.Tags %}
  273.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  274.                         {% endfor %}
  275.                     </ul>
  276.                     {# 商品名 #}
  277.                     <div class="ec-productRole__title">
  278.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  279.                     </div>
  280.                     {% if PriorityProduct.description_list %}
  281.                         <p>{{ PriorityProduct.description_list }}</p>
  282.                     {% endif %}
  283.                     <br>
  284.                     {# 色/サイズ #}
  285.                     {% if ProductDataList['colorOrSize'] != "" %}
  286.                         {% if StandardClassificationName %}
  287.                             <p class="mb10 displayPc">
  288.                                 {{ StandardClassificationName }}
  289.                             </p>
  290.                         {% endif %}
  291.                         <div class="displayPc">
  292.                             <ul class="detailColor">
  293.                                 {% for key, product in ProductList %}
  294.                                     {% if product.productData.getId != Product.id  %}
  295.                                         <li class="detailColorItem mb10">
  296.                                             <a href="{{ url('product_detail', {'id': product.productData.getId}) }}">
  297.                                                 {{ product.colorOrSize }}
  298.                                             </a>
  299.                                         </li>
  300.                                     {% else %}
  301.                                         <li class="detailColorItem mb10">
  302.                                             <a href="#" class="active">
  303.                                                 {{ product.colorOrSize }}
  304.                                             </a>
  305.                                         </li>
  306.                                     {% endif %}
  307.                                 {% endfor %}
  308.                             </ul>
  309.                         </div>
  310.                     {% endif %}
  311.                     <br>
  312.                     {# カスタムフィールド #}
  313.                     {% if ProductDataList['catch'] != null %}
  314.                         <div class="dottedBd" style="padding-bottom: 20px;">
  315.                             <p style="color: red">{{ ProductDataList['catch'] }}</p>
  316.                         </div>
  317.                     {% endif %}
  318.                     {# 通常価格(会員グループが【官公庁】の場合のみ表示) #}
  319.                     {% if (GroupId == 4) and Product.getPrice01IncTaxMin %}
  320.                         {% if Product.getPrice01Max is not null %}
  321.                             <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  322.                             <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  323.                         {% endif %}
  324.                     {% endif %}
  325.                     {# 会員グループが【取引先】 #}
  326.                     {% if GroupId == 3 %}
  327.                         <p>卸価格</p>
  328.                         {# 会員グループが【取引先】 #}
  329.                     {% elseif GroupId == 4 %}
  330.                         <p>官公庁職員価格</p>
  331.                     {% endif %}
  332.                     {# 販売価格 #}
  333.                     <div class="ec-productRole__price">
  334.                         {% if Product.hasProductClass -%}
  335.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  336.                                 <div class="ec-price">
  337.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  338.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  339.                                 </div>
  340.                             {% else %}
  341.                                 <div class="ec-price">
  342.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  343.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  344.                                 </div>
  345.                             {% endif %}
  346.                         {% else %}
  347.                             <div class="ec-price">
  348.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  349.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  350.                             </div>
  351.                         {% endif %}
  352.                         {# 通常価格(会員グループが【一般、官公庁職員】の場合のみ表示) #}
  353.                         {% if (GroupId == 1 or GroupId == 4) and Product.getPrice01IncTaxMin %}
  354.                             {% if Product.getPrice01Max is not null %}
  355.                                 {% set discountRate = (1.0 - (Product.getPrice02Min / Product.getPrice01Min)) * 100 %}
  356.                                 <div class="ec-color-red ec-font-size-3">(通常価格より {{discountRate|round}}% 割引)</div>
  357.                             {% endif %}
  358.                         {% endif %}
  359.                     </div>
  360.                     {# SKUコード(商品コード) #}
  361.                     {% if Product.code_min is not empty %}
  362.                         <div class="ec-productRole__code">
  363.                             {{ 'SKUコード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  364.                         </div>
  365.                     {% endif %}
  366.                     {# JAN #}
  367.                     {% if ProductDataList['jan'] != null %}
  368.                         <div class="ec-productRole__code">
  369.                             {{ 'JANコード'|trans }}: <span class="product-code-default">{{ ProductDataList['jan'] }}</span>
  370.                         </div>
  371.                     {% endif %}
  372.                     {# UPC #}
  373.                     {% if ProductDataList['upc'] != null %}
  374.                         <div class="ec-productRole__code">
  375.                             {{ 'UPCコード'|trans }}: <span class="product-code-default">{{ ProductDataList['upc'] }}</span>
  376.                         </div>
  377.                     {% endif %}
  378.                     {# 関連カテゴリ #}
  379.                     {% if Product.ProductCategories is not empty %}
  380.                         <div class="ec-productRole__category">
  381.                             <div>{{ '関連カテゴリ'|trans }}</div>
  382.                             {% for ProductCategory in Product.ProductCategories %}
  383.                                 <ul>
  384.                                     <li>
  385.                                         {% if ProductCategory.Category.path|length == 2 and ProductCategory.Category.path[1].name == '在庫限り・取り扱い終了' %}
  386.                                             {# カテゴリを表示しない #}
  387.                                         {% else %}
  388.                                             {% for Category in ProductCategory.Category.path %}
  389.                                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  390.                                                 <span>></span>{% endif -%}
  391.                                             {% endfor %}
  392.                                         {% endif %}
  393.                                     </li>
  394.                                 </ul>
  395.                             {% endfor %}
  396.                         </div>
  397.                     {% endif %}
  398.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  399.                         {% if Product.stock_find %}
  400.                             <div class="ec-productRole__actions">
  401.                                 {# 在庫数 #}
  402.                                 <div>
  403.                                     {% if Product.getProductClasses[0].getStock is not null %}
  404.                                         <p>{{ '在庫'|trans }}:{{ Product.getProductClasses[0].getStock }}</p>
  405.                                     {% else %}
  406.                                         <p>{{ '在庫'|trans }}:無制限</p>
  407.                                     {% endif %}
  408.                                 </div>
  409.                             </div>
  410.                             <div class="ec-productRole__btn">
  411.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  412.                                     {{ 'カートに入れる'|trans }}
  413.                                 </button>
  414.                             </div>
  415.                         {% else %}
  416.                             <div class="ec-productRole__btn">
  417.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  418.                                     {{ 'ただいま品切れ中です。'|trans }}
  419.                                 </button>
  420.                             </div>
  421.                         {% endif %}
  422.                         {{ form_rest(form) }}
  423.                     </form>
  424.                     <div class="ec-modal">
  425.                         <div class="ec-modal-overlay">
  426.                             <div class="ec-modal-wrap">
  427.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  428.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  429.                                 <div class="ec-modal-box">
  430.                                     <div class="ec-role">
  431.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  432.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  433.                                     </div>
  434.                                 </div>
  435.                             </div>
  436.                         </div>
  437.                     </div>
  438.                     {% if BaseInfo.option_favorite_product %}
  439.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  440.                             <div class="ec-productRole__btn">
  441.                                 {% if is_favorite == false %}
  442.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel" style="margin: 0">
  443.                                         {{ 'お気に入りに追加'|trans }}
  444.                                     </button>
  445.                                 {% else %}
  446.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  447.                                             disabled="disabled">{{ 'お気に入りに追加済です'|trans }}
  448.                                     </button>
  449.                                 {% endif %}
  450.                             </div>
  451.                         </form>
  452.                     {% endif %}
  453.                     <div>
  454.                         <p>※ 当社取扱い商品には、軍や法執行機関の実務要求に特化し、一般の民生品とは異なる用途を想定して、設計・材料変更・製造されたものが多くございます。 さらに大量供給を前提に実用品として生産されるため色の個体差やネジの硬さなどが大きく異なる場合がございます。 また予備知識や訓練が必要な商品もございます。 購入時にはご了承の上、十分ご注意頂くようお願い申し上げます。</p>
  455.                     </div>
  456.                 </div>
  457.             </div>
  458.         </div>
  459.     </div>
  460.     <div class="ec-productRole__description">
  461.         {{ PriorityProduct.description_detail|raw|nl2br }}
  462.     </div>
  463.     {% if PriorityProduct.freearea %}
  464.         <div class="ec-productRole__description">
  465.             {{ include(template_from_string(PriorityProduct.freearea|raw|nl2br)) }}
  466.         </div>
  467.     {% endif %}
  468.     </div>
  469.     </div>
  470. {% endblock %}