app/template/HF4002/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. {# セール実施用設定 #}
  9. {% set start_date = '2021-09-06'|date('Y-m-d') %}
  10. {% set end_date = '2021-09-27'|date('Y-m-d') %}
  11. {% set coupon_code = "eio100anniv" %}
  12. {% set sale_category_id = 174 %}
  13. {% if start_date <= date()|date('Y-m-d') and date()|date('Y-m-d') <= end_date %}
  14.     {% set campain_valid = true %}
  15. {% else %}
  16.     {% set campain_valid = false %}
  17. {% endif %}
  18. {# セール実施用設定 #}
  19. {% extends 'default_frame.twig' %}
  20. {% set body_class = 'product_page' %}
  21. {% block stylesheet %}
  22.     <style>
  23.         .slick-slider {
  24.             margin-bottom: 30px;
  25.         }
  26.         .slick-dots {
  27.             position: absolute;
  28.             bottom: -45px;
  29.             display: none !important;
  30.             width: 100%;
  31.             padding: 0;
  32.             list-style: none;
  33.             text-align: center;
  34.         }
  35.         .slick-dots li {
  36.             position: relative;
  37.             display: inline-block;
  38.             width: 20px;
  39.             height: 20px;
  40.             margin: 0 5px;
  41.             padding: 0;
  42.             cursor: pointer;
  43.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  57.         .slick-dots li button:hover,
  58.         .slick-dots li button:focus {
  59.             outline: none;
  60.         }
  61.         .slick-dots li button:hover:before,
  62.         .slick-dots li button:focus:before {
  63.             opacity: 1;
  64.         }
  65.         .slick-dots li button:before {
  66.             content: " ";
  67.             line-height: 20px;
  68.             position: absolute;
  69.             top: 0;
  70.             left: 0;
  71.             width: 12px;
  72.             height: 12px;
  73.             text-align: center;
  74.             opacity: .25;
  75.             background-color: black;
  76.             border-radius: 50%;
  77.         }
  78.         .slick-dots li.slick-active button:before {
  79.             opacity: .75;
  80.             background-color: black;
  81.         }
  82.         .slick-dots li button.thumbnail img {
  83.             width: 0;
  84.             height: 0;
  85.         }
  86.         @media only screen and (min-width: 768px){
  87.             .ec-sliderItemRole img{
  88.                 width: 400px!important;
  89.                 margin: auto;
  90.             }
  91.             .ec-productRole__description {
  92.                 margin-top: 0!important;
  93.                 padding-top: 0!important;
  94.                 /*font-size: 20px!important;*/
  95.             }
  96.         }
  97.         .ec-layoutRole__main{
  98.             margin-top: 10px!important;
  99.         }
  100.         .item_visual {
  101.             margin-bottom: 20px!important;
  102.         }
  103.         .ec-sliderItemRole {
  104.             margin-bottom: 10px!important;
  105.         }
  106.     </style>
  107. {% endblock %}
  108. {% block javascript %}
  109.     <script>
  110.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  111.         // 規格2に選択肢を割り当てる。
  112.         function fnSetClassCategories(form, classcat_id2_selected) {
  113.             var $form = $(form);
  114.             var product_id = $form.find('input[name=product_id]').val();
  115.             var $sele1 = $form.find('select[name=classcategory_id1]');
  116.             var $sele2 = $form.find('select[name=classcategory_id2]');
  117.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  118.         }
  119.         {% if form.classcategory_id2 is defined %}
  120.         fnSetClassCategories(
  121.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  122.         );
  123.         {% elseif form.classcategory_id1 is defined %}
  124.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  125.         {% endif %}
  126.     </script>
  127.     <script>
  128.         $(function() {
  129.             // bfcache無効化
  130.             $(window).bind('pageshow', function(event) {
  131.                 if (event.originalEvent.persisted) {
  132.                     location.reload(true);
  133.                 }
  134.             });
  135.             $('.item_visual').slick({
  136.                 dots: false,
  137.                 arrows: false,
  138.                 responsive: [{
  139.                     breakpoint: 768,
  140.                     settings: {
  141.                         dots: true
  142.                     }
  143.                 }]
  144.             });
  145.             $('.slideThumb').on('click', function() {
  146.                 var index = $(this).attr('data-index');
  147.                 $('.item_visual').slick('slickGoTo', index, false);
  148.             })
  149.         });
  150.     </script>
  151.     <script>
  152.         $(function() {
  153.             $('.add-cart').on('click', function(event) {
  154.                 {% if form.classcategory_id1 is defined %}
  155.                 // 規格1フォームの必須チェック
  156.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  157.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  158.                     return true;
  159.                 } else {
  160.                     $('#classcategory_id1')[0].setCustomValidity('');
  161.                 }
  162.                 {% endif %}
  163.                 {% if form.classcategory_id2 is defined %}
  164.                 // 規格2フォームの必須チェック
  165.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  166.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  167.                     return true;
  168.                 } else {
  169.                     $('#classcategory_id2')[0].setCustomValidity('');
  170.                 }
  171.                 {% endif %}
  172.                 // 個数フォームのチェック
  173.                 if ($('#quantity').val() < 1) {
  174.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  175.                     return true;
  176.                 } else {
  177.                     $('#quantity')[0].setCustomValidity('');
  178.                 }
  179.                 event.preventDefault();
  180.                 $form = $('#form1');
  181.                 $.ajax({
  182.                     url: $form.attr('action'),
  183.                     type: $form.attr('method'),
  184.                     data: $form.serialize(),
  185.                     dataType: 'json',
  186.                     beforeSend: function(xhr, settings) {
  187.                         // Buttonを無効にする
  188.                         $('.add-cart').prop('disabled', true);
  189.                     }
  190.                 }).done(function(data) {
  191.                     // レスポンス内のメッセージをalertで表示
  192.                     $.each(data.messages, function() {
  193.                         $('#ec-modal-header').html(this);
  194.                     });
  195.                     $('#ec-modal-checkbox').prop('checked', true);
  196.                     // カートブロックを更新する
  197.                     $.ajax({
  198.                         url: "{{ url('block_cart') }}",
  199.                         type: 'GET',
  200.                         dataType: 'html'
  201.                     }).done(function(html) {
  202.                         $('.ec-headerRole__cart').html(html);
  203.                     });
  204.                 }).fail(function(data) {
  205.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  206.                 }).always(function(data) {
  207.                     // Buttonを有効にする
  208.                     $('.add-cart').prop('disabled', false);
  209.                 });
  210.             });
  211.         });
  212.     </script>
  213. {% endblock %}
  214. {% block main %}
  215.     <div class="ec-productRole">
  216.         <div class="ec-grid2">
  217.             <div class="ec-grid2__cell w53">
  218.                 <div class="ec-sliderItemRole">
  219.                     <div class="item_visual">
  220.                         {% for ProductImage in Product.ProductImage %}
  221.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  222.                         {% else %}
  223.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
  224.                         {% endfor %}
  225.                     </div>
  226.                     <div class="item_nav">
  227.                         {% for ProductImage in Product.ProductImage %}
  228.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  229.                         {% endfor %}
  230.                     </div>
  231.                 </div>
  232.             </div>
  233.             
  234.             <div class="item_nav sp_only">
  235.                 {% for ProductImage in Product.ProductImage %}
  236.                     <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
  237.                 {% endfor %}
  238.             </div>            
  239.             <p id="cart_back_btn" class="ec-blockCartAreaBtn pagetop fas fa-shopping-cart-tpde"></p>
  240.             <div class="ec-grid2__cell w47" id="cart_area">
  241.                 <div class="ec-productRole__profile">
  242.                     {# 商品名 #}
  243.                     <div class="ec-productRole__title">
  244.                         <h1 class="ec-headingTitle">{{ Product.name }}</h1>
  245.                     </div>
  246.                     
  247.                     {# タグ #}
  248.                     
  249.                     <ul class="ec-productRole__tags">
  250.                         {% for Tag in Product.Tags %}
  251.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  252.                         {% endfor %}
  253.                     </ul>
  254.                     
  255.                     {# 通常価格 #}
  256.                     {% if Product.hasProductClass -%}
  257.                         <div class="ec-productRole__priceRegular">
  258.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  259.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  260.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  261.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  262.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  263.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  264.                             {% endif %}
  265.                         </div>
  266.                     {% else %}
  267.                         {% if Product.getPrice01Max is not null %}
  268.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  269.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  270.                         {% endif %}
  271.                     {% endif %}
  272.                     
  273.                     {# 販売価格 #}
  274.                     <div class="ec-productRole__price">
  275.                         {% if CustomerRank is null %}
  276.                             {% if Product.hasProductClass -%}
  277.                                 {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  278.                                     <div class="ec-price">
  279.                                         <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  280.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  281.                                     </div>
  282.                                 {% else %}
  283.                                     <div class="ec-price">
  284.                                         <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  285.                                         <span class="ec-price__tax">{{ '税込'|trans }}</span>
  286.                                     </div>
  287.                                 {% endif %}
  288.                             {% else %}
  289.                                 <div class="ec-price">
  290.                                     <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  291.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  292.                                 </div>
  293.                             {% endif %}
  294.                         {% else %}
  295.                             {% for key, value in CustomerPrices  %}
  296.                                 {% for key2, value2 in value  %}
  297.                                     {% for key3, value3 in value2  %}
  298.                                         {%  if value3.customer_rank_price_inc_tax > 0 %}
  299.                                         <div class="ec-price">
  300.                                             <span class="ec-price__tax">{{ CustomerRank.name }}価格</span><br>
  301.                                             <span class="ec-price__price ec-color-red">
  302.                                                 ¥{{ value3.customer_rank_price_inc_tax }}</span>
  303.                                             <span class="ec-price__tax">{{ '税込'|trans }}</span>
  304.                                         </div>
  305.                                         {% endif %}
  306.                                     {% endfor %}
  307.                                 {% endfor %}
  308.                             {% endfor %}
  309.                         {% endif %}
  310.                         
  311.                     </div>
  312.                     {# 商品コード #}
  313.                     {% if Product.code_min is not empty %}
  314.                         <div class="ec-productRole__code">
  315.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  316.                         </div>
  317.                     {% endif %}
  318.                     
  319.                       
  320.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  321.                         {% if Product.stock_find %}
  322.                             <div class="ec-productRole__actions">
  323.                                 {% if form.classcategory_id1 is defined %}
  324.                                     <div class="ec-select">
  325.                                         {{ form_widget(form.classcategory_id1) }}
  326.                                         {{ form_errors(form.classcategory_id1) }}
  327.                                     </div>
  328.                                     {% if form.classcategory_id2 is defined %}
  329.                                         <div class="ec-select">
  330.                                             {{ form_widget(form.classcategory_id2) }}
  331.                                             {{ form_errors(form.classcategory_id2) }}
  332.                                         </div>
  333.                                     {% endif %}
  334.                                 {% endif %}
  335.                                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  336.                                     {{ form_widget(form.quantity) }}
  337.                                     {{ form_errors(form.quantity) }}
  338.                                 </div>
  339.                             </div>
  340.                             <div class="ec-productRole__btn cart_btn">
  341.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  342.                                     {{ 'カートに入れる'|trans }}
  343.                                 </button>
  344.                             </div>
  345.                         {% else %}
  346.                             <div class="ec-productRole__btn cart_btn">
  347.                                 <button type="button" class="ec-blockBtn--action zero" disabled="disabled">
  348.                                     {{ '品切れ中です'|trans }}
  349.                                 </button>
  350.                             </div>
  351.                         {% endif %}
  352.                         {{ form_rest(form) }}
  353.                     </form>
  354.                     <div class="clearfix">    
  355.                         <div class="ec-modal ">
  356.                             <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
  357.                             <div class="ec-modal-overlay">
  358.                                 <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
  359.                                 <div class="ec-modal-wrap">
  360.                                     <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
  361.                                     <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  362.                                     <div class="ec-modal-box">
  363.                                         <div class="ec-role">
  364.                                             <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</label>
  365.                                             <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  366.                                         </div>
  367.                                     </div>
  368.                                 </div>
  369.                             </div>
  370.                         </div>
  371.                         {% if BaseInfo.option_favorite_product %}
  372.                             <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  373.                                 <div class="ec-productRole__btn fav_btn">
  374.                                     {% if is_favorite == false %}
  375.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel fa-heart fa">
  376.                                             {{ ''|trans }}
  377.                                         </button>
  378.                                     {% else %}
  379.                                         <button type="submit" id="favorite" class="ec-blockBtn--cancel comp fa-heart fa"
  380.                                                 disabled="disabled">{{ ''|trans }}
  381.                                         </button>
  382.                                     {% endif %}
  383.                                 </div>
  384.                             </form>
  385.                         {% endif %}
  386.                     </div>
  387.                     
  388.                     <div class="ec-productRole__description pd30">{{ Product.description_detail|raw|nl2br }}</div>
  389.                     
  390.                   {# 関連カテゴリ #}
  391.                     {% if Product.ProductCategories is not empty %}
  392.                         <div class="ec-productRole__category">
  393.                             <div>{{ '関連カテゴリ'|trans }}</div>
  394.                             {% for ProductCategory in Product.ProductCategories %}
  395.                                 <ul>
  396.                                     <li>
  397.                                         {% for Category in ProductCategory.Category.path %}
  398.                                             {% if Category.id != sale_category_id or campain_valid == true %}
  399.                                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  400.                                                 <span>></span>{% endif -%}
  401.                                             {% endif %}
  402.                                         {% endfor %}
  403.                                     </li>
  404.                                 </ul>
  405.                             {% endfor %}
  406.                         </div>
  407.                     {% endif %}                    
  408.                     
  409.                 </div>
  410.             </div>
  411.         </div>
  412.         {% if Product.freearea %}
  413.              <div class="ec-productRole__description">
  414.                  {{ include(template_from_string(Product.freearea)) }}
  415.             </div>
  416.         {% endif %}
  417.     </div>
  418. {% endblock %}