app/template/default/Product/list.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {# style #}
  16. {% block stylesheet %}
  17.     <link rel="stylesheet" href="{{ asset('assets/css/product-list.css') }}">
  18. {% endblock %}
  20. {% block javascript %}
  21. <script>
  22. (function() {
  23.     // Lấy URL hiện tại và tạo URLSearchParams
  24.     function getCurrentUrlParams() {
  25.         const urlParams = new URLSearchParams(window.location.search);
  26.         return urlParams;
  27.     }
  29.     // Cập nhật URL với category filters và reload
  30.     function updateCategoryFilters() {
  31.         const checkboxes = document.querySelectorAll('.filter-option__checkbox');
  32.         const urlParams = getCurrentUrlParams();
  34.         // Xóa tất cả category_filter[] cũ (có thể có nhiều giá trị)
  35.         const keysToDelete = [];
  36.         urlParams.forEach(function(value, key) {
  37.             if (key === 'category_filter[]' || key.startsWith('category_filter')) {
  38.                 keysToDelete.push(key);
  39.             }
  40.         });
  41.         keysToDelete.forEach(function(key) {
  42.             urlParams.delete(key);
  43.         });
  45.         // Thu thập các category IDs đã được chọn
  46.         const selectedCategoryIds = [];
  47.         checkboxes.forEach(function(checkbox) {
  48.             if (checkbox.checked) {
  49.                 selectedCategoryIds.push(checkbox.value);
  50.             }
  51.         });
  53.         // Chỉ thêm category_filter[] nếu có ít nhất một checkbox được chọn
  54.         if (selectedCategoryIds.length > 0) {
  55.             selectedCategoryIds.forEach(function(categoryId) {
  56.                 urlParams.append('category_filter[]', categoryId);
  57.             });
  58.         }
  60.         // Reset về trang 1 khi filter
  61.         urlParams.set('pageno', '1');
  63.         // Tạo URL mới
  64.         const queryString = urlParams.toString();
  65.         const newUrl = queryString
  66.             ? window.location.pathname + '?' + queryString
  67.             : window.location.pathname;
  69.         // Reload page với query params mới
  70.         window.location.href = newUrl;
  71.     }
  73.     // Khôi phục trạng thái checkbox từ URL và xử lý nút search
  74.     document.addEventListener('DOMContentLoaded', function() {
  75.         const checkboxes = document.querySelectorAll('.filter-option__checkbox');
  76.         const searchButton = document.querySelector('.btn-search');
  78.         // Khôi phục trạng thái checkbox từ URL
  79.         const urlParams = getCurrentUrlParams();
  80.         const selectedCategories = urlParams.getAll('category_filter[]');
  82.         checkboxes.forEach(function(checkbox) {
  83.             // Set checked nếu category ID có trong URL
  84.             if (selectedCategories.includes(checkbox.value)) {
  85.                 checkbox.checked = true;
  86.             }
  87.             // Không lắng nghe sự kiện change trên checkbox nữa
  88.         });
  90.         // Lắng nghe sự kiện click trên nút search
  91.         if (searchButton) {
  92.             searchButton.addEventListener('click', function() {
  93.                 updateCategoryFilters();
  94.             });
  95.         }
  96.     });
  97. })();
  98. </script>
  99. {% endblock %}
  101. {% block main %}
  103.  <body>
  104.   <!-- breadcrumb section -->
  105.   <div class="breadcrumb-section">
  106.     <div class="container-1360 border-box px-40">
  107.       <nav class="breadcrumb">
  108.         <a href="#" class="breadcrumb__item text-black">ホーム</a>
  109.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  110.         <a href="#" class="breadcrumb__item text-black">商品一覧</a>
  111.       </nav>
  112.     </div>
  113.   </div>
  115.   <!-- product list section -->
  116.   <div class="container-1200">
  117.     <div class="product-list-wrapper">
  118.       <div class="product-list-left">
  119.         {% if searchable_categories is defined and searchable_categories|length > 0 %}
  120.           {% for group in searchable_categories %}
  121.             <div class="filter-group">
  122.               <div class="filter-group__header">{{ group.parent.name }}</div>
  123.               <div class="filter-group__options">
  124.                 {% if group.children|length > 0 %}
  125.                   {% for child in group.children %}
  126.                     <label class="filter-option">
  127.                       <input type="checkbox"
  128.                              class="filter-option__checkbox"
  129.                              name="category_filter[]"
  130.                              value="{{ child.id }}"
  131.                              data-category-id="{{ child.id }}">
  132.                       <span class="filter-option__label">{{ child.name }}</span>
  133.                     </label>
  134.                   {% endfor %}
  135.                 {% else %}
  136.                   {# Nếu parent category cũng có is_searchable và không có children, hiển thị parent #}
  137.                   <label class="filter-option">
  138.                     <input type="checkbox"
  139.                            class="filter-option__checkbox"
  140.                            name="category_filter[]"
  141.                            value="{{ group.parent.id }}"
  142.                            data-category-id="{{ group.parent.id }}">
  143.                     <span class="filter-option__label">{{ group.parent.name }}</span>
  144.                   </label>
  145.                 {% endif %}
  146.               </div>
  147.             </div>
  148.           {% endfor %}
  149.         {% endif %}
  150.         <button class="btn-primary btn-search w-100">
  151.             <span>検索する</span>
  152.             <svg class="btn-search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  153.             <rect width="24" height="24" rx="12" fill="black"/>
  154.             <path d="M16.252 12.001L16.249 12.0039L16.252 12.0068L11.7266 16.5312L10.5957 15.4004L13.1943 12.8027H7.72852V11.2031H13.1924L10.5957 8.60742L11.7266 7.47656L16.252 12.001Z" fill="#FBE800"/>
  155.             </svg>
  156.         </button>
  157.       </div>
  158.       <!-- bottom line -->
  159.       <div class="bottom-line container-mobile"></div>
  160.       <!-- Product List Right -->
  161.       <div class="product-list-right">
  162.         <div class="product-grid" id="product-grid">
  163.           {% if pagination.totalItemCount > 0 %}
  164.             {% for Product in pagination %}
  165.               <div class="product-item">
  166.                 <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-card-small">
  167.                   <div class="product-card-small__image">
  168.                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  169.                     <div class="product-card-small__arrow">
  170.                         <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  171.                     </div>
  172.                   </div>
  173.                 </a>
  174.                 <div class="product-item__info">
  175.                   <a href="{{ url('product_detail', {'id': Product.id}) }}">
  176.                     <h4 class="product-item__title">{{ Product.name }}</h4>
  177.                   </a>
  178.                   <div class="product-item__price">
  179.                     <span class="price-symbol">¥</span>
  180.                     <span class="price-amount">
  181.                       {% if Product.hasProductClass %}
  182.                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  183.                           {{ Product.getPrice02IncTaxMin|price }}
  184.                         {% else %}
  185.                           {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  186.                         {% endif %}
  187.                       {% else %}
  188.                         {{ Product.getPrice02IncTaxMin|price }}
  189.                       {% endif %}
  190.                     </span>
  191.                     <span class="price-tax">(税込)</span>
  192.                   </div>
  193.                 </div>
  194.               </div>
  195.             {% endfor %}
  196.           {% else %}
  197.             <span>{{ 'front.product.search__product_not_found'|trans }}</span>
  198.           {% endif %}
  199.         </div>
  200.         <!-- Pagination -->
  201.         <div class="pagination-product-list-wrapper">
  202.           <div class="pagination-product-list" style="margin: 0 auto;">
  203.             {% include "Block/_pagination.twig" with {'pages': pagination.paginationData} %}
  204.           </div>
  205.         </div>
  206.       </div>
  207.     </div>
  208.   </div>
  211.  </body>
  213. {% endblock %}