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_page' %}
  15. {% block javascript %}
  16.     <script>
  17.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  19.         // 規格2に選択肢を割り当てる。
  20.         function fnSetClassCategories(form, classcat_id2_selected) {
  21.             var $form = $(form);
  22.             var product_id = $form.find('input[name=product_id]').val();
  23.             var $sele1 = $form.find('select[name=classcategory_id1]');
  24.             var $sele2 = $form.find('select[name=classcategory_id2]');
  25.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  26.         }
  28.         {% if form.classcategory_id2 is defined %}
  29.         fnSetClassCategories(
  30.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  31.         );
  32.         {% elseif form.classcategory_id1 is defined %}
  33.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  34.         {% endif %}
  35.     </script>
  36.     <script>
  37.         $(function() {
  38.             $('.add-cart').on('click', function(event) {
  39.                 {% if form.classcategory_id1 is defined %}
  40.                 // 規格1フォームの必須チェック
  41.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  42.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  43.                     return true;
  44.                 } else {
  45.                     $('#classcategory_id1')[0].setCustomValidity('');
  46.                 }
  47.                 {% endif %}
  49.                 {% if form.classcategory_id2 is defined %}
  50.                 // 規格2フォームの必須チェック
  51.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  52.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  53.                     return true;
  54.                 } else {
  55.                     $('#classcategory_id2')[0].setCustomValidity('');
  56.                 }
  57.                 {% endif %}
  59.                 // 個数フォームのチェック
  60.                 if ($('#quantity').val() < 1) {
  61.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  62.                     return true;
  63.                 } else {
  64.                     $('#quantity')[0].setCustomValidity('');
  65.                 }
  67.                 event.preventDefault();
  68.                 $form = $('#form1');
  69.                 $.ajax({
  70.                     url: $form.attr('action'),
  71.                     type: $form.attr('method'),
  72.                     data: $form.serialize(),
  73.                     dataType: 'json',
  74.                     beforeSend: function(xhr, settings) {
  75.                         // Buttonを無効にする
  76.                         $('.add-cart').prop('disabled', true);
  77.                     }
  78.                 }).done(function(data) {
  79.                     // レスポンス内のメッセージをalertで表示
  80.                     $.each(data.messages, function() {
  81.                         $('#ec-modal-header').html(this);
  82.                     });
  84.                     $('.ec-modal').show()
  86.                     // カートブロックを更新する
  87.                     $.ajax({
  88.                         url: "{{ url('block_cart') }}",
  89.                         type: 'GET',
  90.                         dataType: 'html'
  91.                     }).done(function(html) {
  92.                         $('.ec-headerRole__cart').html(html);
  93.                     });
  94.                 }).fail(function(data) {
  95.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  96.                 }).always(function(data) {
  97.                     // Buttonを有効にする
  98.                     $('.add-cart').prop('disabled', false);
  99.                 });
  100.             });
  101.         });
  103.         $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
  104.             $('.ec-modal').hide()
  105.         });
  106.     </script>
  107.     {# <script type="application/ld+json">
  108.     {
  109.         "@context": "https://schema.org/",
  110.         "@type": "Product",
  112.         <!-- 「name」プロパティは必須（また、次のいずれかのプロパティも必須（「review」「aggregateRating」「offers」）） -->
  113.         "name": "商品名",
  115.         <!-- 商品の写真の URL -->
  116.         "image": [
  117.             "https://example.com/photos/1x1/photo.jpg",
  118.             "https://example.com/photos/4x3/photo.jpg"
  119.         ],
  121.         <!-- 商品についての説明文 -->
  122.         "description": "テキストテキストテキストテキストテキスト",
  124.         <!-- 商品に関する販売者固有の識別子 -->
  125.         "sku": "0446310786",
  127.         <!-- 該当するすべてのグローバル識別子を設定。（gtin | gtin8 | gtin13 | gtin14 | mpn | isbn） -->
  128.         "mpn": "925872",
  130.         <!-- 商品のブランド -->
  131.         "brand": {
  132.             "@type": "Brand",
  133.             "name": "ブランド名"
  134.         },
  136.         <!-- 商品の販売情報（必須 or 推奨） -->
  137.         "offers": {
  138.             "@type": "Offer",
  139.             "url": "https://example.com/anvil",  <!-- 商品ページへの URL -->
  140.             "priceCurrency": "JPY",
  141.             "price": "10000",  <!-- 必須。商品が無料である場合には「"0"」にする -->
  142.             "itemCondition": "https://schema.org/NewCondition",  <!-- 商品の状態のオプション。中古品と再生品で必須。 -->
  143.             "availability": "https://schema.org/InStock"  <!-- 商品の在庫状況のオプション -->
  144.         }
  145.     }
  146.     </script> #}
  147.     <script type="application/ld+json">
  148.     {
  149.         "@context": "https://schema.org/",
  150.         "@type": "Product",
  151.         "name": "{{ Product.name }}",
  152.         "image": [
  153.             {% for img in Product.ProductImage %}
  154.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  156.             {% else %}
  157.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  158.             {% endfor %}
  159.         ],
  160.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': '', '<div>': '', '</div>': '', '<p>': '', '</p>': ''}) | slice(0,300) }}",
  161.         {% if Product.code_min %}
  162.         "sku": "{{ Product.code_min }}",
  163.         {% endif %}
  164.         "offers": {
  165.             "@type": "Offer",
  166.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  167.             "priceCurrency": "{{ eccube_config.currency }}",
  168.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  169.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  170.         }
  171.     }
  172.     </script>
  173. {% endblock %}
  175. {% block main %}
  176.     <div class="ec-productRole">
  177.         {# メインビジュアル画像 #}
  178.         <!--<div class="product_imgbox">
  179.             <img src="{{ Product.image_main_visual }}" class="product_img max_img" />
  180.             <div class="product_imgbox_scrollbox">
  181.                 <span class="product_imgbox_scrollbox_text01">スクロール</span>
  182.                 <i class="fas fa-chevron-down product_imgbox_scrollbox_ico01"></i>
  183.             </div>
  184.         </div>-->
  185.         
  186.         <div class="ec-grid2">
  187.             <div class="ec-grid2__cell">
  188.                 {# アイキャッチ画像 #}
  189.                 <div class="ec-sliderItemRole">
  190.                     <div class="item_visual">
  191.                         <ul class="product_slider1">
  192.                             {% if Product.product_slider01 %}
  193.                                 <li>
  194.                                     <img src="{{ Product.product_slider01 }}" class="max_img" />
  195.                                 </li>
  196.                             {% endif %}
  197.                             {% if Product.product_slider02 %}
  198.                                 <li>
  199.                                     <img src="{{ Product.product_slider02 }}" class="max_img" />
  200.                                 </li>
  201.                             {% endif %}
  202.                             {% if Product.product_slider03 %}
  203.                                 <li>
  204.                                     <img src="{{ Product.product_slider03 }}" class="max_img" />
  205.                                 </li>
  206.                             {% endif %}
  207.                             {% if Product.product_slider04 %}
  208.                                 <li>
  209.                                     <img src="{{ Product.product_slider04 }}" class="max_img" />
  210.                                 </li>
  211.                             {% endif %}
  212.                             {% if Product.product_slider05 %}
  213.                                 <li>
  214.                                     <img src="{{ Product.product_slider05 }}" class="max_img" />
  215.                                 </li>
  216.                             {% endif %}
  217.                             {% if Product.product_slider06 %}
  218.                                 <li>
  219.                                     <img src="{{ Product.product_slider06 }}" class="max_img" />
  220.                                 </li>
  221.                             {% endif %}
  222.                             {% if Product.product_slider07 %}
  223.                                 <li>
  224.                                     <img src="{{ Product.product_slider07 }}" class="max_img" />
  225.                                 </li>
  226.                             {% endif %}
  227.                             {% if Product.product_slider08 %}
  228.                                 <li>
  229.                                     <img src="{{ Product.product_slider08 }}" class="max_img" />
  230.                                 </li>
  231.                             {% endif %}
  232.                         </ul>
  233.                         <ul class="product_slider2">
  234.                             {% if Product.product_slider01 %}
  235.                                 <li>
  236.                                     <div><img src="{{ Product.product_slider01 }}" class="max_img" /></div>
  237.                                 </li>
  238.                             {% endif %}
  239.                             {% if Product.product_slider02 %}
  240.                                 <li>
  241.                                     <div><img src="{{ Product.product_slider02 }}" class="max_img" /></div>
  242.                                 </li>
  243.                             {% endif %}
  244.                             {% if Product.product_slider03 %}
  245.                                 <li>
  246.                                     <div><img src="{{ Product.product_slider03 }}" class="max_img" /></div>
  247.                                 </li>
  248.                             {% endif %}
  249.                             {% if Product.product_slider04 %}
  250.                                 <li>
  251.                                     <div><img src="{{ Product.product_slider04 }}" class="max_img" /></div>
  252.                                 </li>
  253.                             {% endif %}
  254.                             {% if Product.product_slider05 %}
  255.                                 <li>
  256.                                     <div><img src="{{ Product.product_slider05 }}" class="max_img" /></div>
  257.                                 </li>
  258.                             {% endif %}
  259.                             {% if Product.product_slider06 %}
  260.                                 <li>
  261.                                     <div><img src="{{ Product.product_slider06 }}" class="max_img" /></div>
  262.                                 </li>
  263.                             {% endif %}
  264.                             {% if Product.product_slider07 %}
  265.                                 <li>
  266.                                     <div><img src="{{ Product.product_slider07 }}" class="max_img" /></div>
  267.                                 </li>
  268.                             {% endif %}
  269.                             {% if Product.product_slider08 %}
  270.                                 <li>
  271.                                     <div><img src="{{ Product.product_slider08 }}" class="max_img" /></div>
  272.                                 </li>
  273.                             {% endif %}
  274.                         </ul>
  275.                         <!--<img src="{{ Product.image_eye_cache }}"/>-->
  276.                     </div>
  277.                 </div>
  278.                 {# 商品説明 #}
  279.                 <div class="ec-productRole__description">
  280.                     {{ include(template_from_string(Product.description_detail)) }}
  281.                 </div>
  282.             </div>
  283.             <div class="ec-grid2__cell">
  284.                 <div class="ec-productRole__profile">
  285.                     {# お店のロゴ #}
  286.                     <div class="product_logobox">
  287.                         <img src="{{ Product.image_shop_logo }}"/>
  288.                     </div>
  289.                     {# 商品名 #}
  290.                     <div class="ec-productRole__title">
  291.                         <h3 class="ec-headingSubTitle">{{ Product.product_excerption|raw|nl2br }}</h3>
  292.                         <h1 class="ec-headingTitle">{{ Product.name }}</h1>
  293.                     </div>
  294.                     {# 商品コード #}
  295.                     <div class="ec-productRole__code">
  296.                         {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  297.                     </div>
  298.                     {# タグ（forループで複数取得） #}
  299.                     <ul class="ec-productRole__tags">
  300.                         {% for Tag in Product.Tags %}
  301.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  302.                         {% endfor %}
  303.                     </ul>
  304.                     {# 販売価格 #}
  305.                     <div class="ec-productRole__price">
  306.                         {% if Product.hasProductClass -%}
  307.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  308.                                 <div class="ec-price">
  309.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  310.                                     <span class="ec-price__tax">{% if Product.product_unitname %}／{{ Product.product_unitname }}（{% endif %}{{ '税込'|trans }}{% if Product.product_unitname %}）{% endif %}</span>
  311.                                 </div>
  312.                             {% else %}
  313.                                 <div class="ec-price">
  314.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  315.                                     <span class="ec-price__tax">{% if Product.product_unitname %}／{{ Product.product_unitname }}（{% endif %}{{ '税込'|trans }}{% if Product.product_unitname %}）{% endif %}</span>
  316.                                 </div>
  317.                             {% endif %}
  318.                         {% else %}
  319.                             <div class="ec-price">
  320.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  321.                                 <span class="ec-price__tax">{% if Product.product_unitname %}／{{ Product.product_unitname }}（{% endif %}{{ '税込'|trans }}{% if Product.product_unitname %}）{% endif %}</span>
  322.                             </div>
  323.                         {% endif %}
  324.                     </div>
  325.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  326.                         {% if Product.stock_find %}
  327.                             {# 数量 #}
  328.                             <div class="ec-productRole__actions">
  329.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  330.                                     {{ form_widget(form.quantity) }}
  331.                                     {{ form_errors(form.quantity) }}
  332.                                 <span>点</span></div>
  333.                             </div>
  334.                             {# カートに入れる #}
  335.                             <div class="ec-productRole__btn">
  336.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  337.                                     {# <img src="/html/user_data/assets/img/common/cart.png" class="max_img" alt="">{{ 'カートに入れる'|trans }} #}
  338.                                 </button>
  339.                                 <a href="https://hokkaido-yatai.com/delivery" style="font-size: 12px; color: #000;"><span class="product_cautiontext01">
  340.                                     〇 送料とお支払方法について
  341.                                 </span></a>
  342.                             </div>
  343.                         {% else %}
  344.                             <div class="ec-productRole__btn">
  345.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled" style="color: #111;">
  346.                                     {{ 'ただいま品切れ中です。'|trans }}
  347.                                 </button>
  348.                             </div>
  349.                         {% endif %}
  351.                         {{ form_rest(form) }}
  352.                     </form>
  353.                     {# 「カートに入れる」ボタン押下時に表示されるモーダル #}
  354.                     <div class="ec-modal">
  355.                         <div class="ec-modal-overlay">
  356.                             <div class="ec-modal-wrap">
  357.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  358.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  359.                                 <div class="ec-modal-box">
  360.                                     <div class="ec-role">
  361.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  362.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  363.                                     </div>
  364.                                 </div>
  365.                             </div>
  366.                         </div>
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.         </div>
  371.         {# 商品記事 #}
  372.         <div>
  373.             {{ include(template_from_string(Product.freearea)) }}
  374.         </div>
  375.         {# 商品スペック #}
  376.         <div>
  377.             {{ include(template_from_string(Product.product_spec)) }}
  378.         </div>
  379.     </div>
  380. {% endblock %}