templates/pages/online_shop.html.twig line 1

Open in your IDE?
  1. {# Js code is in assets/js/elements/cartProducts.ts #}
  2. {% import "elements/pagesElements/_online_shop_filter.html.twig" as filter %}
  4. {% extends 'layout/user_base.html.twig' %}
  5. {% block title %}
  6.     {{ "Boutique en ligne" | trans }}
  7. {% endblock %}
  8. {% block body %}
  9.     <div class="loading-absolute filter_loading" style="opacity: 0;">
  10.         <div class="d-flex align-items-center">
  11.             <img src="{{ asset('app/spinner_white.svg') }}" alt="spinner" width="25">
  12.             <p class="m-0 ps-2">{{ "Filtre en cours..." | trans }}</p>
  13.         </div>
  14.     </div>
  15.     <div class="container mt-5">
  16.         <div class="row">
  17.             <div class="col-lg-3">
  18.                 {{ render(controller('App\\Controller\\App\\WidgetController::onlineShopFilter')) }}
  19.             </div>
  20.             <div class="col-lg-9 mt-4 mt-lg-0">
  22.                 <div class="middle-line">
  23.                     <h2 class="section-title middle-line-text">{{ "Boutique en ligne" | trans }}</h2>
  24.                 </div>
  25.                 <div class="row">
  26.                     <div class="col-lg-12">
  27.                         <input type="text" placeholder="{{ "Rechercher un produit" | trans }}"
  28.                                class="form-control mb-2"
  29.                                 {{ q_search is defined and q_search is not null and q_search != "" ? "value=" ~ q_search : "" }}
  30.                                id="q_value">
  31.                     </div>
  32.                     <div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
  33.                         <div class="dropdown">
  34.                             <button class="btn btn-light dropdown-toggle w-100 btn-dropdown-no-icon" type="button"
  35.                                     id="dropdownMenuButton1"
  36.                                     data-bs-toggle="dropdown" aria-expanded="false"
  37.                                     data-bs-auto-close="outside"
  38.                             >
  39.                                 <span class="d-flex justify-content-between align-items-center">
  40.                                     <label for="triage">{{ "Marque" | trans }}</label>
  41.                                     <i class="fa fa-chevron-down text-dark" style="font-size: 12px"></i>
  42.                                 </span>
  43.                             </button>
  44.                             <div class="dropdown-menu dropdown-menu-brand w-100 p-2"
  45.                                  aria-labelledby="dropdownMenuButton1">
  46.                                 <div app-brand-filter></div>
  47.                             </div>
  48.                         </div>
  49.                     </div>
  50.                     <div class="col-md-6 col-lg-4 d-none d-lg-block">
  51.                         <div class="dropdown">
  52.                             <button class="btn btn-light dropdown-toggle w-100 btn-dropdown-no-icon" type="button"
  53.                                     id="dropdownMenuButton1"
  54.                                     data-bs-toggle="dropdown" aria-expanded="false">
  55.                                 <span class="d-flex justify-content-between align-items-center">
  56.                                     <label for="triage">{{ "Prix" | trans }}</label>
  57.                                     <i class="fa fa-chevron-down text-dark" style="font-size: 12px"></i>
  58.                                 </span>
  60.                             </button>
  61.                             <div class="dropdown-menu w-100 p-2" aria-labelledby="dropdownMenuButton1">
  62.                                 {{ filter.slider() }}
  63.                             </div>
  64.                         </div>
  65.                     </div>
  66.                     <div class="col-md-6 col-lg-4">
  67.                         <div class="" style="width: 100%">
  68.                             <select class="form-select" name="trie" id="order">
  69.                                 <option value="0" {{ q_order == "0" ? "selected" : "" }}>{{ "Prix croissant" | trans }}</option>
  70.                                 <option value="1" {{ q_order == "1" ? "selected" : "" }}>{{ "Prix décroissant" | trans }}</option>
  71.                                 <option value="2" {{ q_order == "2" ? "selected" : "" }}>{{ "Meilleurs ventes" | trans }}</option>
  72.                             </select>
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.                 <div class="products-list main">
  77.                     <div data-unpoly-product-cart></div>
  78.                     <div class="row mt-5">
  79.                         {% for product in products %}
  80.                             {{ include('elements/pagesElements/products/_product.html.twig', {product: product, column: "col-6 col-lg-4"}) }}
  81.                         {% else %}
  82.                             <div class="card text-center h-100">
  83.                                 <div class="card-body p-4 p-sm-5">
  84.                                     <p class="lead mt-4 text-800 font-sans-serif fw-semi-bold">{{ "Aucun produit trouvé" | trans }}</p>
  85.                                     <hr>
  86.                                     <p>{{ "Essayer avec d'autre critère pour trouver le produit que vous recherchiez." | trans }}</p>
  87.                                 </div>
  88.                             </div>
  89.                         {% endfor %}
  90.                     </div>
  91.                     <div class="d-flex justify-content-center mt-4">
  92.                         {{ knp_pagination_render(products, 'elements/pagination/_app_pagination.html.twig', {}, {"target": ".main"}) }}
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98. {% endblock %}
  100. {% block javascripts %}
  101.     {{ parent() }}
  102.     {{ encore_entry_script_tags('online_shop') }}
  103. {% endblock %}