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.     <link rel="stylesheet" href="/html/plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
  12. {% endblock %}
  13. {% block javascript %}
  14.     <script>
  15.         eccube.productsClassCategories = {
  16.             {% for Product in pagination %}
  17.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  18.             {% endfor %}
  19.         };
  20.         $(function() {
  21.             // 表示件数を変更
  22.             $('.disp-number').change(function() {
  23.                 var dispNumber = $(this).val();
  24.                 $('#disp_number').val(dispNumber);
  25.                 $('#pageno').val(1);
  26.                 $("#form1").submit();
  27.             });
  28.             // 並び順を変更
  29.             $('.order-by').change(function() {
  30.                 var orderBy = $(this).val();
  31.                 $('#orderby').val(orderBy);
  32.                 $('#pageno').val(1);
  33.                 $("#form1").submit();
  34.             });
  35.         });
  36.         $('.ec-modal-wrap').on('click', function(e) {
  37.             // モーダル内の処理は外側にバブリングさせない
  38.             e.stopPropagation();
  39.         });
  40.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  41.             $('.ec-modal').hide()
  42.         });
  43.     </script>
  44.     <script src="/html/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
  45. {% endblock %}
  46. {% block main %}
  47.     {% if search_form.category_id.vars.errors|length > 0 %}
  48.         <div class="ec-searchnavRole">
  49.             <p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
  50.         </div>
  51.     {% else %}
  52.         <div class="ec-searchnavRole">
  53.             <form name="form1" id="form1" method="get" action="?">
  54.                 {% for item in search_form %}
  55.                     <input type="hidden" id="{{ item.vars.id }}"
  56.                            name="{{ item.vars.full_name }}"
  57.                            {% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
  58.                 {% endfor %}
  59.             </form>
  60.             <div class="ec-searchnavRole__topicpath">
  61.                 <ol class="ec-topicpath">
  62.                     <li class="ec-topicpath__item"><a href="{{ url('product_list') }}">{{ '全て'|trans }}</a>
  63.                     </li>
  64.                     {% if Category is not null %}
  65.                         {% for Path in Category.path %}
  66.                             <li class="ec-topicpath__divider">|</li>
  67.                             <li class="ec-topicpath__item{% if loop.last %}--active{% endif %}"><a
  68.                                         href="{{ url('product_list') }}?category_id={{ Path.id }}">{{ Path.name }}</a>
  69.                             </li>
  70.                         {% endfor %}
  71.                     {% endif %}
  72.                     {% if Maker is not null %}
  73.                         <li class="ec-topicpath__divider">|</li>
  74.                         <li class="ec-topicpath__item--active"><a
  75.                                     href="{{ url('product_list') }}?maker_id={{ Maker.id }}">{{ Maker.name }}</a>
  76.                         </li>
  77.                     {% endif %}
  78.                     {% if search_form.vars.value and search_form.vars.value.name %}
  79.                         <li class="ec-topicpath__divider">|</li>
  80.                         <li class="ec-topicpath__item">{{ '「%name%」の検索結果'|trans({ '%name%': search_form.vars.value.name }) }}</li>
  81.                     {% endif %}
  82.                 </ol>
  83.             </div>
  84.             <div class="ec-searchnavRole__infos">
  85.                 <div class="ec-searchnavRole__counter">
  86.                     {% if pagination.totalItemCount > 0 %}
  87.                         {{ '<span class="ec-font-bold">%count%件</span><span>の商品が見つかりました</span>'|trans({ '%count%': pagination.totalItemCount })|raw }}
  88.                     {% else %}
  89.                         <span>{{ 'お探しの商品は見つかりませんでした'|trans }}</span>
  90.                     {% endif %}
  91.                 </div>
  92.                 {% if pagination.totalItemCount > 0 %}
  93.                     <div class="ec-searchnavRole__actions">
  94.                         <div class="ec-select">
  95.                             {{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number'}}) }}
  96.                             {{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
  97.                         </div>
  98.                     </div>
  99.                 {% endif %}
  100.             </div>
  101.         </div>
  102.         {% if pagination.totalItemCount > 0 %}
  103.             <div class="ec-shelfRole">
  104.                 <ul class="ec-shelfGrid">
  105.                     {% for Product in pagination %}
  106.                         <li class="ec-shelfGrid__item">
  107.                             {% if BaseInfo.option_favorite_product %}
  108.                              <div style="position:relative;top:29px;left:220px;">
  109.                                 <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  110.                                    <button type="submit" id="favorite" class="favorite">&#9825;</button>
  111.                                 </form>
  112.                              </div>
  113.                             {% endif %}
  114.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  115.                                 <p class="ec-shelfGrid__item-image">
  116.                                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  117.                                 </p>
  118.                                 <h5><strong>{{ Product.name }}</strong></h5>
  119.                                 <p class="price02-default">
  120.                                     {% if Product.hasProductClass %}
  121.                                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  122.                                             {{ Product.getPrice02IncTaxMin|number_format }}円
  123.                                         {% else %}
  124.                                             {{ Product.getPrice02IncTaxMin|number_format }}円  ~ {{ Product.getPrice02IncTaxMax|number_format }}円 
  125.                                         {% endif %}
  126.                                     {% else %}
  127.                                         {{ Product.getPrice02IncTaxMin|number_format }}円 ~ 
  128.                                     {% endif %}
  129.                                 </p>
  130.                             </a>
  131.                             {% if Product.stock_find %}
  132.                                 {% set form = forms[Product.id] %}
  133.                                 <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_detail', {id:Product.id}) }}" method="get">
  134.                                     <div class="ec-productRole__actions">
  135.                                         {% if form.classcategory_id1 is defined %}
  136.                                             <div class="ec-select">
  137.                                                 {{ form_widget(form.classcategory_id1) }}
  138.                                                 {{ form_errors(form.classcategory_id1) }}
  139.                                             </div>
  140.                                             {% if form.classcategory_id2 is defined %}
  141.                                                 <div class="ec-select">
  142.                                                     {{ form_widget(form.classcategory_id2) }}
  143.                                                     {{ form_errors(form.classcategory_id2) }}
  144.                                                 </div>
  145.                                             {% endif %}
  146.                                         {% endif %}
  147.                                         <div class="ec-numberInput" style="display:none;"><span>{{ '数量'|trans }}</span>
  148.                                             {{ form_errors(form.quantity) }}
  149.                                         </div>
  150.                                     </div>
  151.                                     <div class="ec-productRole__btn">
  152.                                         <button class="ec-blockBtn--action" >
  153.                                             {{ 'お見積もり詳細はこちら'|trans }}
  154.                                         </button>
  155.                                     </div>
  156.                                 </form>
  157.                             {% else %}
  158.                                 <div class="ec-productRole__btn">
  159.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  160.                                         {{ 'ただいま品切れ中です。'|trans }}
  161.                                     </button>
  162.                                 </div>
  163.                             {% endif %}
  164.                         </li>
  165.                     {% endfor %}
  166.                 </ul>
  167.             </div>
  168.             <div class="ec-pagerRole">
  169.                 {% include "pager.twig" with {'pages': pagination.paginationData} %}
  170.             </div>
  171.         {% endif %}
  172.     {% endif %}
  173. {% endblock %}