src/Eccube/Resource/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 stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block javascript %}
  78.     <script>
  79.             eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  80.             {% if form.classcategory_id2 is defined %}
  81.                 eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, {{ form.classcategory_id2.vars.value|json_encode|raw }});
  82.             {% elseif form.classcategory_id1 is defined %}
  83.                 eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  84.             {% endif %}
  85.     </script>
  86.     <script>
  87.         $(function() {
  88.             // bfcache無効化
  89.             $(window).bind('pageshow', function(event) {
  90.                 if (event.originalEvent.persisted) {
  91.                     location.reload(true);
  92.                 }
  93.             });
  94.             $('.item_visual').slick({
  95.                 dots: false,
  96.                 arrows: false,
  97.                 responsive: [{
  98.                     breakpoint: 768,
  99.                     settings: {
  100.                         dots: true
  101.                     }
  102.                 }]
  103.             });
  104.             $('.slideThumb').on('click', function() {
  105.                 var index = $(this).attr('data-index');
  106.                 $('.item_visual').slick('slickGoTo', index, false);
  107.             })
  108.         });
  109.     </script>
  110.     <script>
  111.     $(function() {
  112.         $('.add-cart').on('click', function(event) {
  113.             {% if form.classcategory_id1 is defined %}
  114.             // 規格1フォームの必須チェック
  115.             if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  116.                 $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  117.                 return true;
  118.             } else {
  119.                 $('#classcategory_id1')[0].setCustomValidity('');
  120.             }
  121.             {% endif %}
  122.             {% if form.classcategory_id2 is defined %}
  123.             // 規格2フォームの必須チェック
  124.             if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  125.                 $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  126.                 return true;
  127.             } else {
  128.                 $('#classcategory_id2')[0].setCustomValidity('');
  129.             }
  130.             {% endif %}
  131.             event.preventDefault();
  132.             const $form = $('#form1');
  133.             $.ajax({
  134.                 url: $form.attr('action'),
  135.                 type: $form.attr('method'),
  136.                 data: $form.serialize(),
  137.                 dataType: 'json',
  138.                 beforeSend: function() {
  139.                     $('.add-cart').prop('disabled', true);
  140.                 }
  141.             }).done(function(data) {
  142.                 console.log('AJAX succeeded', data);
  143.                 // モーダルにメッセージを表示
  144.                 if (data.messages) {
  145.                     $('#ec-modal-header').html(data.messages.join('<br>'));
  146.                 } else {
  147.                     $('#ec-modal-header').html('{{ "カートに追加しました。"|trans }}');
  148.                 }
  149.                 // モーダルを表示
  150.                 $('#cart-modal').addClass('active');
  151.                 // カートブロックを更新
  152.                 $.ajax({
  153.                     url: "{{ url('block_cart') }}",
  154.                     type: 'GET',
  155.                     dataType: 'html'
  156.                 }).done(function(html) {
  157.                     $('.ec-headerRole__cart').html(html);
  158.                 }).fail(function() {
  159.                     alert('{{ "カートブロックの更新に失敗しました。"|trans }}');
  160.                 });
  161.             }).fail(function() {
  162.                 alert('{{ "カートへの追加に失敗しました。"|trans }}');
  163.             }).always(function() {
  164.                 $('.add-cart').prop('disabled', false);
  165.             });
  166.         });
  167.         // モーダルを閉じる処理
  168.         $('#cart-modal-close, #continue-shopping').on('click', function() {
  169.             $('#cart-modal').removeClass('active');
  170.         });
  171.     });
  172.     </script>
  173. {% endblock %}
  174. {% block main %}
  175.     <div class="ec-productRole">
  176.         <div class="ec-grid2">
  177.             <div class="ec-grid2__cell">
  178.                 <div class="ec-sliderItemRole">
  179.                     <div class="item_visual">
  180.                         {% for ProductImage in Product.ProductImage %}
  181.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  182.                         {% else %}
  183.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  184.                         {% endfor %}
  185.                     </div>
  186.                     <div class="item_nav">
  187.                         {% for ProductImage in Product.ProductImage %}
  188.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  189.                         {% endfor %}
  190.                     </div>
  191.                 </div>
  192.             </div>
  193.             <div class="ec-grid2__cell">
  194.                 <div class="ec-productRole__profile">
  195.                     {# 商品名 #}
  196.                     <div class="ec-productRole__title">
  197.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  198.                     </div>
  199.                     {# タグ #}
  200.                     <ul class="ec-productRole__tags">
  201.                         {% for Tag in Product.Tags %}
  202.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  203.                         {% endfor %}
  204.                     </ul>
  205.                     {# 販売価格 #}
  206.                     <div class="ec-productRole__price">
  207.                         {% if Product.hasProductClass -%}
  208.                             {% set isDeliveryFree = Product.ProductClasses|filter(pc => pc.isDeliveryFree())|length > 0 %}
  209.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  210.                                 <div class="ec-price">
  211.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  212.                                     <span class="ec-price__tax">
  213.                                         {{ '税込'|trans }}
  214.                                         {% if isDeliveryFree %}
  215.                                             <span class="delivery-free">{{ ' 送料無料'|trans }}</span>
  216.                                         {% else %}
  217.                                             <span class="delivery-fee">{{ ' +送料'|trans }}</span>
  218.                                         {% endif %}
  219.                                     </span>
  220.                                 </div>
  221.                             {% else %}
  222.                                 <div class="ec-price">
  223.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  224.                                     <span class="ec-price__tax">
  225.                                         {{ '税込'|trans }}
  226.                                         {% if isDeliveryFree %}
  227.                                             <span class="delivery-free">{{ ' 送料無料'|trans }}</span>
  228.                                         {% else %}
  229.                                             <span class="delivery-fee">{{ ' +送料'|trans }}</span>
  230.                                         {% endif %}
  231.                                     </span>
  232.                                 </div>
  233.                             {% endif %}
  234.                         {% else %}
  235.                             <div class="ec-price">
  236.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  237.                                 <span class="ec-price__tax">
  238.                                     {{ '税込'|trans }}
  239.                                     {% set isDeliveryFree = Product.ProductClasses|filter(pc => pc.isDeliveryFree())|length > 0 %}
  240.                                     {% if isDeliveryFree %}
  241.                                         <span class="delivery-free">{{ ' 送料無料'|trans }}</span>
  242.                                     {% else %}
  243.                                         <span class="delivery-fee">{{ ' +送料'|trans }}</span>
  244.                                     {% endif %}
  245.                                 </span>
  246.                             </div>
  247.                         {% endif %}
  248.                     </div>
  249.                     {# 関連カテゴリ #}
  250.                     {% if Product.ProductCategories is not empty %}
  251.                         <div class="ec-productRole__category">
  252.                             <div>{{ '関連カテゴリ'|trans }}</div>
  253.                             {% for ProductCategory in Product.ProductCategories %}
  254.                                 <ul>
  255.                                     <li>
  256.                                         {% for Category in ProductCategory.Category.path %}
  257.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  258.                                             <span>></span>{% endif -%}
  259.                                         {% endfor %}
  260.                                     </li>
  261.                                 </ul>
  262.                             {% endfor %}
  263.                         </div>
  264.                     {% endif %}
  265.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  266.                         {% if Product.stock_find %}
  267.                             <div class="ec-productRole__actions">
  268.                                 {% if form.classcategory_id1 is defined %}
  269.                                     <div class="ec-select">
  270.                                         {{ form_widget(form.classcategory_id1) }}
  271.                                         {{ form_errors(form.classcategory_id1) }}
  272.                                     </div>
  273.                                     {% if form.classcategory_id2 is defined %}
  274.                                         <div class="ec-select">
  275.                                             {{ form_widget(form.classcategory_id2) }}
  276.                                             {{ form_errors(form.classcategory_id2) }}
  277.                                         </div>
  278.                                     {% endif %}
  279.                                 {% endif %}
  280.                                 <div class="ec-select">
  281.                                     {{ form_widget(form.quantity) }}
  282.                                     {{ form_errors(form.quantity) }}
  283.                                 </div>
  284.                             </div>
  285.                             <div class="ec-productRole__btn">
  286.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  287.                                     {{ 'カートに入れる'|trans }}
  288.                                 </button>
  289.                             </div>
  290.                         {% else %}
  291.                             <div class="ec-productRole__btn">
  292.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  293.                                     {{ '品切れ中です'|trans }}
  294.                                 </button>
  295.                             </div>
  296.                         {% endif %}
  297.                         {{ form_rest(form) }}
  298.                     </form>
  299.                     <!-- モーダル -->
  300.                     <div class="ec-modal" id="cart-modal">
  301.                         <div class="ec-modal-overlay">
  302.                             <div class="ec-modal-wrap">
  303.                                 <button class="ec-modal-close" id="cart-modal-close">
  304.                                     <span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt="閉じる"/></span>
  305.                                 </button>
  306.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  307.                                 <div class="ec-modal-box">
  308.                                     <div class="ec-role">
  309.                                         <button class="ec-inlineBtn--cancel" id="continue-shopping">{{ 'お買い物を続ける'|trans }}</button>
  310.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  311.                                     </div>
  312.                                 </div>
  313.                             </div>
  314.                         </div>
  315.                     </div>
  316.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  317.                     </div>
  318.                 </div>
  319.             </div>
  320.         </div>
  321.         {# スペック #}
  322.         <div class="makerspec pull-left">
  323.             <table>
  324.                 <tbody>
  325.                     {% for spec in Product.ProductMakerSpec %}
  326.                         <tr>
  327.                             <th><span>{{spec.getSpecName()}}</span></th>
  328.                             <td class="txt"><span>{{spec.getInfo()}}</span></td>
  329.                         </tr>
  330.                     {% endfor %}
  331.                 </tbody>
  332.             </table>
  333.         </div>
  334.         <div class="instant-repair-description">
  335.             {#<div class="instant-repair-description__title">
  336.                 プリンタストアの検品
  337.             </div>#}
  338.             <div class="uk-child-width-1-1" uk-grid>
  339.                 <div class="instant-repair-description__message">
  340.                     <div class="uk-card uk-card-default uk-card-small uk-card-body">
  341.                         <h3 class="uk-card-title">商品の品質</h3>
  342.                         <p>プリンタストアでは、プリンタの機種ごとに専門のサービスマンがおります。</p>
  343.                         <p>必要に応じて分解・清掃・グリスアップ・部品交換を行い、快適にご使用頂けるよう万全の調整を整えております。</p>
  344.                         <p>プリンタストアの商品には全て30日間の保証が付いておりますので安心してご使用頂けます。</p>
  345.                     </div>
  346.                 </div>
  347.             </div>
  348.             <div class="instant-repair-description__image">
  349.                 <div class="uk-card uk-card-default uk-card-small uk-card-body">
  350.                     <img src="{{  asset('assets/img/product/mente01.jpg') }}" alt="">
  351.                 </div>
  352.             </div>
  353.         </div>
  354.         <div class="ec-productRole__contact">
  355.             <div class="ec-productRole__contact__title">
  356.                 <span>この商品について問い合わせる</span>
  357.             </div>
  358.             <form action="{{ path('contact') }}" method="post" class="h-adr" novalidate>
  359.                 <span class="p-country-name" style="display:none;">Japan</span>
  360.                 {{ form_widget(contactform._token) }}
  361.                 <p class="ec-para-normal">{{ '内容によっては回答をさしあげるのにお時間をいただくこともございます。
  362.         また、休業日は翌営業日以降の対応となりますのでご了承ください。
  363.         '|trans|nl2br }}</p>
  364.                 <div class="ec-RegisterRole__actions">
  365.                     <div class="ec-off4Grid">
  366.                         <div class="ec-off4Grid__cell">
  367.                             <a href="/contact" class="ec-blockBtn--action">
  368.                                 {{ 'お問い合わせ'|trans }}
  369.                             </a>
  370.                         </div>
  371.                     </div>
  372.                 </div>
  373.             </form>
  374.         </div>
  375.     {% if Product.freearea %}
  376.          <div class="ec-productRole__description">
  377.              {{ include(template_from_string(Product.freearea)) }}
  378.         </div>
  379.     {% endif %}
  380.     </div>
  381. {% endblock %}