app/template/myufull1/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  4. http://www.lockon.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 product_page_detail' %}
  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 formActionAJAX(form, event) {
  122.     event.preventDefault();
  123.     $form = form;
  124.     $.ajax({
  125.       url: $form.attr('action'),
  126.       type: $form.attr('method'),
  127.       data: $form.serialize(),
  128.       dataType: 'json',
  129.       beforeSend: function(xhr, settings) {
  130.         // Buttonを無効にする
  131.         $('.add-cart').prop('disabled', true);
  132.       }
  133.     }).done(function(data) {
  134.       // レスポンス内のメッセージをalertで表示
  135.       $.each(data.messages, function() {
  136.         $('#ec-modal-header').html(this);
  137.       });
  138.       $('#ec-modal-checkbox').prop('checked', true);
  139.       // カートブロックを更新する
  140.       $.ajax({
  141.         url: "{{ url('block_cart') }}",
  142.         type: 'GET',
  143.         dataType: 'html'
  144.       }).done(function(html) {
  145.         $('.ec-headerRole__cart').html(html);
  146.       });
  147.     }).fail(function(data) {
  148.       alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  149.     }).always(function(data) {
  150.       // Buttonを有効にする
  151.       $('.add-cart').prop('disabled', false);
  152.       // floating cartを閉じる
  153.       $('#cartModal').modal('hide');
  154.     });
  155.   }
  156.   $(function() {
  157.     $('.add-cart').on('click', function(event) {
  158.       $form = $(this).closest("form");
  159.       {% if form.classcategory_id1 is defined %}
  160.         // 規格1フォームの必須チェック
  161.         if ($form.prop('id') == 'form1') {
  162.           if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  163.             $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  164.             return true;
  165.           } else {
  166.             $('#classcategory_id1')[0].setCustomValidity('');
  167.           }
  168.         }
  169.         // floating cart
  170.         if ($form.prop('id') == 'form2') {
  171.           if ($('#classcategory_id1-a').val() == '__unselected' || $('#classcategory_id1-a').val() == '') {
  172.             $('#classcategory_id1-a')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  173.             return true;
  174.           } else {
  175.             $('#classcategory_id1-a')[0].setCustomValidity('');
  176.           }
  177.         }
  178.       {% endif %}
  179.       {% if form.classcategory_id2 is defined %}
  180.         // 規格2フォームの必須チェック
  181.         if ($form.prop('id') == 'form1') {
  182.           if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  183.             $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  184.             return true;
  185.           } else {
  186.             $('#classcategory_id2')[0].setCustomValidity('');
  187.           }
  188.         }
  189.         // floating cart
  190.         if ($form.prop('id') == 'form2') {
  191.           if ($('#classcategory_id2-a').val() == '__unselected' || $('#classcategory_id2-a').val() == '') {
  192.             $('#classcategory_id2-a')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  193.             return true;
  194.           } else {
  195.             $('#classcategory_id2-a')[0].setCustomValidity('');
  196.           }
  197.         }
  198.       {% endif %}
  199.       // 個数フォームのチェック
  200.       if ($form.prop('id') == 'form1') {
  201.         if ($('#quantity').val() < 1) {
  202.           $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  203.           return true;
  204.         } else {
  205.           $('#quantity')[0].setCustomValidity('');
  206.         }
  207.       }
  208.       // floating cart
  209.       if ($form.prop('id') == 'form2') {
  210.         if ($('#quantity-a').val() < 1) {
  211.           $('#quantity-a')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  212.           return true;
  213.         } else {
  214.           $('#quantity-a')[0].setCustomValidity('');
  215.         }
  216.       }
  217.       formActionAJAX($form, event);
  218.     });
  219.   });
  220. </script>
  221. <script type="text/javascript">
  222.   {# URLに「act=addCart」が GET で渡された場合、自動でカートに入れる処理  ※商品規格には未対応 #}
  223.   $(function() {
  224.     var actParam = getUrlParam('act');
  225.     if(actParam == 'addCart') {
  226.       $('#form1').submit();
  227.     }
  228.   });
  229. </script>
  230. {% endblock %}
  231. {% block main %}
  232.   <div class="ec-productRole">
  233.     <div class="ec-grid2">
  234.       <div class="ec-grid2__cell">
  235.         <div class="ec-sliderItemRole">
  236.           <div class="item_visual">
  237.             {% for ProductImage in Product.ProductImage %}
  238.               <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" loading="lazy"></div>
  239.             {% else %}
  240.               <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" loading="lazy"></div>
  241.             {% endfor %}
  242.           </div>
  243.           <div class="item_nav">
  244.             {% for ProductImage in Product.ProductImage %}
  245.               <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" loading="lazy"></div>
  246.             {% endfor %}
  247.           </div>
  248.         </div>
  249.       </div>
  250.       <div class="ec-grid2__cell">
  251.         <div class="ec-productRole__profile">
  252.           {# 商品名 #}
  253.           <div class="ec-productRole__title">
  254.             <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  255.           </div>
  256.           {# タグ #}
  257.           {# {% if Product.Tags is not empty %} #}
  258.           <ul class="ec-productRole__tags">
  259.             {% for Tag in Product.Tags %}
  260.               <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  261.             {% endfor %}
  262.           </ul>
  263.           {# {% endif %} #}
  264.           
  265.           {# 通常価格 #}
  266.           {% if Product.hasProductClass -%}
  267.             <div class="ec-productRole__priceRegular">
  268.               {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  269.                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  270.                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  271.               {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  272.                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  273.                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  274.               {% endif %}
  275.             </div>
  276.           {% else %}
  277.             {% if Product.getPrice01Max is not null %}
  278.               <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  279.               <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  280.             {% endif %}
  281.           {% endif %}
  282.           {# 販売価格 #}
  283.           <div class="ec-productRole__price">
  284.             {% if Product.hasProductClass -%}
  285.               <div class="ec-price">
  286.                 <span class="ec-price__price price02-default">
  287.                   {% for name, price in Product.getClassNamePrice02IncTaxs %}
  288.                     {% if loop.last %}
  289.                       <div>{{ price|price }} <small>({{name}})</small></div>
  290.                     {% else %}
  291.                       <div>{{ price|price }} <small>({{name}})</small>&nbsp;/&nbsp;</div>
  292.                     {% endif %}
  293.                   {% endfor %}
  294.                   <span class="ec-price__tax">{{ '※全て税込'|trans }}</span>
  295.                 </span>
  296.               </div>
  297.             {% else %}
  298.               <div class="ec-price">
  299.                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  300.                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  301.               </div>
  302.             {% endif %}
  303.           </div>
  304.           {% if Product.description_detail %}  
  305.             <div class="ec-productRole__description description_detail">
  306.               {# {{ Product.description_detail|raw|nl2br }} #}
  307.               {% set tplPath = "_Product/#{Product.description_detail|striptags|trim}.twig" %}
  308.               {% set content %}{% include tplPath ignore missing %}{% endset %}
  309.               {% if content is not empty and content is defined %} 
  310.                   {{ content|raw }}
  311.               {% else %}
  312.                   {{ Product.description_detail|raw }}
  313.               {% endif %}
  314.             </div>
  315.           {% endif %}
  316.           {# 商品コード #}
  317. {# 
  318.           {% if Product.code_min is not empty %}
  319.             <div class="ec-productRole__code">
  320.               {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  321.             </div>
  322.           {% endif %}
  323.  #}
  324.           {# 関連カテゴリ #}
  325.           {# {% if Product.ProductCategories is not empty %}
  326.             <div class="ec-productRole__category">
  327.               <div>{{ '関連カテゴリ'|trans }}</div>
  328.               {% for ProductCategory in Product.ProductCategories %}
  329.                 <ul>
  330.                   <li>
  331.                     {% for Category in ProductCategory.Category.path %}
  332.                       <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  333.                       <span>></span>{% endif -%}
  334.                     {% endfor %}
  335.                   </li>
  336.                 </ul>
  337.               {% endfor %}
  338.             </div>
  339.           {% endif %} #}
  340.           <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  341.             {% if Product.stock_find %}
  342.               <div class="ec-productRole__actions">
  343.                 {% if form.classcategory_id1 is defined %}
  344.                   <div class="ec-select">
  345.                     {{ form_widget(form.classcategory_id1) }}
  346.                     {{ form_errors(form.classcategory_id1) }}
  347.                   </div>
  348.                   {% if form.classcategory_id2 is defined %}
  349.                     <div class="ec-select">
  350.                       {{ form_widget(form.classcategory_id2) }}
  351.                       {{ form_errors(form.classcategory_id2) }}
  352.                     </div>
  353.                   {% endif %}
  354.                 {% endif %}
  355.                 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  356.                   {{ form_widget(form.quantity) }}
  357.                   {{ form_errors(form.quantity) }}
  358.                 </div>
  359.               </div>
  360.               <div class="ec-productRole__btn">
  361.                 <button type="submit" class="ec-blockBtn--action add-cart">
  362.                   <i class="fas fa-plus-circle"></i> {{ 'カートに入れる'|trans }}
  363.                 </button>
  364.               </div>
  365.             {% else %}
  366.               <div class="ec-productRole__btn">
  367.                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  368.                   <i class="fas fa-exclamation-triangle"></i> {{ 'ただいま品切れ中です。'|trans }}
  369.                 </button>
  370.               </div>
  371.             {% endif %}
  372.             {{ form_rest(form) }}
  373.           </form>
  374.           
  375.           <div class="ec-modal">
  376.             <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
  377.             <div class="ec-modal-overlay">
  378.               <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
  379.               <div class="ec-modal-wrap">
  380.                 <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
  381.                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  382.                 <div class="ec-modal-box">
  383.                   <div class="ec-role">
  384.                     <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</label>
  385.                     <a href="{{ url('cart') }}" class="ec-inlineBtn--action"><i class="fas fa-shopping-cart fa-fw"></i> {{ 'カートへ進む'|trans }}</a>
  386.                   </div>
  387.                 </div>
  388.               </div>
  389.             </div>
  390.           </div>
  391.           {% if BaseInfo.option_favorite_product %}
  392.             <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  393.               <div class="ec-productRole__btn">
  394.                 {% if is_favorite == false %}
  395.                   <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  396.                     <i class="fas fa-heart fa-fw"></i> {{ 'お気に入りに追加'|trans }}
  397.                   </button>
  398.                 {% else %}
  399.                   <button type="submit" id="favorite" class="ec-blockBtn--cancel" disabled="disabled">
  400.                     <i class="fas fa-heart fa-fw"></i> {{ 'お気に入りに追加済です'|trans }}
  401.                   </button>
  402.                 {% endif %}
  403.               </div>
  404.             </form>
  405.           {% endif %}
  406.           <div class="ec-productRole__btn pt-4 mb-5 text-center">
  407.             <a href="{{ url('product_contact') }}?product_id={{ Product.id }}" class="btn btn-sm mx-auto" target="_blank">この商品について問い合せる</a>
  408.           </div>
  409.       </div>
  410.     </div>
  411.   </div>
  412.   {% if Product.freearea %}
  413.     <div class="ec-productRole__description freearea">
  414.       {% set tplPath = "_Product/#{Product.freearea|striptags|trim}.twig" %}
  415.       {% set content %}{% include tplPath ignore missing %}{% endset %}
  416.       {% if content is not empty and content is defined %} 
  417.           {{ content|raw }}
  418.       {% else %}
  419.           {{ include(template_from_string(Product.freearea)) }}
  420.       {% endif %}
  421.     </div>
  422.   {% endif %}
  423.   
  424. {#   {% if Product.freearea %}
  425.     <div class="ec-productRole__description freearea">
  426.       {{ include(template_from_string(Product.freearea)) }}
  427.     </div>
  428.   {% endif %} #}
  429. </div>
  430. <div id="blockRelatedProduct"></div>
  431. {% endblock %}