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 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.         // 規格2に選択肢を割り当てる。
  81.         function fnSetClassCategories(form, classcat_id2_selected) {
  82.             var $form = $(form);
  83.             var product_id = $form.find('input[name=product_id]').val();
  84.             var $sele1 = $form.find('select[name=classcategory_id1]');
  85.             var $sele2 = $form.find('select[name=classcategory_id2]');
  86.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  87.         }
  88.         {% if form.classcategory_id2 is defined %}
  89.         fnSetClassCategories(
  90.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  91.         );
  92.         {% elseif form.classcategory_id1 is defined %}
  93.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  94.         {% endif %}
  95.     </script>
  96.     <script>
  97.         $(function() {
  98.             // bfcache無効化
  99.             $(window).bind('pageshow', function(event) {
  100.                 if (event.originalEvent.persisted) {
  101.                     location.reload(true);
  102.                 }
  103.             });
  104.             $('.item_visual').slick({
  105.                 dots: false,
  106.                 arrows: false,
  107.                 responsive: [{
  108.                     breakpoint: 768,
  109.                     settings: {
  110.                         dots: true
  111.                     }
  112.                 }]
  113.             });
  114.             $('.slideThumb').on('click', function() {
  115.                 var index = $(this).attr('data-index');
  116.                 $('.item_visual').slick('slickGoTo', index, false);
  117.             })
  118.         });
  119.     </script>
  120.     <script>
  121.         $(function() {
  122.             $('.add-cart').on('click', function(event) {
  123.                 {% if form.classcategory_id1 is defined %}
  124.                 // 規格1フォームの必須チェック
  125.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  126.                     $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  127.                     return true;
  128.                 } else {
  129.                     $('#classcategory_id1')[0].setCustomValidity('');
  130.                 }
  131.                 {% endif %}
  132.                 {% if form.classcategory_id2 is defined %}
  133.                 // 規格2フォームの必須チェック
  134.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  135.                     $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
  136.                     return true;
  137.                 } else {
  138.                     $('#classcategory_id2')[0].setCustomValidity('');
  139.                 }
  140.                 {% endif %}
  141.                 // 個数フォームのチェック
  142.                 if ($('#quantity').val() < 1) {
  143.                     $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
  144.                     return true;
  145.                 } else {
  146.                     $('#quantity')[0].setCustomValidity('');
  147.                 }
  148.                 event.preventDefault();
  149.                 $form = $('#form1');
  150.                 $.ajax({
  151.                     url: $form.attr('action'),
  152.                     type: $form.attr('method'),
  153.                     data: $form.serialize(),
  154.                     dataType: 'json',
  155.                     beforeSend: function(xhr, settings) {
  156.                         // Buttonを無効にする
  157.                         $('.add-cart').prop('disabled', true);
  158.                     }
  159.                 }).done(function(data) {
  160.                     // レスポンス内のメッセージをalertで表示
  161.                     $.each(data.messages, function() {
  162.                         $('#ec-modal-header').html(this);
  163.                     });
  164.                     $('#ec-modal-checkbox').prop('checked', true);
  165.                     // カートブロックを更新する
  166.                     $.ajax({
  167.                         url: "{{ url('block_cart') }}",
  168.                         type: 'GET',
  169.                         dataType: 'html'
  170.                     }).done(function(html) {
  171.                         $('.ec-headerRole__cart').html(html);
  172.                         $(".ec-cartNavi__badge_menu").html( $('.ec-headerNaviRole .ec-cartNavi__badge').text() );
  173.                     });
  174.                 }).fail(function(data) {
  175.                     alert('{{ 'front.product.add_cart_error'|trans }}');
  176.                 }).always(function(data) {
  177.                     // Buttonを有効にする
  178.                     $('.add-cart').prop('disabled', false);
  179.                 });
  180.             });
  181.         });
  182.     </script>
  183.     {% if BaseInfo.option_colorbox is not null %}
  184.     <script src="{{ asset('assets/js/jquery.colorbox/jquery.colorbox-min.js') }}"></script>
  185.     <script type="text/javascript">
  186.         $(document).ready(function() {
  187.             $(".cbox").colorbox({maxWidth:'100%',maxHeight:'100%',speed:'200'});
  188.         });
  189.     </script>
  190.     {% endif %}
  191.     {% if BaseInfo.option_thumbnail == 1 %}
  192.     <!-- ▼【商品画像】カスタマイズ -->
  193.     <script>
  194.         $(function(){
  195.             $('.main_visual').css('display', 'block');
  196.             $('.main_visual').slick({
  197.                 dots: false,
  198.                 arrows: false,
  199.                 autoplay: true,
  200.                 autoplaySpeed:5000,
  201.                 speed: 300,
  202.                 asNavFor: '.main_visual-thumbnails'
  203.             })
  204.         
  205.             $('.main_visual-thumbnails').css('display', 'block');
  206.             $('.main_visual-thumbnails').slick({
  207.                 slidesToShow: 3,
  208.                 arrows: false,
  209.                 asNavFor: '.main_visual',
  210.                 focusOnSelect: true
  211.             })
  212.         });
  213.     </script>
  214.     {% endif %}
  215.     {# ▼規格表示javascript #}
  216.     {% include 'Product/option_detailclass_script.twig' %}
  217. {% endblock %}
  218. {% block main %}
  219.     <div class="ec-productRole">
  220.         {# 関連カテゴリ #}
  221.         {% if Product.ProductCategories is not empty %}
  222.             <div class="ec-productRole__category">
  223.                 <div>{{ 'front.product.related_category'|trans }}</div>
  224.                 {% for ProductCategory in Product.ProductCategories %}
  225.                     <ul>
  226.                         <li>
  227.                             {% for Category in ProductCategory.Category.path %}
  228.                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  229.                                 <span>></span>{% endif -%}
  230.                             {% endfor %}
  231.                         </li>
  232.                     </ul>
  233.                 {% endfor %}
  234.             </div>
  235.         {% endif %}
  236.         <div class="ec-grid2">
  237.             <div class="ec-grid2__cell">
  238.                 <div class="ec-sliderItemRole">
  239.                     {% if BaseInfo.option_thumbnail == 1 %}
  240.                         <ul class="main_visual" style="display:none;">
  241.                         {% for ProductImage in Product.ProductImage %}
  242.                             <li class="item">
  243.                                 {% if BaseInfo.option_colorbox is not null %}
  244.                                     <a href="{{ asset(ProductImage, 'save_image') }}" class="cbox"><img src="{{ asset(ProductImage, 'save_image') }}"></a>
  245.                                 {% else %}
  246.                                     <img src="{{ asset(ProductImage, 'save_image') }}">
  247.                                 {% endif %}
  248.                             </li>
  249.                         {% else %}
  250.                             <li class="item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></li>
  251.                         {% endfor %}
  252.                         </ul>
  253.                         {% if Product.ProductImage|length > 1 %}
  254.                             <ul class="main_visual-thumbnails" style="display:none;">
  255.                                 {% for ProductImage in Product.ProductImage %}
  256.                                 <li class="item">
  257.                                     <img src="{{ asset(ProductImage, 'save_image') }}">
  258.                                 </li>
  259.                                 {% endfor %}
  260.                             </ul>
  261.                         {% endif %}
  262.                     {% else %}
  263.                         <div class="item_visual">
  264.                             {% for ProductImage in Product.ProductImage %}
  265.                                 <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  266.                             {% else %}
  267.                                 <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  268.                             {% endfor %}
  269.                         </div>
  270.                         <div class="item_nav">
  271.                             {% for ProductImage in Product.ProductImage %}
  272.                                 <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  273.                             {% endfor %}
  274.                         </div>
  275.                     {% endif %}
  276.                 </div>
  277.             </div>
  278.             <div class="ec-grid2__cell">
  279.                 <div class="ec-productRole__profile">
  280.                     {# 商品名 #}
  281.                     <div class="ec-productRole__title">
  282.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  283.                     </div>
  284.                     {# タグ #}
  285.                     <ul class="ec-productRole__tags">
  286.                         {% for Tag in Product.Tags %}
  287.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  288.                         {% endfor %}
  289.                     </ul>
  290.                     {# 通常価格 #}
  291.                     {% if Product.hasProductClass -%}
  292.                         <div class="ec-productRole__priceRegular">
  293.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  294.                                 <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  295.                                 <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  296.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  297.                                 <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  298.                                 <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  299.                             {% endif %}
  300.                         </div>
  301.                     {% else %}
  302.                         {% if Product.getPrice01Max is not null %}
  303.                             <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  304.                             <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
  305.                         {% endif %}
  306.                     {% endif %}
  307.                     {# 販売価格 #}
  308.                     <div class="ec-productRole__price">
  309.                         {% if Product.hasProductClass -%}
  310.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  311.                                 <div class="ec-price">
  312.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  313.                                     <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  314.                                 </div>
  315.                             {% else %}
  316.                                 <div class="ec-price">
  317.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  318.                                     <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  319.                                 </div>
  320.                             {% endif %}
  321.                         {% else %}
  322.                             <div class="ec-price">
  323.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  324.                                 <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
  325.                             </div>
  326.                         {% endif %}
  327.                     </div>
  328.                     {# 商品コード #}
  329.                     {% if Product.code_min is not empty %}
  330.                         <div class="ec-productRole__code">
  331.                             {{ 'front.product.code'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  332.                         </div>
  333.                     {% endif %}
  334.                     
  335.                     <div class="ec-productRole__feature">{{ Product.description_detail|raw|nl2br }}
  336.                     </div>
  337.                     {# ↓■期間限定③/⑤ #}
  338.                     {% if (Product.arrival_date is not empty and Product.arrival_date >= date()) or (Product.endsell_date is not empty and Product.endsell_date < date()) %}
  339.                         <div class="text-danger" style="margin:10px 0;">
  340.                             期間限定商品:現在ご購入いただけません。
  341.                         </div>
  342.                     {% else %}
  343.                     {# ↑■期間限定 #}
  344.                         <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  345.                         {# ▼商品設定[0] and 規格1が存在する場合 #}
  346.                         {% if Product.option_class == "0" and form.classcategory_id1 is defined %}
  347.                         {# ▼商品設定[1] and 規格1が存在する場合 #}
  348.                         {% elseif Product.option_class == 1 and form.classcategory_id1 is defined %}
  349.                             {% include 'Product/option_detailclass1.twig' %}
  350.                         {# ▼商品設定[2] and 規格1が存在する場合 #}
  351.                         {% elseif Product.option_class == 2 and form.classcategory_id1 is defined %}
  352.                             {% include 'Product/option_detailclass2.twig' %}
  353.                         {# ▼店舗設定[1] and 規格1が存在する場合 #}
  354.                         {% elseif BaseInfo.option_detailclass == 1 and form.classcategory_id1 is defined %}
  355.                             {% include 'Product/option_detailclass1.twig' %}
  356.                         {# ▼店舗設定[2] and 規格1が存在する場合 #}
  357.                         {% elseif BaseInfo.option_detailclass == 2 and form.classcategory_id1 is defined %}
  358.                             {% include 'Product/option_detailclass2.twig' %}
  359.                         {% endif %}
  360.                         {# ▼規格1が存在する商品設定[1](規格ごとカートボタン)では、通常のカートボタンを表示しない #}
  361.                         {% if Product.option_class == 1 and form.classcategory_id1 is defined %}
  362.                         {# ▼商品設定[1]以外 or 店舗設定[1]以外 or 規格1が存在しない場合、通常のカートボタンを表示する #}
  363.                         {% elseif (Product.option_class == "0" and form.classcategory_id1 is defined) or (Product.option_class == 2 and form.classcategory_id1 is defined) or BaseInfo.option_detailclass != 1 or form.classcategory_id1 is not defined %}
  364.                             {# ▼プルダウン時に表示 #}
  365.                             {% if BaseInfo.option_detailclass == "0" or Product.option_class == "0" or form.classcategory_id1 is not defined %}
  366.                                 {% include 'Product/option_detailclass0.twig' %}
  367.                             {% endif %}
  368.                             {% if Product.stock_find %}
  369.                                 <div class="ec-productRole__actions">
  370.                                     {% if form.classcategory_id1 is defined %}
  371.                                         <div class="ec-select">
  372.                                             {{ form_widget(form.classcategory_id1) }}
  373.                                             {{ form_errors(form.classcategory_id1) }}
  374.                                         </div>
  375.                                         {% if form.classcategory_id2 is defined %}
  376.                                             <div class="ec-select">
  377.                                                 {{ form_widget(form.classcategory_id2) }}
  378.                                                 {{ form_errors(form.classcategory_id2) }}
  379.                                             </div>
  380.                                         {% endif %}
  381.                                     {% endif %}
  382.                                     <div class="ec-numberInput"><span>{{ 'common.quantity'|trans }}</span>
  383.                                         {{ form_widget(form.quantity) }}
  384.                                         {{ form_errors(form.quantity) }}
  385.                                     </div>
  386.                                 </div>
  387.                                 <div class="ec-productRole__btn">
  388.                                     <button type="submit" class="ec-blockBtn--action add-cart">
  389.                                         {{ 'front.product.add_cart'|trans }}
  390.                                     </button>
  391.                                 </div>
  392.                             {% else %}
  393.                                 <div class="ec-productRole__btn">
  394.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  395.                                         {{ 'front.product.out_of_stock'|trans }}
  396.                                     </button>
  397.                                 </div>
  398.                             {% endif %}
  399.                         {% endif %}
  400.                         
  401.                         {# ▼設定[0](通常プルダウン)以外は、CSSで非表示 #}
  402.                         {% if (Product.option_class == 1 and form.classcategory_id1 is defined) or (Product.option_class == 2 and form.classcategory_id1 is defined) %}
  403.                             <div style="display:none;">
  404.                         {% elseif (Product.option_class == "0" and form.classcategory_id1 is defined) or BaseInfo.option_detailclass != 0 %}
  405.                             <div style="display:none;">
  406.                         {% endif %}
  407.                         
  408.                             {{ form_rest(form) }}
  409.                             
  410.                         {% if (Product.option_class == 1 and form.classcategory_id1 is defined) or (Product.option_class == 2 and form.classcategory_id1 is defined) %}
  411.                             </div>
  412.                         {% elseif (Product.option_class == "0" and form.classcategory_id1 is defined) or BaseInfo.option_detailclass != 0 %}
  413.                             </div>
  414.                         {% endif %}
  415.                         </form>
  416.                     {% endif %}{# ←■期間限定④/⑤ #}
  417.                     
  418.                     <div class="ec-modal">
  419.                         <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
  420.                         <div class="ec-modal-overlay">
  421.                             <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
  422.                             <div class="ec-modal-wrap">
  423.                                 <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
  424.                                 <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
  425.                                 <div class="ec-modal-box">
  426.                                     <div class="ec-role">
  427.                                         <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</label>
  428.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
  429.                                     </div>
  430.                                 </div>
  431.                             </div>
  432.                         </div>
  433.                     </div>
  434.                     {% if BaseInfo.option_favorite_product %}
  435.                         <form action="{{ url('product_add_favorite', {'id':Product.id}) }}" method="post">
  436.                             <div class="ec-productRole__btn">
  437.                                 {% if is_favorite == false %}
  438.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  439.                                         {{ 'front.product.add_favorite'|trans }}
  440.                                     </button>
  441.                                 {% else %}
  442.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  443.                                             disabled="disabled">{{ 'front.product.add_favorite_alrady'|trans }}
  444.                                     </button>
  445.                                 {% endif %}
  446.                             </div>
  447.                         </form>
  448.                     {% endif %}
  449.                     <div class="share_products">
  450.                     </div>
  451.                     {# YouTube #}
  452.                     {% if Product.youtube is not empty %}
  453.                         <div id="detail_youtube_area">
  454.                             <div class="embed-container">
  455.                                 <iframe src="https://www.youtube.com/embed/{{ Product.youtube }}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
  456.                             </div>
  457.                         </div>
  458.                     {% endif %}
  459.                 </div>
  460.             </div>
  461.         </div>
  462.         
  463.         {{ eccube_block_plg_product_item() }}
  464.     
  465.         {% if Product.freearea %}
  466.              <div class="ec-productRole__description">
  467.                  {{ include(template_from_string(Product.freearea)) }}
  468.             </div>
  469.         {% endif %}
  470.     </div>
  471. {% endblock %}