templates/website/page/hertiage-products.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% set metaParams = {
  3.     'title': page.metaTitle,
  4.     'description': page.metaDescription,
  5.     'keywords': page.metaDescription,
  6.     'ogImage': page.metaImage,
  7. } %}
  8. {% block meta %}
  9.     {% include '@web/parts/meta.html.twig' with metaParams %}
  10. {% endblock meta %}
  11. {% block title %}{{ page.metaTitle }}{% endblock title %}
  12. {% block body %}
  14.     <script>
  15.         function toggleFilters() {
  16.             const filters = document.getElementById('filtersContent');
  17.             filters.classList.toggle('active');
  18.         }
  19.     </script>
  21.     <section class="main-products-section">
  23.         <div class="container-fluid">
  24.             <div class="row">
  25.                 <div class="col-lg-10 m-auto">
  26.                     <ul class="wrapper-navigation">
  27.                         <li>
  28.                             <a href="{{ path('page_heritage') }}">
  29.                                 {{ 'Home'|trans }}
  30.                             </a>
  31.                         </li>
  32.                         <li>
  33.                             <span>{{ 'Products'|trans }}</span>
  34.                         </li>
  35.                     </ul>
  36.                     <h2 class="main-title">
  37.                         {{ 'Jewelry shop'|trans }}
  38.                     </h2>
  39.                     <div class="row">
  40.                         <div class="col-lg-3">
  41.                             <div class="filters-wrapper">
  42.                                 <button type="button" class="filter-toggle" onclick="toggleFilters()">
  43.         <span class="filter-toggle__icon">
  44.             <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
  45.                 <path d="M4 7H20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
  46.                 <path d="M7 12H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
  47.                 <path d="M10 17H14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
  48.             </svg>
  49.         </span>
  50.                                     <span class="filter-toggle__text">{{ 'Filter'|trans }}</span>
  51.                                 </button>
  53.                                 <div class="filters-content" id="filtersContent">
  54.                                     <form action="{{ path('page_heritage_products') }}">
  55.                                         <div class="custom-checkbox">
  56.                                             <h3>{{ 'Collection'|trans }}</h3>
  57.                                             <ul class="checkbox-list">
  58.                                                 {% for item in collection %}
  59.                                                     <li>
  60.                                                         <input
  61.                                                                 {% if collectionId == item.id %}checked{% endif %}
  62.                                                                 type="radio"
  63.                                                                 id="collection_{{ item.id }}"
  64.                                                                 name="collection"
  65.                                                                 value="{{ item.id }}"
  66.                                                                 onchange="this.form.submit()"
  67.                                                         >
  68.                                                         <label for="collection_{{ item.id }}">{{ item.title }}</label>
  69.                                                     </li>
  70.                                                 {% endfor %}
  71.                                             </ul>
  72.                                         </div>
  74.                                         <div class="custom-checkbox">
  75.                                             <h3>{{ 'Category'|trans }}</h3>
  76.                                             <ul class="checkbox-list">
  77.                                                 {% for item in category %}
  78.                                                     <li>
  79.                                                         <input
  80.                                                                 {% if item.id == categoryId %}checked{% endif %}
  81.                                                                 type="radio"
  82.                                                                 id="category_{{ item.id }}"
  83.                                                                 name="category"
  84.                                                                 value="{{ item.id }}"
  85.                                                                 onchange="this.form.submit()"
  86.                                                         >
  87.                                                         <label for="category_{{ item.id }}">{{ item.title }}</label>
  88.                                                     </li>
  89.                                                 {% endfor %}
  90.                                             </ul>
  91.                                         </div>
  92.                                     </form>
  93.                                 </div>
  94.                             </div>
  95.                         </div>
  96.                         <div class="col-lg-9">
  97.                             {% if products %}
  98.                                 <div class="wrapper-products">
  100.                                     {% for item in products %}
  101.                                         <div class="wrapper-item">
  102.                                             <div class="wrapper-image">
  103.                                                 <img src="{{ item.image }}" alt="">
  104.                                             </div>
  105.                                             <div class="wrapper-description">
  106.                                                 <a class="title"
  107.                                                    href="{{ path('page_heritage_product_view',{'id':item.id}) }}">
  108.                                                     {{ item.title }}
  109.                                                 </a>
  110.                                                 <h4>
  111.                                                     {{ item.price|number_format ~ 'դրամ'|trans }}
  112.                                                 </h4>
  113.                                                 <a class="read-btn main-shop-btn"
  114.                                                    href="{{ path('page_heritage_product_view',{'id':item.id}) }}">
  115.                                                     {{ 'ADD TO CARD'|trans }}
  116.                                                 </a>
  117.                                             </div>
  118.                                         </div>
  119.                                     {% endfor %}
  121.                                 </div>
  122.                             {% else %}
  123.                                 <div class="wrapper-empty-data">
  124.                                     <div class="empty-box">
  126.                                         <div class="empty-icon">
  127.                                             <svg width="70" height="70" viewBox="0 0 24 24" fill="none">
  128.                                                 <path d="M21 21L15.5 15.5" stroke="#273869" stroke-width="1.8" stroke-linecap="round"/>
  129.                                                 <circle cx="10" cy="10" r="6" stroke="#273869" stroke-width="1.8"/>
  130.                                                 <path d="M10 7V10L12 12" stroke="#273869" stroke-width="1.8" stroke-linecap="round"/>
  131.                                             </svg>
  132.                                         </div>
  134.                                         <h4>{{ 'Products not found'|trans }}</h4>
  136.                                         <p>{{ 'Try changing the filter or explore other collections.'|trans }}</p>
  138.                                     </div>
  139.                                 </div>
  140.                             {% endif %}
  141.                         </div>
  142.                     </div>
  143.                 </div>
  144.             </div>
  145.         </div>
  146.     </section>
  150. {% endblock %}