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.     <script>
  12.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  13.         // 規格2に選択肢を割り当てる。
  14.         function fnSetClassCategories(form, classcat_id2_selected) {
  15.             var $form = $(form);
  16.             var product_id = $form.find('input[name=product_id]').val();
  17.             var $sele1 = $form.find('select[name=classcategory_id1]');
  18.             var $sele2 = $form.find('select[name=classcategory_id2]');
  19.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  20.         }
  21.         {% if form.classcategory_id2 is defined %}
  22.         fnSetClassCategories(
  23.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  24.         );
  25.         {% elseif form.classcategory_id1 is defined %}
  26.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  27.         {% endif %}
  28.     </script>
  29.     <script>
  30.         $(function () {
  31.             $('.slider-detail').slick({
  32.                 autoplay: true,
  33.                 centerMode: false,
  34.                 dots: false,
  35.                 arrows: false,
  36.                 slidesToShow: 1,
  37.             });
  38.         });
  39.     </script>
  40.     <script>
  41.         $(function() {
  42.             $('.add-cart').on('click', function(event) {
  43.                 {% if form.classcategory_id1 is defined %}
  44.                 // 規格1フォームの必須チェック
  45.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  46.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  47.                     return true;
  48.                 } else {
  49.                     $('#classcategory_id1')[0].setCustomValidity('');
  50.                 }
  51.                 {% endif %}
  52.                 {% if form.classcategory_id2 is defined %}
  53.                 // 規格2フォームの必須チェック
  54.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  55.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  56.                     return true;
  57.                 } else {
  58.                     $('#classcategory_id2')[0].setCustomValidity('');
  59.                 }
  60.                 {% endif %}
  61.                 // 個数フォームのチェック
  62.                 if ($('#quantity').val() < 1) {
  63.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  64.                     return true;
  65.                 } else {
  66.                     $('#quantity')[0].setCustomValidity('');
  67.                 }
  68.                 event.preventDefault();
  69.                 $form = $('#form1');
  70.                 $.ajax({
  71.                     url: $form.attr('action'),
  72.                     type: $form.attr('method'),
  73.                     data: $form.serialize(),
  74.                     dataType: 'json',
  75.                     beforeSend: function(xhr, settings) {
  76.                         // Buttonを無効にする
  77.                         $('.add-cart').prop('disabled', true);
  78.                     }
  79.                 }).done(function(data) {
  80.                     // レスポンス内のメッセージをalertで表示
  81.                     $.each(data.messages, function() {
  82.                         $('#ec-modal-header').html(this);
  83.                     });
  84.                     $('.ec-modal').show()
  85.                     // カートブロックを更新する
  86.                     $.ajax({
  87.                         url: "{{ url('block_cart') }}",
  88.                         type: 'GET',
  89.                         dataType: 'html'
  90.                     }).done(function(html) {
  91.                         $('.ec-headerRole__cart').html(html);
  92.                     });
  93.                 }).fail(function(data) {
  94.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  95.                 }).always(function(data) {
  96.                     // Buttonを有効にする
  97.                     $('.add-cart').prop('disabled', false);
  98.                 });
  99.             });
  100.         });
  101.         $('.ec-modal-wrap').on('click', function(e) {
  102.             // モーダル内の処理は外側にバブリングさせない
  103.             e.stopPropagation();
  104.         });
  105.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel, ._prev').on('click', function() {
  106.             $('.ec-modal').hide()
  107.         });
  108.     </script>
  109.     <script type="application/ld+json">
  110.     {
  111.         "@context": "https://schema.org/",
  112.         "@type": "Product",
  113.         "name": "{{ Product.name }}",
  114.         "image": [
  115.             {% for img in Product.ProductImage %}
  116.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  117.             {% else %}
  118.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  119.             {% endfor %}
  120.         ],
  121.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  122.         {% if Product.code_min %}
  123.         "sku": "{{ Product.code_min }}",
  124.         {% endif %}
  125.         "offers": {
  126.             "@type": "Offer",
  127.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  128.             "priceCurrency": "{{ eccube_config.currency }}",
  129.             "price": {{ Product.getPrice02IncTaxMin }},
  130.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  131.         }
  132.     }
  133.     </script>
  134. {% endblock %}
  135. {% block main %}
  136.     {#<div class="container">#}
  137.     {#    {% if Product.ProductCategories is not empty %}#}
  138.     {#        <div class="breadcrumb">#}
  139.     {#            <li>#}
  140.     {#                <a href="{{ url('homepage') }}">#}
  141.     {#                    ホーム#}
  142.     {#                </a>#}
  143.     {#            </li>#}
  144.     {#            {% for ProductCategory in Product.ProductCategories %}#}
  145.     {#                <li>#}
  146.     {#                    <a href="{{ url('product_list') }}?category_id={{ ProductCategory.Category.id }}">{{ ProductCategory.Category.name }}</a>#}
  147.     {#                </li>#}
  148.     {#            {% endfor %}#}
  149.     {#            <li>#}
  150.     {#                <span>#}
  151.     {#                    {{ Product.name }}#}
  152.     {#                </span>#}
  153.     {#            </li>#}
  154.     {#        </div>#}
  155.     {#    {% endif %}#}
  156.     {#</div>#}
  157.     <div class="ec-productRole">
  158.         {# パンくずリスト(関連カテゴリ) #}
  159.         <div class="ec-product__detail">
  160.             <div class="ec-product__detail-img">
  161.                 <div class="ec-sliderItemRole">
  162.                     <div class="slider-detail">
  163.                         {% for ProductImage in Product.ProductImage %}
  164.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></div>
  165.                         {% else %}
  166.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" /></div>
  167.                         {% endfor %}
  168.                     </div>
  169.                     {# <div class="item_nav">
  170.                         {% for ProductImage in Product.ProductImage %}
  171.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>
  172.                         {% endfor %}
  173.                     </div> #}
  174.                 </div>
  175.             </div>
  176.             <div class="product__detail-content">
  177.                 <div class="ec-productRole__profile">
  178.                     {# 商品名 #}
  179.                     <div class="ec-productRole__title">
  180.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  181.                     </div>
  182.                     {# 商品説明 #}
  183.                      <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  184.                     </div>
  185.                     <dl class="ec-product__dl">
  186.                         {% if Product.code_min is not empty %}
  187.                             <div class="item">
  188.                                 <dt>
  189.                                     商品コード
  190.                                 </dt>
  191.                                 <dd>
  192.                                         {{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}
  193.                                 </dd>
  194.                             </div>
  195.                         {% endif %}
  196.                         {% if Product.sub_title1 is not empty %}
  197.                         <div class="item">
  198.                             <dt>
  199.                                 {{ Product.sub_title1 }}
  200.                             </dt>
  201.                             <dd>
  202.                                 {{ Product.sub_comment1 }}
  203.                             </dd>
  204.                         </div>
  205.                         {% endif %}
  206.                         {% if Product.sub_title2 is not empty %}
  207.                         <div class="item">
  208.                             <dt>
  209.                                 {{ Product.sub_title2 }}
  210.                             </dt>
  211.                             <dd>
  212.                                 {{ Product.sub_comment2 }}
  213.                             </dd>
  214.                         </div>
  215.                         {% endif %}
  216.                         {% if Product.sub_title3 is not empty %}
  217.                         <div class="item">
  218.                             <dt>
  219.                                 {{ Product.sub_title3 }}
  220.                             </dt>
  221.                             <dd>
  222.                                 {{ Product.sub_comment3 }}
  223.                             </dd>
  224.                         </div>
  225.                         {% endif %}
  226.                         {% if Product.sub_title4 is not empty %}
  227.                         <div class="item">
  228.                             <dt>
  229.                                 {{ Product.sub_title4 }}
  230.                             </dt>
  231.                             <dd>
  232.                                 {{ Product.sub_comment4 }}
  233.                             </dd>
  234.                         </div>
  235.                         {% endif %}
  236.                         {% if Product.sub_title5 is not empty %}
  237.                         <div class="item">
  238.                             <dt>
  239.                                 {{ Product.sub_title5 }}
  240.                             </dt>
  241.                             <dd>
  242.                                 {{ Product.sub_comment5 }}
  243.                             </dd>
  244.                         </div>
  245.                         {% endif %}
  246.                         {% if Product.author_name is not empty %}
  247.                         <div class="item">
  248.                             <dt>
  249.                                 著者
  250.                             </dt>
  251.                             <dd>
  252.                                 {{ Product.author_name }}
  253.                             </dd>
  254.                         </div>
  255.                         {% endif %}
  256.                         {% if Product.maker_name is not empty %}
  257.                         <div class="item">
  258.                             <dt>
  259.                                 出版社
  260.                             </dt>
  261.                             <dd>
  262.                                 {{ Product.maker_name }}
  263.                             </dd>
  264.                         </div>
  265.                         {% endif %}
  266.                         <div class="item _price">
  267.                             <dt>
  268.                                 販売価格(税込み)
  269.                             </dt>
  270.                             <dd>
  271.                                 {% if Product.hasProductClass -%}
  272.                                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  273.                                         {{ Product.getPrice02IncTaxMin|number_format }}円
  274.                                     {% else %}
  275.                                         {{ Product.getPrice02IncTaxMin|number_format }}円 ~ {{ Product.getPrice02IncTaxMax|number_format }}円
  276.                                     {% endif %}
  277.                                 {% else %}
  278.                                     {{ Product.getPrice02IncTaxMin|number_format }}円
  279.                                 {% endif %}
  280.                             </dd>
  281.                         </div>
  282.                         
  283.                     </dl>
  284.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  285.                         {% if Product.stock_find %}
  286.                             <div class="ec-productRole__actions">
  287.                                 {% if form.classcategory_id1 is defined %}
  288.                                     <div class="ec-select">
  289.                                         {{ form_widget(form.classcategory_id1) }}
  290.                                         {{ form_errors(form.classcategory_id1) }}
  291.                                     </div>
  292.                                     {% if form.classcategory_id2 is defined %}
  293.                                         <div class="ec-select">
  294.                                             {{ form_widget(form.classcategory_id2) }}
  295.                                             {{ form_errors(form.classcategory_id2) }}
  296.                                         </div>
  297.                                     {% endif %}
  298.                                 {% endif %}
  299.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  300.                                     {{ form_widget(form.quantity) }}
  301.                                     {{ form_errors(form.quantity) }}
  302.                                 </div>
  303.                             </div>
  304.                             <div class="ec-productRole__btn">
  305.                                 <button type="submit" class="btn-cart add-cart">
  306.                                     {{ 'カートに入れる'|trans }}
  307.                                 </button>
  308.                             </div>
  309.                         {% else %}
  310.                             <div class="ec-productRole__btn">
  311.                                 <button type="button" class="btn-basic _disable" disabled="disabled">
  312.                                     {{ 'ただいま品切れ中です。'|trans }}
  313.                                 </button>
  314.                             </div>
  315.                         {% endif %}
  316.                         {{ form_rest(form) }}
  317.                     </form>
  318.                     
  319.                     
  320.                     
  321.                     {#{% if BaseInfo.option_favorite_product %}#}
  322.                     {#    <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">#}
  323.                     {#        <div class="ec-productRole__btn">#}
  324.                     {#            {% if is_favorite == false %}#}
  325.                     {#                <button type="submit" id="favorite" class="btn-basic">#}
  326.                     {#                    {{ 'お気に入りに追加'|trans }}#}
  327.                     {#                </button>#}
  328.                     {#            {% else %}#}
  329.                     {#                <button type="submit" id="favorite" class="btn-basic"#}
  330.                     {#                        disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}#}
  331.                     {#                </button>#}
  332.                     {#            {% endif %}#}
  333.                     {#        </div>#}
  334.                     {#    </form>#}
  335.                     {#{% endif %}#}
  336.                     
  337.                     
  338.                     <div class="ec-modal">
  339.                         <div class="ec-modal-overlay">
  340.                             <div class="ec-modal-wrap">
  341.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  342.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  343.                                 <div class="ec-modal-box">
  344.                                     <div class="ec-role">
  345.                                         <span class="btn-basic _sub _prev">{{ 'お買い物を続ける'|trans }}</span>
  346.                                         <a href="{{ url('cart') }}" class="btn-cart">{{ 'カートへ進む'|trans }}</a>
  347.                                     </div>
  348.                                 </div>
  349.                             </div>
  350.                         </div>
  351.                     </div>
  352.                 </div>
  353.             </div>
  354.         </div>
  355.         {% if Product.author_name is not empty or Product.author_profile is not empty  %}
  356.         <div class="ec-product__author">
  357.             <h3 class="title-icon _author">
  358.                 著者の紹介
  359.             </h3>
  360.             <div class="ec-product__author-content">
  361.                 <h4 class="ec-product__author-name">
  362.                 {{ Product.author_name }}
  363.                 </h4>
  364.                 <p class="ec-product__author-text">
  365.                     {{ Product.author_profile }}
  366.                 </p>
  367.             </div>
  368.         </div>
  369.         {% endif %}
  370.         
  371.         {% if Product.freearea %}
  372.              <div class="ec-productRole__description">
  373.                  {{ include(template_from_string(Product.freearea)) }}
  374.             </div>
  375.         {% endif %}
  376.     </div>
  377. {% endblock %}