app/template/default/Product/detail.twig line 122

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. {% endblock %}
  12. {% block javascript %}
  13. <script>
  14.     eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  15.     // 規格2に選択肢を割り当てる。
  16.     function fnSetClassCategories(form, classcat_id2_selected) {
  17.         var $form = $(form);
  18.         var product_id = $form.find('input[name=product_id]').val();
  19.         var $sele1 = $form.find('select[name=classcategory_id1]');
  20.         var $sele2 = $form.find('select[name=classcategory_id2]');
  21.         eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  22.     }
  23.     {% if form.classcategory_id2 is defined %}
  24.     fnSetClassCategories(
  25.         $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  26.     );
  27.     {% elseif form.classcategory_id1 is defined %}
  28.     eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  29.     {% endif %}
  30. </script>
  31. <script>
  32.     $('.carousel').slick({
  33.         infinite: false,
  34.         speed: 300,
  35.         prevArrow:'<button type="button" class="slick-prev"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
  36.         nextArrow:'<button type="button" class="slick-next"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
  37.         slidesToShow: 4,
  38.         slidesToScroll: 4,
  39.         responsive: [
  40.             {
  41.                 breakpoint: 768,
  42.                 settings: {
  43.                     slidesToShow: 3,
  44.                     slidesToScroll: 3
  45.                 }
  46.             }
  47.         ]
  48.     });
  49.     $('.slides').slick({
  50.         dots: true,
  51.         arrows: false,
  52.         speed: 300,
  53.         customPaging: function(slider, i) {
  54.             return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
  55.         }
  56.     });
  57.     $('#favorite').click(function() {
  58.         $('#mode').val('add_favorite');
  59.     });
  60.     $('#add-cart').click(function() {
  61.         $('#mode').val('add_cart');
  62.     });
  63.     // bfcache無効化
  64.     $(window).bind('pageshow', function(event) {
  65.         if (event.originalEvent.persisted) {
  66.             location.reload(true);
  67.         }
  68.     });
  69. </script>
  70. {% endblock %}
  71. {% block main %}
  72. <!-- ▼item_detail▼ -->
  73. <div id="item_detail">
  74.     <div id="detail_wrap" class="row">
  75.         <!--★画像★-->
  76.         <div id="item_photo_area" class="col-sm-6">
  77.             <div id="detail_image_box__slides" class="slides">
  78.                 {% for ProductImage in Product.ProductImage %}
  79.                     <div id="detail_image_box__item--{{ loop.index }}">
  80.                         <img class="zoom" src="{{ asset(ProductImage, 'save_image') }}" data-zoom-image="{{ asset(ProductImage, 'save_image') }}"/>
  81.                     </div>
  82.                 {% else %}
  83.                     <div id="detail_image_box__item">
  84.                         <img class="zoom" src="{{ asset(''|no_image_product, 'save_image') }}" data-zoom-image="{{ asset(''|no_image_product, 'save_image') }}"/>
  85.                     </div>
  86.                 {% endfor %}
  87.             </div>
  88.         </div>
  89.         <section id="item_detail_area" class="col-sm-6">
  90.             <!--★商品名★-->
  91.             <h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>
  92.             <!-- ▼関連カテゴリ▼ -->
  93.             <div id="relative_category_box" class="relative_cat">
  94.                 <!--<p>関連カテゴリ</p>-->
  95.                 {% for ProductCategory in Product.ProductCategories %}
  96.                     <ol id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.index }}">
  97.                         {% for Category in ProductCategory.Category.path %}
  98.                             <li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}" class="btn btn-info-border">{{ Category.name }}</a></li>
  99.                         {% endfor %}
  100.                     </ol>
  101.                 {% endfor %}
  102.             </div>
  103.             <!-- ▲関連カテゴリ▲ -->
  104.             <div id="detail_description_box__body" class="item_detail">
  105.                 {% if Product.Tags is not empty %}
  106.                     <!--▼商品タグ-->
  107.                     <div id="product_tag_box" class="product_tag">
  108.                         {% for Tag in Product.Tags %}
  109.                             <span id="product_tag_box__product_tag--{{ Tag.id }}" class="product_tag_list">{{ Tag }}</span>
  110.                         {% endfor %}
  111.                     </div>
  112.                     <hr>
  113.                     <!--▲商品タグ-->
  114.                 {% endif %}
  115.                 <!--★通常価格★-->
  116.                 {% if Product.hasProductClass -%}
  117.                     {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  118.                         <p id="detail_description_box__class_normal_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
  119.                     {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  120.                         <p id="detail_description_box__class_normal_range_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
  121.                     {% endif %}
  122.                 {% else -%}
  123.                     {% if Product.getPrice01Max is not null and Product.getPrice01Max > 0 %}
  124.                         <span class="tax_management-list_price"></span>
  125.                             {#
  126.                         <p id="detail_description_box__normal_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
  127.                             #}
  128.                     {% endif %}
  129.                 {% endif -%}
  130.                 <!--★販売価格★-->
  131.                 {% set flag = false %}
  132.                 {% if Product.ProductCategories is not empty %}
  133.                     {% for category in Product.ProductCategories %}
  134.                         {% if category.Category.id == 148 or category.Category.id == 133 or category.Category.id == 144 or category.Category.id == 116 %}
  135.                             {% set flag = true %}
  136.                         {% endif %}
  137.                     {% endfor %}
  138.                 {% endif %}
  139.                 {% if flag != true and discount_flag %}
  140.                     {% if is_granted('ROLE_USER') %}
  141.                         <span style="color:red;">[{{ discount_ratio }}%割引対象商品です]</span>
  142.                     {% elseif nonmember_flag %}
  143.                         <span style="color:red;">[{{ nonmember_ratio }}%割引対象商品です]</span>
  144.                     {% endif %}
  145.                 {% endif %}
  146.                 {# % set flag = false %}
  147.                 {% if Product.ProductTag is not empty %}
  148.                     {% for ProductTag in Product.ProductTag %}
  149.                         {% if ProductTag.Tag.id == 1 or ProductTag.Tag.id == 3 or ProductTag.Tag.id == 5 or ProductTag.Tag.id == 6 %}
  150.                             {% set flag = true %}
  151.                         {% endif %}
  152.                     {% endfor %}
  153.                 {% endif %}
  154.                 {% if flag != true %}
  155.                     <span style="color:red;">[5%割引対象商品です]</span><br>
  156.                 {% endif % #}
  157.                 {% if Product.hasProductClass -%}
  158.                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  159.                         <p id="detail_description_box__class_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
  160.                     {% else %}
  161.                         <p id="detail_description_box__class_range_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
  162.                     {% endif %}
  163.                 {% else -%}
  164.                     <span class="tax_management-sale_price"></span>
  165.                     <small>
  166.                         {% if Product.stock_min >= 5 %}
  167.                             在庫あり
  168.                         {% elseif Product.stock_min == null %}
  169.                             在庫あり
  170.                         {% else %}
  171.                             在庫:{{ Product.stock_min }}
  172.                         {% endif %}
  173.                     </small>
  174.                     {#
  175.                     <p id="detail_description_box__sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span><span class="small"><small>(税込) 在庫:{{ Product.stock_min }}</small></span><span class="small hide">税込</span></p>
  176.                     #}
  177.                 {% endif -%}
  178.                 {# タグID7「取扱商品」の判定とテキスト表示 #}
  179.                 {% set hasHandlingTag = false %}
  180.                 {% for tag in Product.Tags %}
  181.                     {% if tag.id == 7 %}
  182.                         {% set hasHandlingTag = true %}
  183.                     {% endif %}
  184.                 {% endfor %}
  185.                 {% if hasHandlingTag and Product.tag7DisplayText is not empty %}
  186.                     <div class="handling-product-notice mt-3 p-3 border rounded bg-light">
  187.                         <p class="mb-0">{{ Product.tag7DisplayText|nl2br }}</p>
  188.                     </div>
  189.                 {% endif %}
  190.                 <div id="detail_cart_box" class="cart_area">
  191.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  192.                         {% if Product.stock_find %}
  193.                             {# 規格 #}
  194.                             {% if form.classcategory_id1 is defined %}
  195.                                 <ul id="detail_cart_box__cart_class_category_id" class="classcategory_list">
  196.                                     {# 規格1 #}
  197.                                     <li>
  198.                                         {{ form_widget(form.classcategory_id1) }}
  199.                                         {{ form_errors(form.classcategory_id1) }}
  200.                                     </li>
  201.                                     {# 規格2 #}
  202.                                     {% if form.classcategory_id2 is defined %}
  203.                                         <li>
  204.                                             {{ form_widget(form.classcategory_id2) }}
  205.                                             {{ form_errors(form.classcategory_id2) }}
  206.                                         </li>
  207.                                     {% endif %}
  208.                                 </ul>
  209.                             {% endif %}
  210.                             {# 数量 #}
  211.                             <dl id="detail_cart_box__cart_quantity" class="quantity">
  212.                                 <dt>数量</dt>
  213.                                 <dd>
  214.                                     {{ form_widget(form.quantity) }}
  215.                                     {{ form_errors(form.quantity) }}
  216.                                 </dd>
  217.                             </dl>
  218.                             <div class="extra-form">
  219.                                 {% for f in form.getIterator %}
  220.                                     {% if f.vars.name matches '[^plg*]' %}
  221.                                         {{ form_row(f) }}
  222.                                     {% endif %}
  223.                                 {% endfor %}
  224.                             </div>
  225.                             {# カートボタン #}
  226.                             <div id="detail_cart_box__button_area" class="btn_area">
  227.                                 <ul id="detail_cart_box__insert_button" class="row">
  228.                                     <li class="col-xs-12 col-sm-8"><button type="submit" id="add-cart" class="btn btn-primary btn-block prevention-btn prevention-mask add-cart">カートに入れる</button></li>
  229.                                 </ul>
  230.                                 <style type="text/css">
  231.                                     .reservation4-add-cart-disabled, .reservation4-add-cart { background-color: #30AADD !important; border-color: #30AADD !important;}
  232.                                 </style>
  233.                             </div> {#End div#detail_cart_box__button_area #}
  234.                         {% else %}
  235.                             {# 在庫がない場合は品切れボタンを表示 #}
  236.                             <div id="detail_cart_box__button_area" class="btn_area">
  237.                                 <ul class="row">
  238.                                     <li class="col-xs-12 col-sm-8">
  239.                                         <button type="button" class="btn btn-default btn-block" disabled="disabled">ただいま品切れ中です</button>
  240.                                     </li>
  241.                                 </ul>
  242.                                 <div class="link-line">再入荷のお知らせはLINE@(<a href="https://line.me/R/ti/p/%40fal2540t" target="_blank">お友だち登録後</a>)より、ご希望の商品名をトークよりいただけるとうれしいです。</div>
  243.                             </div> {#End div#detail_cart_box__button_area #}
  244.                         {% endif %} {#End stock find#}
  245.                         {{ form_rest(form) }}
  246.                     </form>
  247.                     <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  248.                         <div class="btn_area">
  249.                             {#Favorite product button#}
  250.                             {% if BaseInfo.option_favorite_product %}
  251.                                 <ul id="detail_cart_box__favorite_button" class="row">
  252.                                     {% if is_favorite == false %}
  253.                                         <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info-border btn-block prevention-btn prevention-mask"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入りに追加</button></li>
  254.                                     {% else %}
  255.                                         <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info-border btn-block" disabled="disabled"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入りに追加済みです</button></li>
  256.                                     {% endif %}
  257.                                 </ul>
  258.                             {% endif %}
  259.                         </div>
  260.                     </form>
  261.                 </div>
  262.                 <!--▲買い物かご-->
  263.                 <!--★商品説明★-->
  264.                 <p id="detail_not_stock_box__description_detail" class="item_comment ec-productRole__tags">{{ Product.description_detail|raw|nl2br }}</p>
  265.                 <!--▼商品コード-->
  266.                 <p id="detail_description_box__item_range_code" class="item_code" style="padding-bottom:0;">商品コード: <span id="item_code_default">
  267.                         {{ Product.code_min }}
  268.                         {% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}
  269.                         </span> </p>
  270.                 <!--▲商品コード-->
  271.                 <!--▼重さ・サイズ係数-->
  272.                 <div id="product_weight_size" class="product_weight_size">
  273.                     <!-- product_weight_size -->
  274.                     {{ include('Product/weight_size.twig') }}
  275.                 </div>
  276.                 <!--▲重さ・サイズ係数▲-->
  277.             </div>
  278.             <!-- /.item_detail -->
  279.         </section>
  280.         <!--詳細ここまで-->
  281.     </div>
  282.     {# フリーエリア #}
  283.     {% if Product.freearea %}
  284.         <div id="sub_area" class="row">
  285.             <div class="col-sm-10 col-sm-offset-1">
  286.                 <div id="detail_free_box__freearea" class="freearea">{{ include(template_from_string(Product.freearea)) }}</div>
  287.             </div>
  288.         </div>
  289.     {% endif %}
  290. </div>
  291.     <!-- ▲item_detail▲ -->
  292. {% endblock %}