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 javascript %}
  11.     <!-- ギャラリー用 -->
  12.     <script>
  13.         $(window).on('load',function(){
  14.             $('.description .gallery .wp-block-gallery').slick({
  15.                 slidesToShow: 1,
  16.                 centerMode: true,
  17.                 centerPadding: '25vw',
  18.                 arrows: false,
  19.                 //autoplay: true,
  20.                 autoplaySpeed: 3000,
  21.                 responsive: [{
  22.                     breakpoint: 1024,
  23.                     settings: {
  24.                         centerPadding: '15vw',
  25.                     }
  26.                 }]
  27.             });
  28.         });
  29.     </script>
  30.     <script>
  31.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  32.         // 規格2に選択肢を割り当てる。
  33.         function fnSetClassCategories(form, classcat_id2_selected) {
  34.             var $form = $(form);
  35.             var product_id = $form.find('input[name=product_id]').val();
  36.             var $sele1 = $form.find('select[name=classcategory_id1]');
  37.             var $sele2 = $form.find('select[name=classcategory_id2]');
  38.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  39.         }
  40.         {% if form.classcategory_id2 is defined %}
  41.         fnSetClassCategories(
  42.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  43.         );
  44.         {% elseif form.classcategory_id1 is defined %}
  45.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  46.         {% endif %}
  47.     </script>
  48.     <script>
  49.         $(function() {
  50.             $('.add-cart').on('click', function(event) {
  51.                 {% if form.classcategory_id1 is defined %}
  52.                 // 規格1フォームの必須チェック
  53.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  54.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  55.                     return true;
  56.                 } else {
  57.                     $('#classcategory_id1')[0].setCustomValidity('');
  58.                 }
  59.                 {% endif %}
  60.                 {% if form.classcategory_id2 is defined %}
  61.                 // 規格2フォームの必須チェック
  62.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  63.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  64.                     return true;
  65.                 } else {
  66.                     $('#classcategory_id2')[0].setCustomValidity('');
  67.                 }
  68.                 {% endif %}
  69.                 // 個数フォームのチェック
  70.                 if ($('#quantity').val() < 1) {
  71.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  72.                     return true;
  73.                 } else {
  74.                     $('#quantity')[0].setCustomValidity('');
  75.                 }
  76.                 event.preventDefault();
  77.                 $form = $('#form1');
  78.                 $.ajax({
  79.                     url: $form.attr('action'),
  80.                     type: $form.attr('method'),
  81.                     data: $form.serialize(),
  82.                     dataType: 'json',
  83.                     beforeSend: function(xhr, settings) {
  84.                         // Buttonを無効にする
  85.                         $('.add-cart').prop('disabled', true);
  86.                     }
  87.                 }).done(function(data) {
  88.                     // レスポンス内のメッセージをalertで表示
  89.                     $.each(data.messages, function() {
  90.                         $('#ec-modal-header').text(this);
  91.                     });
  92.                     $('.ec-modal').show()
  93.                     // カートブロックを更新する
  94.                     $.ajax({
  95.                         url: "{{ url('block_cart') }}",
  96.                         type: 'GET',
  97.                         dataType: 'html'
  98.                     }).done(function(html) {
  99.                         $('.ec-headerRole__cart').html(html);
  100.                     });
  101.                 }).fail(function(data) {
  102.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  103.                 }).always(function(data) {
  104.                     // Buttonを有効にする
  105.                     $('.add-cart').prop('disabled', false);
  106.                 });
  107.             });
  108.         });
  109.         $('.ec-modal-wrap').on('click', function(e) {
  110.             // モーダル内の処理は外側にバブリングさせない
  111.             e.stopPropagation();
  112.         });
  113.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  114.             $('.ec-modal').hide()
  115.         });
  116.     </script>
  117.     <script type="application/ld+json">
  118.     {
  119.         "@context": "https://schema.org/",
  120.         "@type": "Product",
  121.         "name": "{{ Product.name }}",
  122.         "image": [
  123.             {% for img in Product.ProductImage %}
  124.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  125.             {% else %}
  126.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  127.             {% endfor %}
  128.         ],
  129.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  130.         {% if Product.code_min %}
  131.         "sku": "{{ Product.code_min }}",
  132.         {% endif %}
  133.         "offers": {
  134.             "@type": "Offer",
  135.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  136.             "priceCurrency": "{{ eccube_config.currency }}",
  137.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  138.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  139.         }
  140.     }
  141.     </script>
  142. {% endblock %}
  143. {% block main %}
  144.     <article id="item-detail">
  145.         {% if Product.freearea %}
  146.         <section class="description">
  147.             {{ include(template_from_string(Product.freearea)) }}
  148.         </section><!-- /description -->
  149.         {% endif %}
  150.         <section class="buy">
  151.             <div class="ec-productRole">
  152.                 <div class="ec-grid2">
  153.                     <div class="item_visual ec-grid2__cell">
  154.                         {% for ProductImage in Product.ProductImage %}
  155.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  156.                         {% else %}
  157.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  158.                         {% endfor %}
  159.                     </div>
  160.                     <div class="ec-grid2__cell">
  161.                         <div class="ec-productRole__profile">
  162.                             {# 商品名 #}
  163.                             <div class="ec-productRole__title">
  164.                                 <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  165.                             </div>
  166.                             {# タグ #}
  167.                             <ul class="ec-productRole__tags">
  168.                                 {% for Tag in Product.Tags %}
  169.                                     <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  170.                                 {% endfor %}
  171.                             </ul>
  172.                             {# 通常価格 #}
  173.                             {% if Product.hasProductClass -%}
  174.                                 <div class="ec-productRole__priceRegular">
  175.                                     {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  176.                                         <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  177.                                         <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  178.                                     {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  179.                                         <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  180.                                         <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  181.                                     {% endif %}
  182.                                 </div>
  183.                             {% else %}
  184.                                 {% if Product.getPrice01Max is not null %}
  185.                                     <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  186.                                     <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  187.                                 {% endif %}
  188.                             {% endif %}
  189.                             {# 販売価格 #}
  190.                             <div class="ec-productRole__price">
  191.                                 {% if Product.hasProductClass -%}
  192.                                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  193.                                         <div class="ec-price">
  194.                                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  195.                                             <span class="ec-price__tax">{{ '税込'|trans }}</span>
  196.                                         </div>
  197.                                     {% else %}
  198.                                         <div class="ec-price">
  199.                                             <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  200.                                             <span class="ec-price__tax">{{ '税込'|trans }}</span>
  201.                                         </div>
  202.                                     {% endif %}
  203.                                 {% else %}
  204.                                     <div class="ec-price">
  205.                                         <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  206.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  207.                                     </div>
  208.                                 {% endif %}
  209.                             </div>
  210.                             {# 商品コード #}
  211.                             {% if Product.code_min is not empty %}
  212.                                 <div class="ec-productRole__code">
  213.                                     {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  214.                                 </div>
  215.                             {% endif %}
  216.                             {# 関連カテゴリ #}
  217.                             {% if Product.ProductCategories is not empty %}
  218.                                 <div class="ec-productRole__category">
  219.                                     <div>{{ '関連カテゴリ'|trans }}</div>
  220.                                     {% for ProductCategory in Product.ProductCategories %}
  221.                                         <ul>
  222.                                             <li>
  223.                                                 {% for Category in ProductCategory.Category.path %}
  224.                                                     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  225.                                                     <span>></span>{% endif -%}
  226.                                                 {% endfor %}
  227.                                             </li>
  228.                                         </ul>
  229.                                     {% endfor %}
  230.                                 </div>
  231.                             {% endif %}
  232.                             <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  233.                                 {% if Product.stock_find %}
  234.                                     <div class="ec-productRole__actions">
  235.                                         {% if form.classcategory_id1 is defined %}
  236.                                             <div class="ec-select">
  237.                                                 {{ form_row(form.classcategory_id1) }}
  238.                                                 {{ form_errors(form.classcategory_id1) }}
  239.                                             </div>
  240.                                             {% if form.classcategory_id2 is defined %}
  241.                                                 <div class="ec-select">
  242.                                                     {{ form_row(form.classcategory_id2) }}
  243.                                                     {{ form_errors(form.classcategory_id2) }}
  244.                                                 </div>
  245.                                             {% endif %}
  246.                                         {% endif %}
  247.                                         <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  248.                                             {{ form_widget(form.quantity) }}
  249.                                             {{ form_errors(form.quantity) }}
  250.                                         </div>
  251.                                     </div>
  252.                                     <div class="ec-productRole__btn">
  253.                                         <button type="submit" class="ec-blockBtn--action add-cart">
  254.                                             <img class="icon" src="/assets/images/icon-cart.svg">
  255.                                             {{ 'ADD TO CART'|trans }}
  256.                                         </button>
  257.                                     </div>
  258.                                 {% else %}
  259.                                     <div class="ec-productRole__btn">
  260.                                         <button type="button" class="ec-blockBtn--action" disabled="disabled">
  261.                                             {{ 'ただいま品切れ中です。'|trans }}
  262.                                         </button>
  263.                                     </div>
  264.                                 {% endif %}
  265.                                 {{ form_rest(form) }}
  266.                             </form>
  267.                             <div class="ec-modal">
  268.                                 <div class="ec-modal-overlay">
  269.                                     <div class="ec-modal-wrap">
  270.                                         <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  271.                                         <div id="ec-modal-header" class="text-center">
  272.                                             <img class="icon" src="/assets/images/icon-cart.svg">
  273.                                             {{ 'ADD TO CART'|trans }}
  274.                                         </div>
  275.                                         <div class="ec-modal-box">
  276.                                             <div class="ec-role">
  277.                                                 <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  278.                                                 <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  279.                                             </div>
  280.                                         </div>
  281.                                     </div>
  282.                                 </div>
  283.                             </div>
  284.                             {% if BaseInfo.option_favorite_product %}
  285.                                 <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  286.                                     <div class="ec-productRole__btn">
  287.                                         {% if is_favorite == false %}
  288.                                             <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  289.                                                 {{ 'ADD TO WISH LIST'|trans }}
  290.                                             </button>
  291.                                         {% else %}
  292.                                             <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  293.                                                     disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  294.                                             </button>
  295.                                         {% endif %}
  296.                                     </div>
  297.                                 </form>
  298.                             {% endif %}
  299.                             <div class="ec-productRole__description">
  300.                             </div>
  301.                         </div>
  302.                     </div>
  303.                 </div>
  304.             </div>
  305.         </section><!-- /panel -->
  306.     </article><!-- /item-detail -->
  307.     <!-- 商品詳細文章 -->
  308.     {{ Product.description_detail|raw|nl2br }}
  309. {% endblock %}