app/template/default/Product/list.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.         .mod-form-select.form-select {
  13.             width: 100% !important;
  14.         }
  15.     </style>
  16. {% endblock %}
  17. {% block javascript %}
  18.     <script>
  19.         eccube.productsClassCategories = {
  20.             {% for Product in pagination %}
  21.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  22.             {% endfor %}
  23.         };
  24.         $(function() {
  25.             // 表示件数を変更
  26.             $('.disp-number').change(function() {
  27.                 var dispNumber = $(this).val();
  28.                 $('#disp_number').val(dispNumber);
  29.                 $('#pageno').val(1);
  30.                 $("#form1").submit();
  31.             });
  32.             // 並び順を変更
  33.             $('.order-by').change(function() {
  34.                 var orderBy = $(this).val();
  35.                 $('#orderby').val(orderBy);
  36.                 $('#pageno').val(1);
  37.                 $("#form1").submit();
  38.             });
  39.             $('.add-cart').on('click', function(e) {
  40.                 var $form = $(this).parents('li').find('form');
  41.                 // 個数フォームのチェック
  42.                 var $quantity = $form.parent().find('.quantity');
  43.                 if ($quantity.val() < 1) {
  44.                     $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  45.                     setTimeout(function() {
  46.                         loadingOverlay('hide');
  47.                     }, 100);
  48.                     return true;
  49.                 } else {
  50.                     $quantity[0].setCustomValidity('');
  51.                 }
  52.                 e.preventDefault();
  53.                 $.ajax({
  54.                     url: $form.attr('action'),
  55.                     type: $form.attr('method'),
  56.                     data: $form.serialize(),
  57.                     dataType: 'json',
  58.                     beforeSend: function(xhr, settings) {
  59.                         // Buttonを無効にする
  60.                         $('.add-cart').prop('disabled', true);
  61.                     }
  62.                 }).done(function(data) {
  63.                     // レスポンス内のメッセージをalertで表示
  64.                     $.each(data.messages, function() {
  65.                         $('#ec-modal-header').text(this);
  66.                     });
  67.                     $('.ec-modal').show()
  68.                     // カートブロックを更新する
  69.                     $.ajax({
  70.                         url: '{{ url('block_cart') }}',
  71.                         type: 'GET',
  72.                         dataType: 'html'
  73.                     }).done(function(html) {
  74.                         $('.ec-headerRole__cart').html(html);
  75.                     });
  76.                 }).fail(function(data) {
  77.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  78.                 }).always(function(data) {
  79.                     // Buttonを有効にする
  80.                     $('.add-cart').prop('disabled', false);
  81.                 });
  82.             });
  83.         });
  84.         $('.ec-modal-wrap').on('click', function(e) {
  85.             // モーダル内の処理は外側にバブリングさせない
  86.             e.stopPropagation();
  87.         });
  88.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  89.             $('.ec-modal').hide()
  90.         });
  91.     </script>
  92. {% endblock %}
  93. {% block main %}
  94.     <div
  95.         class="sub-container">
  96.         <!-- SUB H1 -->
  97.         <div
  98.             class="sub-h1Wrap">
  99.             <h1 class="sub-h1">
  100.                 {% if subtitle is defined and subtitle is not empty %}
  101.                     {# 「全商品」を除外 #}
  102.                     {% if Category is not null %}
  103.                         {# 親カテゴリ(「個人印鑑」など)を除外 #}
  104.                         {% if Category.Parent is not null %}
  105.                             {# 子カテゴリ(「実印」など)にのみ適用 #}
  106.                             {{ Category.Parent.name }}
  107.                         {% endif %}
  108.                     {% endif %}
  109.                     {{ subtitle }}
  110.                 {% elseif title is defined and title is not empty %}
  111.                     {{ title }}
  112.                 {% endif %}    
  113.             </h1>
  114.         </div>
  115.         <!-- /SUB H1 -->
  116.         <div
  117.             class="l-container">
  118.             <!-- パンくずリスト -->
  119.             <ol class="sub-breadcrumbs">
  120.                 <li>
  121.                     <a href="{{ url('homepage') }}">HOME</a>
  122.                 </li>
  123.                 {% if Category is not null %}
  124.                     <li>
  125.                         <a href="{{ url('product_list') }}">全商品</a>
  126.                     </li>
  127.                     {# 「全商品」を除外 #}
  128.                     {% if Category is not null %}
  129.                         {# 親カテゴリ(「個人印鑑」など)を除外 #}
  130.                         {% if Category.Parent is not null %}
  131.                             {# 子カテゴリ(「実印」など)にのみ適用 #}
  132.                             <li>
  133.                                 <a href="{{ url('product_list') }}?category_id={{ Category.Parent.id }}">{{ Category.Parent.name }}</a>
  134.                             </li>
  135.                         {% endif %}
  136.                     {% endif %}
  137.                 {% endif %}                
  138.                 <li>
  139.                     {% if subtitle is defined and subtitle is not empty %}
  140.                         {{ subtitle }}
  141.                     {% elseif title is defined and title is not empty %}
  142.                         {{ title }}
  143.                     {% endif %}
  144.                 </li>
  145.             </ol>
  146.             <!-- /パンくずリスト -->
  147.             <div
  148.                 class="l-2ColumnContainer">
  149.                 <!-- メインコンテンツ -->
  150.                 <div
  151.                     class="l-main">
  152.                     <!-- PAGE CONTENTS -->
  153.                     <div class="products productsList">
  154.                         {% if search_form.category_id.vars.errors|length > 0 %}
  155.                             <div class="ec-searchnavRole">
  156.                                 <p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
  157.                             </div>
  158.                         {% else %}
  159.                             <section>
  160.                                 <form name="form1" id="form1" method="get" action="?">
  161.                                     {% for item in search_form %}
  162.                                         <input type="hidden" id="{{ item.vars.id }}" name="{{ item.vars.full_name }}" {% if item.vars.value is not empty %} value="{{ item.vars.value }}" {% endif %}/>
  163.                                     {% endfor %}
  164.                                 </form>
  165.                                 
  166.                                 <h2 class="mod-hl-01 productsList-hl">
  167.                                     <span class="isJp">{% if subtitle is defined and subtitle is not empty %}{{ subtitle }}{% elseif title is defined and title is not empty %}{{ title }}{% endif %}</span>
  168.                                 </h2>        
  169.                                 {% if pagination.totalItemCount > 0 %}
  170.                                     <!-- 並び替えform -->
  171.                                     <div class="productsList-sort-setting">
  172.                                         <form>
  173.                                             {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'mod-form-select disp-number'}}) }}
  174.                                             {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'mod-form-select order-by'}}) }}
  175.                                         </form>
  176.                                     </div>
  177.                                     <!-- /並び替えform -->
  178.                                 {% endif %}
  179.                                 {% if pagination.totalItemCount > 0 %}
  180.                                     <div class="productsList-sort-result">
  181.                                         <div class="mod-products-list">
  182.                                             {% for Product in pagination %}
  183.                                                 <article class="productsBox">
  184.                                                     <a href="{{ url('product_detail', {'id': Product.id}) }}" class="productsBoxInner">
  185.                                                         <span class="productsBox-img">
  186.                                                             <span class="imgInner">
  187.                                                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %} class="imgObjectFitCover">
  188.                                                                 {% if not Product.stock_find %}
  189.                                                                     <div class="is-soldout">
  190.                                                                         <span>SOLD OUT</span>
  191.                                                                     </div>
  192.                                                                 {% endif %}
  193.                                                             </span>
  194.                                                         </span>
  195.                                                         <h3 class="productsBox-hl">{{ Product.name }}</h3>
  196.                                                         {% if Product.description_list %}
  197.                                                             <p>{{ Product.description_list|raw|nl2br }}</p>
  198.                                                         {% endif %}
  199.                                                         {# 通常価格 #}
  200.                                                         {% if Product.hasProductClass %}
  201.                                                             <div class="ec-productRole__priceRegular" style="margin-top:10px;">
  202.                                                                 {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  203.                                                                     <span class="ec-productRole__priceRegularPrice"><span class="price01-default" style="text-decoration:line-through;">{{ Product.getPrice01IncTaxMin|number_format }}円</span></span>
  204.                                                                     <span class="ec-productRole__priceRegularTax" style="text-decoration:line-through;">{{ '税込'|trans }}</span>
  205.                                                                 {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  206.                                                                     <span class="ec-productRole__priceRegularPrice"><span class="price01-default" style="text-decoration:line-through;">{{ Product.getPrice01IncTaxMin|number_format }}~ {{ Product.getPrice01IncTaxMax|number_format }}円</span></span>
  207.                                                                     <span class="ec-productRole__priceRegularTax" style="text-decoration:line-through;">{{ '税込'|trans }}</span>
  208.                                                                 {% endif %}
  209.                                                             </div>
  210.                                                         {% else %}
  211.                                                             {% if Product.getPrice01Max is not null %}
  212.                                                                 <span class="ec-productRole__priceRegularPrice" style="text-decoration:line-through;">{{ Product.getPrice01IncTaxMin|number_format }}円</span>
  213.                                                                 <span class="ec-productRole__priceRegularTax" style="text-decoration:line-through;">{{ '税込'|trans }}</span>
  214.                                                             {% endif %}
  215.                                                         {% endif %}
  216.                                                         {# 販売価格 #}
  217.                                                         <p class="productsBox-text" style="margin-top:0px;">
  218.                                                             {% if Product.hasProductClass %}
  219.                                                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  220.                                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  221.                                                                 {% else %}
  222.                                                                     {{ Product.getPrice02IncTaxMin|number_format }}
  223.                                                                     ~
  224.                                                                     {{ Product.getPrice02IncTaxMax|number_format }}
  225.                                                                 {% endif %}
  226.                                                             {% else %}
  227.                                                                 {{ Product.getPrice02IncTaxMin|number_format }}
  228.                                                             {% endif %}
  229.                                                             円<small class="isSmall">税込</small>
  230.                                                         </p>
  231.                                                     </a>
  232.                                                 </article>
  233.                                             {% endfor %}                                
  234.                                         </div>
  235.                                     </div>
  236.                                     {% include "pager.twig" with {'pages': pagination.paginationData} %}
  237.                                 {% endif %}
  238.                                 <!-- 最近チェックした商品 -->
  239.                                 {{ include('Block/items_checked.twig', ignore_missing = true) }}
  240.                                 <!-- /最近チェックした商品 -->                                
  241.                             </section>
  242.                         {% endif %}
  243.                     </div>
  244.                     <!-- /PAGE CONTENTS -->
  245.                 </div>
  246.                 <!-- /メインコンテンツ -->
  247.                 <!-- サイドメニュー -->
  248.                 {{ include('Block/l_sub.twig', ignore_missing = true) }}
  249.                 <!-- /サイドメニュー -->
  250.             </div>
  251.         </div>
  252.     </div>
  253.     <style>
  254.         .is-soldout{
  255.             background-color: rgba(0, 0, 0, 0.5);
  256.             text-align: center;
  257.             position: absolute;
  258.             color: #fff;
  259.             font-size: 1.8rem;
  260.             margin: 0 !important;
  261.             padding: 0 !important;
  262.             width: 100%;
  263.             height: 100%;
  264.         }
  265.         .is-soldout span{
  266.             position: relative;
  267.             display: block;
  268.             height: 100%;
  269.             top: 40%;
  270.         }
  271.         @media only screen and (min-width: 600px)and (max-width: 1023px){
  272.             .is-soldout{
  273.                 font-size: 1.3rem;
  274.             }
  275.         }
  276.     </style>
  277. {% endblock %}