app/template/syntpl/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 product-detail product-detail-' ~ Product.id %}
  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.             // bfcache無効化
  32.             $(window).bind('pageshow', function(event) {
  33.                 if (event.originalEvent.persisted) {
  34.                     location.reload(true);
  35.                 }
  36.             });
  37.         });
  38.     </script>
  39.     <script>
  40.         $(function() {
  41.             $('.add-cart').on('click', function(event) {
  42.                 {% if form.classcategory_id1 is defined %}
  43.                 // 規格1フォームの必須チェック
  44.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  45.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  46.                     return true;
  47.                 } else {
  48.                     $('#classcategory_id1')[0].setCustomValidity('');
  49.                 }
  50.                 {% endif %}
  51.                 {% if form.classcategory_id2 is defined %}
  52.                 // 規格2フォームの必須チェック
  53.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  54.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  55.                     return true;
  56.                 } else {
  57.                     $('#classcategory_id2')[0].setCustomValidity('');
  58.                 }
  59.                 {% endif %}
  60.                 // 個数フォームのチェック
  61.                 if ($('#quantity').val() < 1) {
  62.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  63.                     return true;
  64.                 } else {
  65.                     $('#quantity')[0].setCustomValidity('');
  66.                 }
  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.                     });
  83.                     $('#ec-modal-checkbox').prop('checked', true);
  84.                     // カートブロックを更新する
  85.                     $.ajax({
  86.                         url: "{{ url('block_cart') }}",
  87.                         type: 'GET',
  88.                         dataType: 'html'
  89.                     }).done(function(html) {
  90.                         var num = $(html).find('.ec-cartNavi__badge').html();
  91.                         $('.header-cart span').html(num);
  92.                     });
  93.                 }).fail(function(data) {
  94.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  95.                 }).always(function(data) {
  96.                     // Buttonを有効にする
  97.                     $('.add-cart').prop('disabled', false);
  98.                 });
  99.             });
  100.         });
  101.     </script>
  102.     <script>
  103.         $(function() {
  104.             $('.ec-classcategory dd').on('click', function(){
  105.                 if (!$(this).find('.stock-none').length) {
  106.                     var classcategory_id1 = $(this).data('classcategory-id1');
  107.                     var classcategory_id2 = $(this).data('classcategory-id2');
  108.                     var classcategory_id2_name = $(this).data('classcategory-id2-name');
  109.                     $('#classcategory_id1').val(classcategory_id1);
  110.                     $('#classcategory_id2').children().remove().end().append($('<option value="' + classcategory_id2 + '">' + classcategory_id2_name + '</option>')).val(classcategory_id2);
  111.                     $('html,body').animate({scrollTop: $('#ec-productRole__cart').offset().top}, {'duration': 600, 'easing': 'easeOutCubic', 'queue': false});
  112.                 }
  113.             });
  114.         });
  115.     </script>
  116.     <script type="application/ld+json">
  117.     {
  118.         "@context": "http://schema.org/",
  119.         "@type": "Product",
  120.         {% if Product.code_min is not empty %}
  121.             "sku": "{{ Product.code_min }}",
  122.         {% endif %}
  123.         "image": [
  124.             {% for ProductImage in Product.ProductImage %}
  125.                 "{{ url('homepage')|trim('//') }}{{ asset(ProductImage, 'save_image') }}"{% if loop.last == false %},{% endif %}
  126.             {% endfor %}
  127.         ],
  128.         "name": "{{ Product.name }}",
  129.         {% if Page.description is not empty %}
  130.             "description": "{{ Page.description }}",
  131.         {% else %}
  132.             "description": "{{ Product.description_list }}",
  133.         {% endif %}
  134.         "offers": {
  135.             "@type": "Offer",
  136.             "url": "{{ url('homepage') }}products/detail/{{ Product.id }}",
  137.             "itemCondition": "http://schema.org/NewCondition",
  138.             {% if Product.stock_find %}
  139.                 "availability": "http://schema.org/InStock",
  140.             {% else %}
  141.                 "availability": "http://schema.org/OutOfStock",
  142.             {% endif %}
  143.             "price": "{{ Product.getPrice02IncTaxMin }}",
  144.             "priceCurrency": "JPY"
  145.         }
  146.     }
  147.     </script>
  148. {% endblock %}
  149. {% block main %}
  150.     <div class="ec-productRole">
  151.         <div class="sp-bread"><a href="/">&raquo;&nbsp;車検一覧に戻る</a></div>
  152.         {% if Product.freearea %}
  153.              <div class="ec-productRole__freearea page-content">
  154.                  {{ include(template_from_string(Product.freearea|raw)) }}
  155.             </div>
  156.         {% endif %}
  157.         <div class="ec-grid2">
  158.             <div class="ec-grid2__cell">
  159.                 <div class="ec-sliderItemRole">
  160.                     <div class="item_visual">
  161.                         {% for ProductImage in Product.ProductImage %}
  162.                             <div class="slide-item">
  163.                                 {{ synResizeImage({
  164.                                     url: asset(ProductImage, 'save_image'),
  165.                                     pc: {width: 660, height: 660, type: 'contain'},
  166.                                     alt: Product.name,
  167.                                     noimage: asset('assets/img/noimage.jpg'),
  168.                                     loading: true,
  169.                                 }) }}
  170.                             </div>
  171.                         {% endfor %}
  172.                     </div>
  173.                     <div class="item_nav">
  174.                         {% for ProductImage in Product.ProductImage %}
  175.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  176.                                 {# slide-itemと同じ画像を指定 #}
  177.                                 {{ synResizeImage({
  178.                                     url: asset(ProductImage, 'save_image'),
  179.                                     pc: {width: 660, height: 660, type: 'contain'},
  180.                                     alt: Product.name,
  181.                                     noimage: asset('assets/img/noimage.jpg'),
  182.                                     loading: true,
  183.                                 }) }}
  184.                             </div>
  185.                         {% endfor %}
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.             <div class="ec-grid2__cell">
  190.                 <div class="ec-productRole__profile">
  191.                     {# 商品コード #}
  192.                     {% if Product.code_min is not empty %}
  193.                         <div class="ec-productRole__code">
  194.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  195.                         </div>
  196.                     {% endif %}
  197.                     {# 商品名 #}
  198.                     <div class="ec-productRole__title">
  199.                         <h1 class="ec-headingTitle">{{ Product.name }}</h1>
  200.                     </div>
  201.                     {# タグ #}
  202.                     {% if Product.Tags is not empty %}
  203.                         <ul class="ec-productRole__tags">
  204.                             {% for Tag in Product.Tags %}
  205.                                 <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  206.                             {% endfor %}
  207.                         </ul>
  208.                     {% endif %}
  209.                     {# 通常価格 #}
  210.                     <div class="ec-productRole__price">
  211.                         <div class="ec-productRole__price01">
  212.                             {% if Product.hasProductClass %}
  213.                                 {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  214.                                     通常価格:<span class="ec-price__price price01-default">{{ Product.getPrice01IncTaxMin|price }}</span>
  215.                                     <span class="ec-price__tax">税込</span>
  216.                                 {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  217.                                     通常価格:<span class="ec-price__price price01-default">{{ Product.getPrice01IncTaxMin|price }}~{{ Product.getPrice01IncTaxMax|price }}</span>
  218.                                     <span class="ec-price__tax">税込</span>
  219.                                 {% endif %}
  220.                             {% else %}
  221.                                 {% if Product.getPrice01Max is not null %}
  222.                                     通常価格:<span class="ec-price__price price01-default">{{ Product.getPrice01IncTaxMin|price }}</span>
  223.                                     <span class="ec-price__tax">税込</span>
  224.                                 {% endif %}
  225.                             {% endif %}
  226.                         </div>
  227.                         {# 販売価格 #}
  228.                         <div class="ec-productRole__price02{% if Synplgbase is defined and Synplgbase.ProductCustomerPriceOn and Product.getPrice03Min is not null and is_granted('ROLE_USER') %} hidden{% endif %}">
  229.                             {% if Product.hasProductClass %}
  230.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  231.                                     販売価格:<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  232.                                     <span class="ec-price__tax">税込</span>
  233.                                 {% else %}
  234.                                     販売価格:<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}~{{ Product.getPrice02IncTaxMax|price }}</span>
  235.                                     <span class="ec-price__tax">税込</span>
  236.                                 {% endif %}
  237.                             {% else %}
  238.                                 販売価格:<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  239.                                 <span class="ec-price__tax">税込</span>
  240.                             {% endif %}
  241.                         </div>
  242.                         {# 会員価格 #}
  243.                         {% if Synplgbase is defined and Synplgbase.ProductCustomerPriceOn %}
  244.                             {% if Product.getPrice03Min is not null %}
  245.                                 <div class="ec-productRole__price03">
  246.                                     <p>
  247.                                         ショップ会員限定価格:
  248.                                         {% if not is_granted('ROLE_USER') %}<span>* 会員登録後、ログインするとこの価格で購入できます。</span>{% endif %}
  249.                                     </p>
  250.                                     {% if Product.hasProductClass %}
  251.                                         {% if Product.getPrice03Min is not null and Product.getPrice03Min == Product.getPrice03Max %}
  252.                                             <span class="ec-price__price price03-default">{{ Product.getPrice03IncTaxMin|price }}</span>
  253.                                             <span class="ec-price__tax">税込</span>
  254.                                         {% elseif Product.getPrice03Min is not null %}
  255.                                             <span class="ec-price__price price03-default">{{ Product.getPrice03IncTaxMin|price }}~{{ Product.getPrice03IncTaxMax|price }}</span>
  256.                                             <span class="ec-price__tax">税込</span>
  257.                                         {% endif %}
  258.                                     {% elseif Product.getPrice03Max is not null %}
  259.                                         <span class="ec-price__price price03-default">{{ Product.getPrice03IncTaxMin|price }}</span>
  260.                                         <span class="ec-price__tax">税込</span>
  261.                                     {% endif %}
  262.                                 </div>
  263.                             {% endif %}
  264.                         {% endif %}
  265.                     </div>
  266.                     {# 関連カテゴリ #}
  267.                     {% if Product.ProductCategories is not empty %}
  268.                         <div class="ec-productRole__category">
  269.                             <div>{{ '関連カテゴリ'|trans }}</div>
  270.                             {% for ProductCategory in Product.ProductCategories %}
  271.                                 <ul>
  272.                                     <li>
  273.                                         {% for Category in ProductCategory.Category.path %}
  274.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  275.                                             <span>></span>{% endif -%}
  276.                                         {% endfor %}
  277.                                     </li>
  278.                                 </ul>
  279.                             {% endfor %}
  280.                         </div>
  281.                     {% endif %}
  282.                     {# {% if Synplgbase is defined %}{{ include_dispatch('Module/classcategory.twig') }}{% endif %} #}
  283.                     {# {% if Synplgbase is defined %}{{ include_dispatch('Module/classcategory_table.twig') }}{% endif %} #}
  284.                     <div class="ec-productRole__cart" id="ec-productRole__cart">
  285.                         <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  286.                             {% if Product.stock_find %}
  287.                                 <div class="ec-productRole__actions">
  288.                                     {% if form.classcategory_id1 is defined %}
  289.                                         <div class="ec-select">
  290.                                             {{ form_widget(form.classcategory_id1) }}
  291.                                             {{ form_errors(form.classcategory_id1) }}
  292.                                         </div>
  293.                                         {% if form.classcategory_id2 is defined %}
  294.                                             <div class="ec-select">
  295.                                                 {{ form_widget(form.classcategory_id2) }}
  296.                                                 {{ form_errors(form.classcategory_id2) }}
  297.                                             </div>
  298.                                         {% endif %}
  299.                                     {% endif %}
  300.                                     <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  301.                                         {{ form_widget(form.quantity) }}
  302.                                         {{ form_errors(form.quantity) }}
  303.                                     </div>
  304.                                 </div>
  305.                                 <div class="ec-productRole__btn">
  306.                                     <button type="submit" class="ec-blockBtn--action add-cart">
  307.                                         {{ 'カートに入れる'|trans }}
  308.                                     </button>
  309.                                 </div>
  310.                             {% else %}
  311.                                 <div class="ec-productRole__btn">
  312.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  313.                                         {{ 'ただいま品切れ中です。'|trans }}
  314.                                     </button>
  315.                                 </div>
  316.                             {% endif %}
  317.                             {{ form_rest(form) }}
  318.                         </form>
  319.                         <div class="ec-modal">
  320.                             <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
  321.                             <div class="ec-modal-overlay">
  322.                                 <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
  323.                                 <div class="ec-modal-wrap">
  324.                                     <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"></span></label>
  325.                                     <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  326.                                     <div class="ec-modal-box">
  327.                                         <div class="ec-role">
  328.                                             <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</label>
  329.                                             <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  330.                                         </div>
  331.                                     </div>
  332.                                 </div>
  333.                             </div>
  334.                         </div>
  335.                         {% if BaseInfo.option_favorite_product %}
  336.                             <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  337.                                 <div class="ec-productRole__btn">
  338.                                     {% if is_favorite == false %}
  339.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  340.                                             {{ 'お気に入りに追加'|trans }}
  341.                                         </button>
  342.                                     {% else %}
  343.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  344.                                                 disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  345.                                         </button>
  346.                                     {% endif %}
  347.                                 </div>
  348.                             </form>
  349.                         {% endif %}
  350.                     </div>
  351.                     <div class="ec-productRole__description page-content">{{ Product.description_detail|raw }}</div>
  352.                 </div>
  353.             </div>
  354.         </div>
  355.     </div>
  356. {% endblock %}