app/template/kaiino/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 product_detail' %}
  10. {% block stylesheet %}
  11.     <style>
  12.       .item_nav_num{
  13.         text-align: center;
  14.       }
  15.       @media (min-width:768px){
  16.         .item_nav_num{
  17.           display: none;
  18.         }
  19.       }
  20.     </style>
  21. {% endblock %}
  22. {% block javascript %}
  23.     <script>
  24.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  25.         // 規格2に選択肢を割り当てる。
  26.         function fnSetClassCategories(form, classcat_id2_selected) {
  27.             var $form = $(form);
  28.             var product_id = $form.find('input[name=product_id]').val();
  29.             var $sele1 = $form.find('select[name=classcategory_id1]');
  30.             var $sele2 = $form.find('select[name=classcategory_id2]');
  31.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  32.         }
  33.         {% if form.classcategory_id2 is defined %}
  34.         fnSetClassCategories(
  35.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  36.         );
  37.         {% elseif form.classcategory_id1 is defined %}
  38.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  39.         {% endif %}
  40.     </script>
  41.     <script>
  42.         $(function() {
  43.             // bfcache無効化
  44.             $(window).bind('pageshow', function(event) {
  45.                 if (event.originalEvent.persisted) {
  46.                     location.reload(true);
  47.                 }
  48.             });
  49.             $('.item_visual').slick({
  50.                 dots: false,
  51.                 arrows: false,
  52.                 slidesToShow: 1,
  53.                 responsive: [{
  54.                     breakpoint: 768,
  55.                     settings: {
  56.                         dots: false
  57.                     }
  58.                 }]
  59.             });
  60.             $('.slideThumb').on('click', function() {
  61.                 var index = $(this).attr('data-index');
  62.                 $('.item_visual').slick('slickGoTo', index, false);
  63.             });
  64.             $('.item_visual').on('afterChange', function(slick, currentSlide){
  65.               var index = currentSlide.currentSlide+1;
  66.               $('.item_nav_num .curr').text(index);
  67.               console.log('index', index);
  68.             });
  69.             $('.item_visual').slick('setPosition');
  70.         });
  71.     </script>
  72.     <script>
  73.         $(function() {
  74.             $('.add-cart').on('click', function(event) {
  75.                 {% if form.classcategory_id1 is defined %}
  76.                 // 規格1フォームの必須チェック
  77.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  78.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  79.                     return true;
  80.                 } else {
  81.                     $('#classcategory_id1')[0].setCustomValidity('');
  82.                 }
  83.                 {% endif %}
  84.                 {% if form.classcategory_id2 is defined %}
  85.                 // 規格2フォームの必須チェック
  86.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  87.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  88.                     return true;
  89.                 } else {
  90.                     $('#classcategory_id2')[0].setCustomValidity('');
  91.                 }
  92.                 {% endif %}
  93.                 // 個数フォームのチェック
  94.                 if ($('#quantity').val() < 1) {
  95.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  96.                     return true;
  97.                 } else {
  98.                     $('#quantity')[0].setCustomValidity('');
  99.                 }
  100.                 event.preventDefault();
  101.                 $form = $('#form1');
  102.                 $.ajax({
  103.                     url: $form.attr('action'),
  104.                     type: $form.attr('method'),
  105.                     data: $form.serialize(),
  106.                     dataType: 'json',
  107.                     beforeSend: function(xhr, settings) {
  108.                         // Buttonを無効にする
  109.                         $('.add-cart').prop('disabled', true);
  110.                     }
  111.                 }).done(function(data) {
  112.                     // レスポンス内のメッセージをalertで表示
  113.                     $.each(data.messages, function() {
  114.                         $('#ec-modal-header').html(this);
  115.                     });
  116.                     $('.ec-modal').show()
  117.                     // カートブロックを更新する
  118.                     $.ajax({
  119.                         url: "{{ url('block_cart') }}",
  120.                         type: 'GET',
  121.                         dataType: 'html'
  122.                     }).done(function(html) {
  123.                         $('.ec-headerRole__cart').html(html);
  124.                     });
  125.                 }).fail(function(data) {
  126.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  127.                 }).always(function(data) {
  128.                     // Buttonを有効にする
  129.                     $('.add-cart').prop('disabled', false);
  130.                 });
  131.             });
  132.         });
  133.         $('.ec-modal-wrap').on('click', function(e) {
  134.             // モーダル内の処理は外側にバブリングさせない
  135.             e.stopPropagation();
  136.         });
  137.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  138.             $('.ec-modal').hide()
  139.         });
  140.     </script>
  141.     <script type="application/ld+json">
  142.     {
  143.         "@context": "https://schema.org/",
  144.         "@type": "Product",
  145.         "name": "{{ Product.name }}",
  146.         "image": [
  147.             {% for img in Product.ProductImage %}
  148.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  149.             {% else %}
  150.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  151.             {% endfor %}
  152.         ],
  153.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  154.         {% if Product.code_min %}
  155.         "sku": "{{ Product.code_min }}",
  156.         {% endif %}
  157.         "offers": {
  158.             "@type": "Offer",
  159.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  160.             "priceCurrency": "{{ eccube_config.currency }}",
  161.             "price": {{ Product.getPrice02IncTaxMin }},
  162.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  163.         }
  164.     }
  165.     </script>
  166. {% endblock %}
  167. {% block main %}
  168.     <div class="ec-productRole">
  169.         <div class="ec-grid2">
  170.             <div class="ec-grid2__cell ec-slider">
  171.                 <div class="ec-sliderItemRole">
  172.                     <div class="item_visual">
  173.                         {% for ProductImage in Product.ProductImage %}
  174.                             <div class="slide-item">
  175.                               <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}">
  176.                               <div class="slider-text">
  177.                                 <h3>{{ ProductImage.getTitle }}</h3>
  178.                                 <p>{{ ProductImage.getDescription }}</p>
  179.                               </div>
  180.                             </div>
  181.                         {% else %}
  182.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" /></div>
  183.                         {% endfor %}
  184.                     </div>
  185.                     <div class="item_nav">
  186.                         {% for ProductImage in Product.ProductImage %}
  187.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>
  188.                         {% endfor %}
  189.                     </div>
  190.                     <div class="item_nav_num">
  191.                       <span class="curr">1</span> / {{ Product.ProductImage | length }}
  192.                     </div>
  193.                 </div>
  194.             </div>
  195.             <div class="ec-grid2__cell ec-description">
  196.                 <div class="ec-productRole__profile">
  197.                     {# 商品名 #}
  198.                     <div class="ec-productRole__title">
  199.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  200.                     </div>
  201.                     
  202.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  203.                     </div>
  204.                     
  205.                     {# タグ #}
  206.                     <ul class="ec-productRole__tags">
  207.                         {% for Tag in Product.Tags %}
  208.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  209.                         {% endfor %}
  210.                         
  211.                       {# 割引率 #}
  212.                       {{ Product.getSaleDiscountTag2|raw }}
  213.                     </ul>
  214.                     
  215.                     {# 通常価格 #}
  216.                     {% if Product.hasProductClass -%}
  217.                         <div class="ec-productRole__priceRegular">
  218.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  219.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  220.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  221.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  222.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }} ~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  223.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  224.                             {% endif %}
  225.                         </div>
  226.                     {% else %}
  227.                         {% if Product.getPrice01Max is not null %}
  228.                         <div class="ec-productRole__priceRegular--div">
  229.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  230.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  231.                         </div>
  232.                         {% endif %}
  233.                     {% endif %}
  234.                     {# 販売価格 #}
  235.                     <div class="ec-productRole__price">
  236.                         {% if Product.hasProductClass -%}
  237.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  238.                                 <div class="ec-price">
  239.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  240.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  241.                                 </div>
  242.                             {% else %}
  243.                                 <div class="ec-price">
  244.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  245.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  246.                                 </div>
  247.                             {% endif %}
  248.                         {% else %}
  249.                             <div class="ec-price">
  250.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  251.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  252.                             </div>
  253.                         {% endif %}
  254.                     </div>
  255.                     {# 商品コード #}
  256.                     {% if Product.code_min is not empty %}
  257.                         <div class="ec-productRole__code">
  258.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  259.                         </div>
  260.                     {% endif %}
  261.                     
  262.                     
  263.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  264.                         {% if Product.stock_find %}
  265.                             <div class="ec-productRole__actions">
  266.                                 {% if form.classcategory_id1 is defined %}
  267.                                     <div class="ec-select">
  268.                                         {{ form_widget(form.classcategory_id1) }}
  269.                                         {{ form_errors(form.classcategory_id1) }}
  270.                                     </div>
  271.                                     {% if form.classcategory_id2 is defined %}
  272.                                         <div class="ec-select">
  273.                                             {{ form_widget(form.classcategory_id2) }}
  274.                                             {{ form_errors(form.classcategory_id2) }}
  275.                                         </div>
  276.                                     {% endif %}
  277.                                 {% endif %}
  278.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  279.                                     {{ form_widget(form.quantity) }}
  280.                                     {{ form_errors(form.quantity) }}
  281.                                 </div>
  282.                             </div>
  283.                             <div class="ec-productRole__btn">
  284.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  285.                                     {{ 'カートに入れる'|trans }}
  286.                                 </button>
  287.                             </div>
  288.                         {% else %}
  289.                             <div class="ec-productRole__btn">
  290.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  291.                                     {{ 'ただいま品切れ中です。'|trans }}
  292.                                 </button>
  293.                             </div>
  294.                         {% endif %}
  295.                         {{ form_rest(form) }}
  296.                     </form>
  297.                     <div class="ec-modal">
  298.                         <div class="ec-modal-overlay">
  299.                             <div class="ec-modal-wrap">
  300.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  301.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  302.                                 <div class="ec-modal-box">
  303.                                     <div class="ec-role">
  304.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  305.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  306.                                     </div>
  307.                                 </div>
  308.                             </div>
  309.                         </div>
  310.                     </div>
  311.                     {% if BaseInfo.option_favorite_product %}
  312.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  313.                             <div class="ec-productRole__btn ec-productRole__favorite">
  314.                                 {% if is_favorite == false %}
  315.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  316.                                         {{ 'お気に入りに追加'|trans }}
  317.                                     </button>
  318.                                 {% else %}
  319.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  320.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  321.                                     </button>
  322.                                 {% endif %}
  323.                             </div>
  324.                         </form>
  325.                     {% endif %}
  326.                     
  327.                     
  328.                     <table class="product_detail_tbl tbl">
  329.                       <thead>
  330.                         <tr>
  331.                           <th colspan="2">商品詳細</th>
  332.                         </tr>
  333.                       </thead>
  334.                       <tbody>
  335.                         <tr>
  336.                           <th>ブランド</th>
  337.                           <td>
  338.                             {% if Product.Brand is not empty %}
  339.                             {{ Product.Brand.name }}
  340.                             {% endif %}
  341.                           </td>
  342.                         </tr>
  343.                         <tr>
  344.                           <th>品番</th>
  345.                           <td>
  346.                             {% if Product.hasProductClass %}
  347.                               {% for Class in Product.getProductClasses() %}
  348.                                 {% if Class.code %}
  349.                                 {% if loop.last %}
  350.                                   {{ Class.code }}
  351.                                 {% else %}
  352.                                   {{ Class.code }}, 
  353.                                 {% endif %}
  354.                                 {% endif %}
  355.                               {% endfor %}
  356.                             {% else %}
  357.                               {{ Product.code_min }}
  358.                             {% endif %}
  359.                           </td>
  360.                         </tr>
  361.                         <tr>
  362.                           <th>サイズ</th>
  363.                           <td>{{ Product.plg_size|raw|nl2br }}</td>
  364.                         </tr>
  365.                         <tr>
  366.                           <th>素材</th>
  367.                           <td>{{ Product.plg_sozai|raw|nl2br }}</td>
  368.                         </tr>
  369.                         <tr>
  370.                           <th>カラー</th>
  371.                           <td>
  372.                             {% if Product.hasProductClass %}
  373.                               {{ Product.getColorsList }}
  374.                             {% else %}
  375.                               {% set Class = repository('Eccube\\Entity\\ProductClass').findOneBy({'Product':Product}) %}
  376.                               {{ Class.getDisplayClassname }}
  377.                             {% endif %}
  378.                           </td>
  379.                         </tr>
  380.                         <tr>
  381.                           <th>重量</th>
  382.                           <td>{{ Product.plg_weight1|raw|nl2br }}</td>
  383.                         </tr>
  384.                         <tr>
  385.                           <th>耐荷重</th>
  386.                           <td>{{ Product.plg_weight2|raw|nl2br }}</td>
  387.                         </tr>
  388.                         <tr>
  389.                           <th>備考</th>
  390.                           <td>{{ Product.plg_comment|raw|nl2br }}</td>
  391.                         </tr>
  392.                       </tbody>
  393.                     </table>
  394.                     
  395.                     <!-- 商品状態ランクについて -->
  396.                     {{ include('Block/product_rank_desc.twig') }}
  397.                     
  398.                     {# 関連カテゴリ #}
  399.                     {% if Product.ProductCategories is not empty %}
  400.                         <div class="ec-productRole__category">
  401.                             <div>{{ '関連カテゴリ'|trans }}</div>
  402.                             {% for ProductCategory in Product.ProductCategories %}
  403.                                 <ul>
  404.                                     <li>
  405.                                         {% for Category in ProductCategory.Category.path %}
  406.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  407.                                             <span>></span>{% endif -%}
  408.                                         {% endfor %}
  409.                                     </li>
  410.                                 </ul>
  411.                             {% endfor %}
  412.                         </div>
  413.                     {% endif %}
  414.                     
  415.                     {% if Product.Taste is not empty %}
  416.                       <div id="taste_area" class="ec-productRole__taste" style="padding: 14px 0; border-bottom: 1px dotted #ccc;">
  417.                           {% if Product.taste_url is not empty %}
  418.                               <p class="ec-taste">{{ 'taste.admin.taste'|trans }}: <a href="{{ Product.taste_url }}" target="_blank">{{ Product.Taste.name }}</a></p>
  419.                           {% else %}
  420.                               <p class="ec-taste">{{ 'taste.admin.taste'|trans }}: {{ Product.Taste.name }}</p>
  421.                           {% endif %}
  422.                       </div>
  423.                     {% endif %}
  424.                 </div>
  425.             </div>
  426.         </div>
  427.     </div>
  428.                 
  429.                 
  430.     
  431.     {% if Product.freearea %}
  432.     <div class="ec-descriptionRole">
  433.       <div class="ec-productRole__description">
  434.           {{ include(template_from_string(Product.freearea)) }}
  435.       </div>
  436.     </div>
  437.     {% endif %}
  438.     
  439.         
  440.         
  441.     <div class="" id="related_product_area">
  442.       <div class="ec-pageHeader">
  443.         <h3>関連アイテム</h3>
  444.       </div>
  445.       <div class="product_list">
  446.         <ul class="ec-shelfGrid">
  447.         {% set RelatedProducts = repository('Eccube\\Entity\\Product').getRelatedProducts(Product) %}
  448.         {% for Product in RelatedProducts %}
  449.         {{ include('Product/list_single_item.twig') }}
  450.         {% endfor %}
  451.         </ul>
  452.       </div>
  453.     </div>
  454.       
  455.         
  456. {% endblock %}