templates/home/listing.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block body %}
  5.     <!-- Start Banner Area -->
  6.     <section class="banner-area organic-breadcrumb">
  7.         <div class="container">
  8.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  9.                 <div class="col-first">
  10.                     <h1>Page de listage de produit</h1>
  11.                     <nav class="d-flex align-items-center">
  12.                         <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span>
  13.                         </a>
  14.                         <a href="javascript:void(0);">Liste des produits</a>
  15.                     </nav>
  16.                 </div>
  17.             </div>
  18.         </div>
  19.     </section>
  20.     <!-- End Banner Area -->
  22.     <div class="container">
  23.         <div class="row">
  24.             <div class="col-xl-3 col-lg-4 col-md-5">
  25.                 <!-- Bouton toggle sidebar mobile -->
  26.                 <button class="btn btn-outline-primary w-100 d-md-none mb-3 listing-sidebar-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#listingSidebarCollapse" aria-expanded="false" aria-controls="listingSidebarCollapse">
  27.                     <i class="lnr lnr-menu me-2"></i>Filtres et catégories
  28.                     <i class="lnr lnr-chevron-down ms-2 toggle-icon"></i>
  29.                 </button>
  31.                 <!-- Sidebar avec collapse -->
  32.                 <div class="collapse d-md-block" id="listingSidebarCollapse">
  33.                     <div class="sidebar-categories">
  34.                         <div class="head">Catégories</div>
  35.                         <ul class="main-categories">
  36.                             <li class="main-nav-list">
  37.                                 <a href="{{ path('ui_listing') }}" class="category-link {% if not currentCategory %}active{% endif %}">
  38.                                     <span class="lnr lnr-tag"></span>Toutes les catégories
  39.                                     <span class="number">({{ totalProducts }})</span>
  40.                                 </a>
  41.                             </li>
  42.                             {% for category in categories %}
  43.                                 <li class="main-nav-list">
  44.                                     <a href="{{ path('ui_listing', {'category': category.slug}) }}" class="category-link {% if currentCategory == category.slug %}active{% endif %}" data-category="{{ category.slug }}">
  45.                                         <span class="lnr lnr-tag"></span>
  46.                                         {{ category.name }}
  47.                                         <span class="number">({{ category.products|length }})</span>
  48.                                     </a>
  49.                                 </li>
  50.                             {% else %}
  51.                                 <li class="main-nav-list">
  52.                                     <span>Aucune catégorie</span>
  53.                                 </li>
  54.                             {% endfor %}
  55.                         </ul>
  56.                     </div>
  57.                     <div class="sidebar-filter mt-50" id="brandsFilter">
  58.                         <div class="top-filter-head">Filtres</div>
  59.                         <div class="common-filter">
  60.                             <div class="head">Marques</div>
  61.                             <ul class="brand-list" id="brandList">
  62.                                 <li class="filter-list">
  63.                                     <input class="pixel-radio" type="radio" id="all-brands" name="brand" checked>
  64.                                     <label for="all-brands">Toutes les marques</label>
  65.                                 </li>
  66.                                 {% for brand in brands %}
  67.                                     <li class="filter-list">
  68.                                         <input class="pixel-radio" type="radio" id="brand-{{ brand.id }}" name="brand" value="{{ brand.slug }}">
  69.                                         <label for="brand-{{ brand.id }}">{{ brand.name }}<span>({{ brand.getActiveProductsCount() }})</span>
  70.                                         </label>
  71.                                     </li>
  72.                                 {% endfor %}
  73.                             </ul>
  74.                         </div>
  75.                         <!-- Filtres avancés -->
  76.                         <div class="common-filter">
  77.                             <div class="head">Boutiques</div>
  78.                             <div id="shopsFilter">
  79.                                 <form action="#">
  80.                                     <ul
  81.                                         class="shop-list" id="shopList"><!-- Les boutiques seront chargées dynamiquement -->
  82.                                     </ul>
  83.                                 </form>
  84.                             </div>
  85.                         </div>
  87.                         <div class="common-filter">
  88.                             <div class="head">Condition ({{ conditions|length }})</div>
  89.                             <ul class="condition-list" id="conditionList">
  90.                                 <li class="filter-list">
  91.                                     <input class="pixel-radio" type="radio" id="all-conditions" name="condition" checked>
  92.                                     <label for="all-conditions">Toutes les conditions</label>
  93.                                 </li>
  94.                                 {% for condition in conditions %}
  95.                                     <li class="filter-list">
  96.                                         <input class="pixel-radio" type="radio" id="condition-{{ condition.id }}" name="condition" value="{{ condition.slug }}">
  97.                                         <label for="condition-{{ condition.id }}">{{ condition.name }}<span>({{ condition.getActiveProductsCount() }})</span>
  98.                                         </label>
  99.                                     </li>
  100.                                 {% else %}
  101.                                     <li class="filter-list">
  102.                                         <span class="text-muted">Aucune condition disponible</span>
  103.                                     </li>
  104.                                 {% endfor %}
  105.                             </ul>
  106.                         </div>
  108.                         <div class="common-filter">
  109.                             <div class="head">Produits vedettes</div>
  110.                             <form action="#">
  111.                                 <ul>
  112.                                     <li class="filter-list">
  113.                                         <input class="pixel-radio" type="radio" id="featured-all" name="featured" checked>
  114.                                         <label for="featured-all">Tous les produits</label>
  115.                                     </li>
  116.                                     <li class="filter-list">
  117.                                         <input class="pixel-radio" type="radio" id="featured-only" name="featured" value="true">
  118.                                         <label for="featured-only">Produits vedettes uniquement</label>
  119.                                     </li>
  120.                                 </ul>
  121.                             </form>
  122.                         </div>
  124.                         <div class="common-filter">
  125.                             <div class="head">Type de produit</div>
  126.                             <form action="#">
  127.                                 <ul>
  128.                                     <li class="filter-list">
  129.                                         <input class="pixel-radio" type="radio" id="digital-all" name="digital" checked>
  130.                                         <label for="digital-all">Tous les types</label>
  131.                                     </li>
  132.                                     <li class="filter-list">
  133.                                         <input class="pixel-radio" type="radio" id="digital-physical" name="digital" value="false">
  134.                                         <label for="digital-physical">Produits physiques</label>
  135.                                     </li>
  136.                                     <li class="filter-list">
  137.                                         <input class="pixel-radio" type="radio" id="digital-digital" name="digital" value="true">
  138.                                         <label for="digital-digital">Produits numériques</label>
  139.                                     </li>
  140.                                 </ul>
  141.                             </form>
  142.                         </div>
  144.                         <div class="common-filter">
  145.                             <div class="head">Disponibilité</div>
  146.                             <form action="#">
  147.                                 <ul>
  148.                                     <li class="filter-list">
  149.                                         <input class="pixel-radio" type="radio" id="availability-all" name="availability" checked>
  150.                                         <label for="availability-all">Tous</label>
  151.                                     </li>
  152.                                     <li class="filter-list">
  153.                                         <input class="pixel-radio" type="radio" id="availability-in-stock" name="availability" value="in_stock">
  154.                                         <label for="availability-in-stock">En stock</label>
  155.                                     </li>
  156.                                     <li class="filter-list">
  157.                                         <input class="pixel-radio" type="radio" id="availability-low-stock" name="availability" value="low_stock">
  158.                                         <label for="availability-low-stock">Stock faible</label>
  159.                                     </li>
  160.                                     <li class="filter-list">
  161.                                         <input class="pixel-radio" type="radio" id="availability-out-of-stock" name="availability" value="out_of_stock">
  162.                                         <label for="availability-out-of-stock">Rupture de stock</label>
  163.                                     </li>
  164.                                 </ul>
  165.                             </form>
  166.                         </div>
  168.                         <div class="common-filter">
  169.                             <div class="head">Note minimale</div>
  170.                             <form action="#">
  171.                                 <ul>
  172.                                     <li class="filter-list">
  173.                                         <input class="pixel-radio" type="radio" id="rating-all" name="rating" checked>
  174.                                         <label for="rating-all">Toutes les notes</label>
  175.                                     </li>
  176.                                     <li class="filter-list">
  177.                                         <input class="pixel-radio" type="radio" id="rating-4" name="rating" value="4">
  178.                                         <label for="rating-4">4 étoiles et plus</label>
  179.                                     </li>
  180.                                     <li class="filter-list">
  181.                                         <input class="pixel-radio" type="radio" id="rating-3" name="rating" value="3">
  182.                                         <label for="rating-3">3 étoiles et plus</label>
  183.                                     </li>
  184.                                     <li class="filter-list">
  185.                                         <input class="pixel-radio" type="radio" id="rating-2" name="rating" value="2">
  186.                                         <label for="rating-2">2 étoiles et plus</label>
  187.                                     </li>
  188.                                 </ul>
  189.                             </form>
  190.                         </div>
  192.                         <div class="common-filter">
  193.                             <div class="head">Poids</div>
  194.                             <div class="weight-range-area">
  195.                                 <div class="weight-inputs d-flex">
  196.                                     <div class="weight-input">
  197.                                         <label>Min (kg):</label>
  198.                                         <input type="number" id="weightMin" placeholder="0" step="0.1" min="0">
  199.                                     </div>
  200.                                     <div class="weight-input">
  201.                                         <label>Max (kg):</label>
  202.                                         <input type="number" id="weightMax" placeholder="100" step="0.1" min="0">
  203.                                     </div>
  204.                                 </div>
  205.                             </div>
  206.                         </div>
  208.                         <div class="common-filter">
  209.                             <div class="head">Couleur</div>
  210.                             <div id="colorsFilter">
  211.                                 <form action="#">
  212.                                     <ul
  213.                                         class="color-list" id="colorList"><!-- Les couleurs seront chargées dynamiquement -->
  214.                                     </ul>
  215.                                 </form>
  216.                             </div>
  217.                         </div>
  219.                         <div class="common-filter">
  220.                             <div class="head">Taille</div>
  221.                             <div id="sizesFilter">
  222.                                 <form action="#">
  223.                                     <ul
  224.                                         class="size-list" id="sizeList"><!-- Les tailles seront chargées dynamiquement -->
  225.                                     </ul>
  226.                                 </form>
  227.                             </div>
  228.                         </div>
  230.                         <div class="common-filter">
  231.                             <div class="head">Matériau</div>
  232.                             <div id="materialsFilter">
  233.                                 <form action="#">
  234.                                     <ul
  235.                                         class="material-list" id="materialList"><!-- Les matériaux seront chargés dynamiquement -->
  236.                                     </ul>
  237.                                 </form>
  238.                             </div>
  239.                         </div>
  242.                         <div class="common-filter">
  243.                             <div class="head">Prix</div>
  244.                             <div class="price-range-area">
  245.                                 <div id="price-range"></div>
  246.                                 <div class="value-wrapper d-flex">
  247.                                     <div class="price">Prix:</div>
  248.                                     <span>$</span>
  249.                                     <div id="lower-value"></div>
  250.                                     <div class="to">to</div>
  251.                                     <span>$</span>
  252.                                     <div id="upper-value"></div>
  253.                                 </div>
  254.                             </div>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.                 <!-- Fin du collapse sidebar -->
  259.             </div>
  260.             <div class="col-xl-9 col-lg-8 col-md-7">
  261.             <!-- Barre de tri et bouton de filtres -->
  262.             <div class="row mb-4">
  263.                 <div
  264.                     class="col-md-6 mb-3 mb-md-0">
  265.                     <!-- Bouton pour ouvrir le modal de filtres -->
  266.                     <button type="button" class="btn btn-lg d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#filtersModal" style="background: transparent; border: none; padding: 10px 16px; font-weight: 600; transition: all 0.3s ease;">
  267.                         <div class="filter-icon-circle d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; background: linear-gradient(135deg, #ffa200 0%, #ff8c00 100%); border-radius: 50%; border: 2px solid #ffa200; flex-shrink: 0; margin-right: 10px; box-shadow: 0 2px 8px rgba(255, 162, 0, 0.3);">
  268.                             <i class="lnr lnr-filter" style="font-size: 1.3rem; color: white; font-weight: bold;"></i>
  269.                         </div>
  270.                         <span style="font-size: 1.1rem; font-weight: 600; color: #333;">Filtres</span>
  271.                         <span class="badge bg-warning text-dark ms-2" id="activeFiltersCount" style="display: none; font-size: 0.85rem; padding: 4px 10px; border-radius: 12px; font-weight: 600;">0</span>
  272.                     </button>
  273.                 </div>
  274.                 <div class="col-md-6">
  275.                     <select class="form-select" id="sortSelect" onchange="applySorting()">
  276.                         <option value="newest" {% if currentSort == 'newest' %} selected {% endif %}>Plus récents</option>
  277.                         <option value="price_asc" {% if currentSort == 'price_asc' %} selected {% endif %}>Prix croissant</option>
  278.                         <option value="price_desc" {% if currentSort == 'price_desc' %} selected {% endif %}>Prix décroissant</option>
  279.                         <option value="name_asc" {% if currentSort == 'name_asc' %} selected {% endif %}>Nom A-Z</option>
  280.                         <option value="name_desc" {% if currentSort == 'name_desc' %} selected {% endif %}>Nom Z-A</option>
  281.                         <option value="popular" {% if currentSort == 'popular' %} selected {% endif %}>Plus populaires</option>
  282.                     </select>
  283.                 </div>
  284.             </div>
  286.             <!-- Start Best Seller -->
  287.             <section class="lattest-product-area pb-40 category-list">
  288.                 <div class="row" id="productsContainer">
  289.                     {% for product in products %}
  290.                         <div class="col-lg-4 col-md-6">
  291.                             <div class="single-product">
  292.                                 <div class="product-image-container mb-2" onmouseenter="showImageNav({{ product.id }})" onmouseleave="hideImageNav({{ product.id }})">
  293.                                     <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  294.                                         {% set allImages = product.images|default([]) %}
  295.                                         {% if product.variants is defined %}
  296.                                             {% for variant in product.variants %}
  297.                                                 {% if variant.isActive and variant.images is defined %}
  298.                                                     {% for variantImg in variant.images %}
  299.                                                         {% set allImages = allImages|merge([variantImg]) %}
  300.                                                     {% endfor %}
  301.                                                 {% endif %}
  302.                                             {% endfor %}
  303.                                         {% endif %}
  304.                                         {% if allImages|length > 0 %}
  305.                                             <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset(allImages[0]) }}" alt="{{ product.name }}">
  306.                                         {% else %}
  307.                                             <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset('ui/img/product/p1.jpg') }}" alt="{{ product.name }}">
  308.                                         {% endif %}
  309.                                     </a>
  311.                                     <!-- Boutons de navigation (visibles au survol) -->
  312.                                     {% set allImages = product.images|default([]) %}
  313.                                     {% if product.variants is defined %}
  314.                                         {% for variant in product.variants %}
  315.                                             {% if variant.isActive and variant.images is defined %}
  316.                                                 {% for variantImg in variant.images %}
  317.                                                     {% set allImages = allImages|merge([variantImg]) %}
  318.                                                 {% endfor %}
  319.                                             {% endif %}
  320.                                         {% endfor %}
  321.                                     {% endif %}
  322.                                     {% if allImages|length > 1 %}
  323.                                         <button class="img-nav-btn img-nav-left" id="img-left-{{ product.id }}" onclick="prevImage({{ product.id }})" style="display: none;">
  324.                                             <span class="lnr lnr-chevron-left"></span>
  325.                                         </button>
  326.                                         <button class="img-nav-btn img-nav-right" id="img-right-{{ product.id }}" onclick="nextImage({{ product.id }})" style="display: none;">
  327.                                             <span class="lnr lnr-chevron-right"></span>
  328.                                         </button>
  330.                                         <!-- Indicateurs de position -->
  331.                                         <div class="img-indicators" id="img-indicators-{{ product.id }}" style="display: none;">
  332.                                             {% for img in allImages %}
  333.                                                 <span class="indicator" id="indicator-{{ product.id }}-{{ loop.index0 }}" onclick="showImage({{ product.id }}, {{ loop.index0 }})"></span>
  334.                                             {% endfor %}
  335.                                         </div>
  336.                                     {% endif %}
  337.                                 </div>
  339.                                 <div class="product-details">
  340.                                     <a href="{{ path('ui_product_show', { slug: product.slug }) }}">
  341.                                         <h6>{{ product.name }}</h6>
  342.                                     </a>
  344.                                     <!-- Affichage de la boutique -->
  345.                                     <div class="shop-info">
  346.                                         <small class="text-muted">
  347.                                             <i class="lnr lnr-store"></i>
  348.                                             Vendu par :
  349.                                             {% if product.shop is defined and product.shop %}
  350.                                                 <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}" class="shop-link">
  351.                                                     {{ product.shop.name }}
  352.                                                 </a>
  353.                                             {% else %}
  354.                                                 <span class="text-muted">Boutique inconnue</span>
  355.                                             {% endif %}
  356.                                         </small>
  357.                                     </div>
  359.                                     <div class="price">
  360.                                         <h6>{{ product.price|number_format(2, '.', ' ') }}
  361.                                             HTG</h6>
  362.                                         {% if product.compareAtPrice %}
  363.                                             <h6 class="l-through">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  364.                                                 HTG</h6>
  365.                                         {% endif %}
  366.                                     </div>
  367.                                     <div class="prd-bottom">
  368.                                         <a href="javascript:void(0)" class="social-info add-to-cart" data-product-id="{{ product.id }}" data-qty="1">
  369.                                             <span class="ti-bag"></span>
  370.                                             <p class="hover-text">+ panier</p>
  371.                                         </a>
  372.                                         <a href="#" class="social-info wishlist-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleWishlist({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour ajouter aux favoris'); return false;" {% endif %}>
  373.                                             <span class="lnr lnr-heart"></span>
  374.                                             <p class="hover-text">Favoris</p>
  375.                                         </a>
  376.                                         <a href="#" class="social-info comparison-btn" data-product-id="{{ product.id }}" {% if app.user %} onclick="toggleComparison({{ product.id }}, this); return false;" {% else %} onclick="alert('Vous devez être connecté pour comparer des produits'); return false;" {% endif %}>
  377.                                             <span class="lnr lnr-sync"></span>
  378.                                             <p class="hover-text">Comparer</p>
  379.                                         </a>
  380.                                         <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="social-info">
  381.                                             <span class="lnr lnr-move"></span>
  382.                                             <p class="hover-text">Voir plus</p>
  383.                                         </a>
  384.                                     </div>
  385.                                 </div>
  386.                             </div>
  387.                         </div>
  388.                     {% else %}
  389.                         <div class="col-12">
  390.                             <p>Aucun produit disponible.</p>
  391.                         </div>
  392.                     {% endfor %}
  393.                 </div>
  395.                 <!-- Bouton Charger plus de produits -->
  396.                 {% if totalPages > currentPage %}
  397.                     <div class="text-center mt-4 mb-4" id="loadMoreContainer">
  398.                         <button type="button" class="btn btn-primary btn-lg" id="loadMoreBtn" onclick="loadMoreProducts()">
  399.                             <i class="lnr lnr-plus-circle me-2"></i>Charger plus de produits
  400.                         </button>
  401.                     </div>
  402.                 {% endif %}
  404.                 <!-- Message de fin -->
  405.                 <div id="noMoreProducts" class="text-center py-4" style="display: none;">
  406.                     <p class="text-muted">
  407.                         <i class="lnr lnr-checkmark-circle"></i>
  408.                         Tous les produits ont été chargés</p>
  409.                 </div>
  410.             </section>
  411.             <!-- End Best Seller -->
  412.         </div>
  413.     </div>
  414. </div>{% endblock %}{% block title %}Liste des produits | MaketOu{% endblock %}{% block stylesheets %}
  415. <style>
  416.     /* Styles pour la navigation des images */
  417.     .product-image-container {
  418.         position: relative;
  419.         overflow: hidden;
  420.         border-radius: 8px;
  421.     }
  423.     .img-nav-btn {
  424.         position: absolute;
  425.         top: 50%;
  426.         transform: translateY(-50%);
  427.         background: rgba(0, 0, 0, 0.6);
  428.         color: white;
  429.         border: none;
  430.         width: 35px;
  431.         height: 35px;
  432.         border-radius: 50%;
  433.         display: flex;
  434.         align-items: center;
  435.         justify-content: center;
  436.         cursor: pointer;
  437.         transition: all 0.3s ease;
  438.         z-index: 10;
  439.     }
  441.     .img-nav-btn:hover {
  442.         background: #095ad3;
  443.         transform: translateY(-50%) scale(1.1);
  444.     }
  446.     .img-nav-left {
  447.         left: 10px;
  448.     }
  450.     .img-nav-right {
  451.         right: 10px;
  452.     }
  454.     .img-indicators {
  455.         position: absolute;
  456.         bottom: 10px;
  457.         left: 50%;
  458.         transform: translateX(-50%);
  459.         display: flex;
  460.         gap: 5px;
  461.         z-index: 10;
  462.     }
  464.     .indicator {
  465.         width: 8px;
  466.         height: 8px;
  467.         border-radius: 50%;
  468.         background: rgba(255, 255, 255, 0.5);
  469.         cursor: pointer;
  470.         margin-bottom: 10px;
  471.         transition: all 0.3s ease;
  472.         border: 1px solid rgba(255, 255, 255, 0.3);
  473.     }
  475.     .indicator.active {
  476.         background: #ffa200;
  477.         border-color: #ffa200;
  478.         transform: scale(1.2);
  479.     }
  481.     .indicator:hover {
  482.         background: rgba(255, 255, 255, 0.8);
  483.     }
  485.     /* Styles pour l'affichage de la boutique */
  486.     .shop-info {
  487.         margin: 8px 0;
  488.         padding: 5px 0;
  489.         border-bottom: 1px solid #f0f0f0;
  490.     }
  492.     .shop-link {
  493.         color: #007bff;
  494.         text-decoration: none;
  495.         font-weight: 500;
  496.     }
  498.     .shop-link:hover {
  499.         color: #ffa200;
  500.         text-decoration: underline;
  501.     }
  503.     /* Animation pour le survol */
  504.     .product-image-container:hover .main-product-img {
  505.         transform: scale(1.05);
  506.         transition: transform 0.3s ease;
  507.     }
  509.     .main-product-img {
  510.         transition: transform 0.3s ease;
  511.         width: 100%;
  512.         height: 100%;
  513.         object-fit: cover; /* Recadre l'image pour remplir le conteneur */
  514.         object-position: center; /* Centre l'image */
  515.         display: block;
  516.     }
  518.     /* Styles pour les images des produits associés (Deals de la semaine) */
  519.     .related-product-img-container {
  520.         position: relative;
  521.         overflow: hidden;
  522.         border-radius: 8px;
  523.         width: 100%;
  524.         height: 200px; /* Hauteur fixe pour les produits associés */
  525.         background: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  526.     }
  528.     .related-product-img {
  529.         width: 100%;
  530.         height: 100%;
  531.         object-fit: cover; /* Recadre l'image pour remplir le conteneur */
  532.         object-position: center; /* Centre l'image */
  533.         display: block;
  534.         transition: transform 0.3s ease;
  535.     }
  537.     .related-product-img-container:hover .related-product-img {
  538.         transform: scale(1.05);
  539.     }
  541.     /* Styles pour l'image de catégorie dans les deals */
  542.     .category-banner-container {
  543.         display: block;
  544.         position: relative;
  545.         overflow: hidden;
  546.         border-radius: 8px;
  547.         width: 100%;
  548.         height: 400px; /* Hauteur fixe pour la bannière de catégorie */
  549.         background: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  550.     }
  552.     .category-banner-img {
  553.         width: 100%;
  554.         height: 100%;
  555.         object-fit: cover; /* Recadre l'image pour remplir le conteneur */
  556.         object-position: center; /* Centre l'image */
  557.         display: block;
  558.         transition: transform 0.3s ease;
  559.     }
  561.     .category-banner-container:hover .category-banner-img {
  562.         transform: scale(1.05);
  563.     }
  565.     /* Styles pour les images de la modal Quick Product View */
  566.     .quick-view-carousel .item {
  567.         width: 100%;
  568.         height: 400px; /* Hauteur fixe pour les images du carousel */
  569.         background-size: cover;
  570.         background-position: center;
  571.         background-repeat: no-repeat;
  572.         border-radius: 8px;
  573.     }
  575.     /* Contraindre le conteneur d'image pour maintenir les proportions */
  576.     .product-image-container {
  577.         position: relative;
  578.         overflow: hidden;
  579.         border-radius: 8px;
  580.         width: 200px;
  581.         aspect-ratio: 1 / 1; /* Conteneur carré */
  582.         background: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  583.     }
  585.     /* Styles pour le bouton de filtre amélioré */
  586.     .filter-icon-circle {
  587.         transition: all 0.3s ease;
  588.     }
  590.     button[data-bs-target="#filtersModal"]:hover .filter-icon-circle {
  591.         background: linear-gradient(135deg, #ff8c00 0%, #ff7700 100%) !important;
  592.         transform: rotate(15deg) scale(1.1);
  593.         box-shadow: 0 4px 15px rgba(255, 162, 0, 0.5);
  594.     }
  596.     button[data-bs-target="#filtersModal"]:hover {
  597.         transform: translateY(-2px);
  598.     }
  600.     button[data-bs-target="#filtersModal"]:active {
  601.         transform: translateY(0);
  602.     }
  604.     button[data-bs-target="#filtersModal"]:hover span {
  605.         color: #ffa200 !important;
  606.     }
  608.     /* Styles pour le modal de filtres */
  609.     #filtersModal .modal-body {
  610.         padding: 1.5rem;
  611.     }
  613.     #filtersModal .modal-body::-webkit-scrollbar {
  614.         width: 8px;
  615.     }
  617.     #filtersModal .modal-body::-webkit-scrollbar-track {
  618.         background: #f1f1f1;
  619.         border-radius: 4px;
  620.     }
  622.     #filtersModal .modal-body::-webkit-scrollbar-thumb {
  623.         background: #ffa200;
  624.         border-radius: 4px;
  625.     }
  627.     #filtersModal .modal-body::-webkit-scrollbar-thumb:hover {
  628.         background: #e69100;
  629.     }
  631.     #filtersModal .modal-footer {
  632.         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  633.     }
  635.     /* Styles pour les filtres avancés */
  636.     .weight-range-area {
  637.         padding: 15px 0;
  638.     }
  640.     .weight-inputs {
  641.         gap: 15px;
  642.         align-items: center;
  643.     }
  645.     .weight-input {
  646.         flex: 1;
  647.     }
  649.     .weight-input label {
  650.         display: block;
  651.         margin-bottom: 5px;
  652.         font-weight: 500;
  653.         color: #333;
  654.     }
  656.     .weight-input input {
  657.         width: 100%;
  658.         padding: 8px 12px;
  659.         border: 1px solid #ddd;
  660.         border-radius: 4px;
  661.         font-size: 14px;
  662.     }
  664.     .weight-input input:focus {
  665.         outline: none;
  666.         border-color: #ffa200;
  667.         box-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  668.     }
  670.     /* Styles pour les filtres dynamiques */
  671.     .shop-list,
  672.     .color-list,
  673.     .size-list,
  674.     .material-list,
  675.     .condition-list {
  676.         max-height: 200px;
  677.         overflow-y: auto;
  678.         padding-right: 5px;
  679.     }
  681.     .shop-list::-webkit-scrollbar,
  682.     .color-list::-webkit-scrollbar,
  683.     .size-list::-webkit-scrollbar,
  684.     .material-list::-webkit-scrollbar,
  685.     .condition-list::-webkit-scrollbar {
  686.         width: 6px;
  687.     }
  689.     .shop-list::-webkit-scrollbar-track,
  690.     .color-list::-webkit-scrollbar-track,
  691.     .size-list::-webkit-scrollbar-track,
  692.     .material-list::-webkit-scrollbar-track,
  693.     .condition-list::-webkit-scrollbar-track {
  694.         background: #f1f1f1;
  695.         border-radius: 3px;
  696.     }
  698.     .shop-list::-webkit-scrollbar-thumb,
  699.     .color-list::-webkit-scrollbar-thumb,
  700.     .size-list::-webkit-scrollbar-thumb,
  701.     .material-list::-webkit-scrollbar-thumb,
  702.     .condition-list::-webkit-scrollbar-thumb {
  703.         background: #ffa200;
  704.         border-radius: 3px;
  705.     }
  707.     .shop-list::-webkit-scrollbar-thumb:hover,
  708.     .color-list::-webkit-scrollbar-thumb:hover,
  709.     .size-list::-webkit-scrollbar-thumb:hover,
  710.     .material-list::-webkit-scrollbar-thumb:hover,
  711.     .condition-list::-webkit-scrollbar-thumb:hover {
  712.         background: #e69100;
  713.     }
  715.     /* Animation pour les filtres qui apparaissent */
  716.     .common-filter {
  717.         transition: all 0.3s ease;
  718.     }
  720.     .common-filter[style*="display: none"] {
  721.         opacity: 0;
  722.         transform: translateY(-10px);
  723.     }
  725.     .common-filter[style*="display: block"] {
  726.         opacity: 1;
  727.         transform: translateY(0);
  728.     }
  730.     /* Styles pour les indicateurs de chargement */
  731.     .loading-indicator {
  732.         display: inline-block;
  733.         width: 20px;
  734.         height: 20px;
  735.         border: 3px solid #f3f3f3;
  736.         border-top: 3px solid #ffa200;
  737.         border-radius: 50%;
  738.         animation: spin 1s linear infinite;
  739.     }
  741.     @keyframes spin {
  742.         0% {
  743.             transform: rotate(0deg);
  744.         }
  745.         100% {
  746.             transform: rotate(360deg);
  747.         }
  748.     }
  750.     /* Styles pour le loader de chargement infini */
  751.     .infinite-loader {
  752.         display: flex;
  753.         flex-direction: column;
  754.         align-items: center;
  755.         justify-content: center;
  756.         padding: 20px;
  757.     }
  759.     .loader-spinner {
  760.         width: 50px;
  761.         height: 50px;
  762.         border: 4px solid #f3f3f3;
  763.         border-top: 4px solid #ffa200;
  764.         border-radius: 50%;
  765.         animation: spin 1s linear infinite;
  766.     }
  768.     #infiniteScrollLoader {
  769.         min-height: 100px;
  770.     }
  772.     #noMoreProducts {
  773.         min-height: 60px;
  774.         color: #6c757d;
  775.     }
  777.     #noMoreProducts i {
  778.         font-size: 24px;
  779.         color: #28a745;
  780.         margin-right: 8px;
  781.     }
  783.     /* Responsive pour les filtres */
  784.     @media(max-width: 768px) {
  785.         .weight-inputs {
  786.             flex-direction: column;
  787.             gap: 10px;
  788.         }
  790.         .weight-input {
  791.             width: 100%;
  792.         }
  794.         .common-filter {
  795.             margin-bottom: 20px;
  796.         }
  798.         .shop-list,
  799.         .color-list,
  800.         .size-list,
  801.         .material-list,
  802.         .condition-list {
  803.             max-height: 150px;
  804.         }
  805.     }
  806.     /* Bouton toggle sidebar mobile */
  807.     .listing-sidebar-toggle {
  808.         border-radius: 0.5rem;
  809.         padding: 0.75rem;
  810.         font-weight: 500;
  811.         display: flex;
  812.         align-items: center;
  813.         justify-content: center;
  814.     }
  816.     .listing-sidebar-toggle .toggle-icon {
  817.         transition: transform 0.3s ease;
  818.         display: inline-block;
  819.     }
  821.     /* État fermé (par défaut) */
  822.     .listing-sidebar-toggle[aria-expanded="false"] .toggle-icon,
  823.     .listing-sidebar-toggle.collapsed .toggle-icon {
  824.         transform: rotate(0deg);
  825.     }
  827.     /* État ouvert */
  828.     .listing-sidebar-toggle[aria-expanded="true"] .toggle-icon,
  829.     .listing-sidebar-toggle:not(.collapsed) .toggle-icon {
  830.         transform: rotate(180deg);
  831.     }
  833.     /* Sidebar mobile */
  834.     @media(max-width: 767.98px) {
  835.         #listingSidebarCollapse {
  836.             margin-bottom: 1rem;
  837.         }
  838.     }
  839. </style>{% endblock %}{% block javascripts %}
  840. <script>
  841. // === Script isolé : chargement de plus de produits (comme les boutiques) ===
  842. var currentPage = {{ currentPage }};
  843. var totalPages = {{ totalPages }};
  844. var isLoading = false;
  846. function loadMoreProducts() {
  847.     if (isLoading || currentPage >= totalPages) return;
  849.     isLoading = true;
  850.     var btn = document.getElementById('loadMoreBtn');
  851.     var productsContainer = document.getElementById('productsContainer');
  853.     if (!btn || !productsContainer) {
  854.         isLoading = false;
  855.         return;
  856.     }
  858.     var originalText = btn.innerHTML;
  859.     btn.disabled = true;
  860.     btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Chargement...';
  862.     currentPage++;
  863.     var url = new URL(window.location.href);
  864.     url.searchParams.set('page', currentPage);
  866.     fetch(url.toString(), {
  867.         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  868.     })
  869.     .then(function(response) { return response.json(); })
  870.     .then(function(data) {
  871.         if (data.success && data.products) {
  872.             var tempDiv = document.createElement('div');
  873.             tempDiv.innerHTML = data.products;
  875.             var newProducts = tempDiv.querySelectorAll('.col-lg-4, .col-lg-3, [class*="col-lg"]');
  876.             newProducts.forEach(function(product) {
  877.                 productsContainer.appendChild(product);
  878.             });
  880.             currentPage = data.pagination.currentPage;
  881.             totalPages = data.pagination.totalPages;
  883.             // Initialiser les images et events pour les nouveaux produits
  884.             if (typeof initializeProductImages === 'function') initializeProductImages(tempDiv);
  885.             if (typeof initializeProductEventListeners === 'function') initializeProductEventListeners(tempDiv);
  887.             if (currentPage >= totalPages) {
  888.                 document.getElementById('loadMoreContainer').style.display = 'none';
  889.             } else {
  890.                 btn.disabled = false;
  891.                 btn.innerHTML = originalText;
  892.             }
  893.         } else {
  894.             document.getElementById('loadMoreContainer').style.display = 'none';
  895.         }
  896.         isLoading = false;
  897.     })
  898.     .catch(function(error) {
  899.         btn.disabled = false;
  900.         btn.innerHTML = originalText;
  901.         isLoading = false;
  902.     });
  903. }
  904. </script>
  906. <script>
  907.     // Variables globales pour la navigation des images
  908. const productImages = {};
  909. const currentImageIndex = {};
  911. // Variables pour le chargement infini (utilise les var globales définies au-dessus)
  912. let hasMoreProducts = totalPages > currentPage;
  914. let currentFilters = {
  915. category: '{{ currentCategory ?? '' }}',
  916. brand: '{{ currentBrand ?? '' }}',
  917. sort: '{{ currentSort ?? 'newest' }}',
  918. priceMin: '{{ priceMin ?? '' }}',
  919. priceMax: '{{ priceMax ?? '' }}'
  920. };
  922. // Modal style eBay pour remplacer les alertes - Définir AVANT son utilisation
  923. function showEbayModal(message, type = 'info') {
  924. const modalId = 'ebayAlertModal';
  925. let existingModal = document.getElementById(modalId);
  926. if (existingModal) {
  927. existingModal.remove();
  928. }
  930. const modal = document.createElement('div');
  931. modal.id = modalId;
  932. modal.className = 'modal fade';
  933. modal.setAttribute('tabindex', '-1');
  934. modal.setAttribute('aria-labelledby', 'ebayAlertModalLabel');
  935. modal.setAttribute('aria-hidden', 'true');
  937. // Définir les couleurs et icônes selon le type
  938. let iconClass = 'ti-info-alt';
  939. let iconColor = '#0064D2';
  940. let title = 'Information';
  942. switch (type) {
  943. case 'success': iconClass = 'ti-check-box';
  944. iconColor = '#0A7C42';
  945. title = 'Succès';
  946. break;
  947. case 'error':
  948. case 'danger': iconClass = 'ti-alert';
  949. iconColor = '#D32F2F';
  950. title = 'Erreur';
  951. break;
  952. case 'warning': iconClass = 'ti-alert-triangle';
  953. iconColor = '#F57C00';
  954. title = 'Attention';
  955. break;
  956. default: iconClass = 'ti-info-alt';
  957. iconColor = '#0064D2';
  958. title = 'Information';
  959. }
  961. modal.innerHTML = `
  962. <div class="modal-dialog modal-dialog-centered">
  963. <div class="modal-content" style="border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
  964. <div class="modal-header" style="border-bottom: 1px solid #e0e0e0; padding: 20px 24px;">
  965. <h5 class="modal-title" id="ebayAlertModalLabel" style="font-weight: 600; font-size: 18px; color: #333;">
  966. <i class="${iconClass}" style="color: ${iconColor}; margin-right: 8px;"></i>${title}
  967. </h5>
  968. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin: 0;"></button>
  969. </div>
  970. <div class="modal-body" style="padding: 24px; text-align: center;">
  971. <p style="margin: 0; font-size: 16px; color: #333; line-height: 1.5;">${message}</p>
  972. </div>
  973. <div class="modal-footer" style="border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: center;">
  974. <button type="button" class="btn btn-primary" data-bs-dismiss="modal" style="min-width: 100px; background-color: ${iconColor}; border-color: ${iconColor}; border-radius: 4px; font-weight: 500;">
  975. OK
  976. </button>
  977. </div>
  978. </div>
  979. </div>
  980. `;
  982. document.body.appendChild(modal);
  983. const bsModal = new bootstrap.Modal(modal);
  984. bsModal.show();
  986. // Supprimer le modal du DOM après fermeture
  987. modal.addEventListener('hidden.bs.modal', function () {
  988. modal.remove();
  989. });
  990. }
  992. // Rendre la fonction globale
  993. window.showEbayModal = showEbayModal;
  995. document.addEventListener('DOMContentLoaded', function () { // Initialisation des données d'images pour chaque produit
  996. {% for product in products %}
  997. {% set allImages = product.images|default([]) %}
  998. {% if product.variants is defined %}
  999.     {% for variant in product.variants %}
  1000.         {% if variant.isActive and variant.images is defined %}
  1001.             {% for variantImg in variant.images %}
  1002.                 {% set allImages = allImages|merge([variantImg]) %}
  1003.             {% endfor %}
  1004.         {% endif %}
  1005.     {% endfor %}
  1006. {% endif %}
  1007. {% if allImages|length > 0 %}productImages[{{ product.id }}] = [{% for img in allImages %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  1008. currentImageIndex[{{ product.id }}] = 0;
  1009. console.log('Initialized product {{ product.id }} with images:', productImages[{{ product.id }}]);{% endif %}{% endfor %}
  1011. // Gestion du panier
  1012. const cartButtons = document.querySelectorAll('.add-to-cart');
  1013. cartButtons.forEach(button => {
  1014. button.addEventListener('click', function () {
  1015. const productId = this.getAttribute('data-product-id');
  1016. const qty = this.getAttribute('data-qty');
  1018. fetch('{{ path("ui_cart_add") }}', {
  1019. method: 'POST',
  1020. headers: {
  1021. 'Content-Type': 'application/x-www-form-urlencoded'
  1022. },
  1023. body: 'productId=' + productId + '&qty=' + qty
  1024. }).then(response => response.json()).then(data => {
  1025. if (data.ok) {
  1026. showEbayModal('Produit ajouté au panier !', 'success');
  1027. // Mettre à jour le compteur du panier si présent
  1028. const cartBadge = document.querySelector('.cart-badge');
  1029. if (cartBadge) {
  1030. cartBadge.textContent = data.totalQty;
  1031. }
  1032. } else {
  1033. showEbayModal(data.message || 'Erreur lors de l\'ajout au panier', 'error');
  1034. }
  1035. }).catch(error => {
  1036. console.error('Erreur:', error);
  1037. showEbayModal('Erreur lors de l\'ajout au panier', 'error');
  1038. });
  1039. });
  1040. });
  1041. });
  1043. // Fonctions pour la navigation des images
  1044. window.showImageNav = function(productId) {
  1045. const leftBtn = document.getElementById('img-left-' + productId);
  1046. const rightBtn = document.getElementById('img-right-' + productId);
  1047. const indicators = document.getElementById('img-indicators-' + productId);
  1049. if (leftBtn) {
  1050. leftBtn.style.display = 'flex';
  1051. }
  1053. if (rightBtn) {
  1054. rightBtn.style.display = 'flex';
  1055. }
  1057. if (indicators) {
  1058. indicators.style.display = 'flex';
  1059. }
  1060. };
  1062. window.hideImageNav = function(productId) {
  1063. const leftBtn = document.getElementById('img-left-' + productId);
  1064. const rightBtn = document.getElementById('img-right-' + productId);
  1065. const indicators = document.getElementById('img-indicators-' + productId);
  1067. if (leftBtn) {
  1068. leftBtn.style.display = 'none';
  1069. }
  1071. if (rightBtn) {
  1072. rightBtn.style.display = 'none';
  1073. }
  1075. if (indicators) {
  1076. indicators.style.display = 'none';
  1077. }
  1078. };
  1080. window.showImage = function(productId, imageIndex) {
  1081. if (! productImages[productId] || ! productImages[productId][imageIndex]) {
  1082. console.log('Image not found for product', productId, 'index', imageIndex);
  1083. return;
  1084. }
  1086. const img = document.getElementById('main-img-' + productId);
  1087. if (img) {
  1088. console.log('Changing image to:', productImages[productId][imageIndex]);
  1090. // Force le rechargement de l'image
  1091. img.style.opacity = '0.5';
  1092. setTimeout(() => {
  1093. img.src = productImages[productId][imageIndex];
  1094. img.style.opacity = '1';
  1095. currentImageIndex[productId] = imageIndex;
  1096. updateIndicators(productId);
  1097. }, 100);
  1098. } else {
  1099. console.log('Image element not found:', 'main-img-' + productId);
  1100. }
  1101. };
  1103. window.nextImage = function(productId) {
  1104. if (! productImages[productId]) {
  1105. console.log('No images for product', productId);
  1106. return;
  1107. }
  1109. const nextIndex = (currentImageIndex[productId] + 1) % productImages[productId].length;
  1110. showImage(productId, nextIndex);
  1111. };
  1113. window.prevImage = function(productId) {
  1114. if (! productImages[productId]) {
  1115. console.log('No images for product', productId);
  1116. return;
  1117. }
  1119. const prevIndex = currentImageIndex[productId] === 0 ? productImages[productId].length - 1 : currentImageIndex[productId] - 1;
  1120. showImage(productId, prevIndex);
  1121. };
  1123. function updateIndicators(productId) {
  1124. const indicators = document.querySelectorAll('#img-indicators-' + productId + ' .indicator');
  1125. indicators.forEach((indicator, index) => {
  1126. indicator.classList.toggle('active', index === currentImageIndex[productId]);
  1127. });
  1128. }
  1130. // Fonction pour tracker la vue d'un produit
  1131. function trackProductView(productId) {
  1132. fetch (`/api/track-product-view/${productId}`, {
  1133. method: 'POST',
  1134. headers: {
  1135. 'Content-Type': 'application/json',
  1136. 'X-Requested-With': 'XMLHttpRequest'
  1137. }
  1138. }).then(response => response.json()).then(data => {
  1139. if (data.success) {
  1140. console.log (`Vue enregistrée pour le produit ${productId}:`, data.viewCount);
  1141. }
  1142. }).catch(error => {
  1143. console.error('Erreur lors du tracking:', error);
  1144. });
  1145. }
  1147. // Fonction pour tracker la vue d'une boutique
  1148. function trackShopView(shopId) {
  1149. fetch (`/api/track-shop-view/${shopId}`, {
  1150. method: 'POST',
  1151. headers: {
  1152. 'Content-Type': 'application/json',
  1153. 'X-Requested-With': 'XMLHttpRequest'
  1154. }
  1155. }).then(response => response.json()).then(data => {
  1156. if (data.success) {
  1157. console.log (`Vue enregistrée pour la boutique ${shopId}:`, data.viewCount);
  1158. }
  1159. }).catch(error => {
  1160. console.error('Erreur lors du tracking:', error);
  1161. });
  1162. }
  1164. // Ajouter le tracking aux événements existants
  1165. document.addEventListener('DOMContentLoaded', function () { // Tracking au survol des produits (avec délai)
  1166. const productCards = document.querySelectorAll('.single_product_item');
  1168. productCards.forEach(card => {
  1169. const productId = card.dataset.productId;
  1170. const shopId = card.dataset.shopId;
  1172. if (productId) {
  1173. let hoverTimeout;
  1175. card.addEventListener('mouseenter', () => { // Tracker la vue du produit après 2 secondes de survol
  1176. hoverTimeout = setTimeout(() => {
  1177. trackProductView(productId);
  1178. }, 2000);
  1179. });
  1181. card.addEventListener('mouseleave', () => {
  1182. clearTimeout(hoverTimeout);
  1183. });
  1185. // Tracking au clic sur le lien du produit
  1186. const productLink = card.querySelector('.product_img a');
  1187. if (productLink) {
  1188. productLink.addEventListener('click', () => {
  1189. trackProductView(productId);
  1190. });
  1191. }
  1192. }
  1194. // Tracking au clic sur le lien de la boutique
  1195. if (shopId) {
  1196. const shopLink = card.querySelector('.shop-link');
  1197. if (shopLink) {
  1198. shopLink.addEventListener('click', () => {
  1199. trackShopView(shopId);
  1200. });
  1201. }
  1202. }
  1203. });
  1204. });
  1205. </script>
  1207. <script>
  1208.     // Système de filtrage AJAX avancé
  1209. // currentFilters est déjà déclaré plus haut, on met juste à jour les valeurs
  1210. if (typeof currentFilters !== 'undefined') { // Mettre à jour les valeurs existantes
  1211. currentFilters.category = '{{ currentCategory }}';
  1212. currentFilters.brand = '{{ currentBrand }}';
  1213. currentFilters.condition = '{{ currentCondition }}';
  1214. currentFilters.sort = '{{ currentSort }}';
  1215. currentFilters.priceMin = '{{ priceMin }}';
  1216. currentFilters.priceMax = '{{ priceMax }}';
  1217. currentFilters.page = {{ currentPage }};
  1218. currentFilters.q = currentFilters.q || '{{ app.request.query.get('q', '') }}';
  1219. // Ajouter les nouveaux filtres depuis l'URL s'ils n'existent pas
  1220. if (! currentFilters.shop) 
  1221. currentFilters.shop = '{{ app.request.query.get('shop', '') }}';
  1223. if (! currentFilters.featured) 
  1224. currentFilters.featured = '{{ app.request.query.get('featured', '') }}';
  1226. if (! currentFilters.digital) 
  1227. currentFilters.digital = '{{ app.request.query.get('digital', '') }}';
  1229. if (! currentFilters.stockStatus) 
  1230. currentFilters.stockStatus = '{{ app.request.query.get('stock_status', '') }}';
  1232. if (! currentFilters.ratingMin) 
  1233. currentFilters.ratingMin = '{{ app.request.query.get('rating_min', '') }}';
  1235. if (! currentFilters.rating) 
  1236. currentFilters.rating = '{{ app.request.query.get('rating_min', '') }}';
  1238. if (! currentFilters.weightMin) 
  1239. currentFilters.weightMin = '{{ app.request.query.get('weight_min', '') }}';
  1241. if (! currentFilters.weightMax) 
  1242. currentFilters.weightMax = '{{ app.request.query.get('weight_max', '') }}';
  1244. if (! currentFilters.color) 
  1245. currentFilters.color = '{{ app.request.query.get('color', '') }}';
  1247. if (! currentFilters.size) 
  1248. currentFilters.size = '{{ app.request.query.get('size', '') }}';
  1250. if (! currentFilters.material) 
  1251. currentFilters.material = '{{ app.request.query.get('material', '') }}';
  1253. if (! currentFilters.condition) 
  1254. currentFilters.condition = '{{ app.request.query.get('condition', '') }}';
  1256. if (! currentFilters.availability) 
  1257. currentFilters.availability = '{{ app.request.query.get('availability', '') }}';
  1259. } else { // Si currentFilters n'existe pas, le créer avec les valeurs de l'URL
  1260. let currentFilters = {
  1261. category: '{{ currentCategory ?? '' }}',
  1262. brand: '{{ currentBrand ?? '' }}',
  1263. condition: '{{ currentCondition ?? '' }}',
  1264. sort: '{{ currentSort ?? 'newest' }}',
  1265. priceMin: '{{ app.request.query.get('price_min', '') }}',
  1266. priceMax: '{{ app.request.query.get('price_max', '') }}',
  1267. page: {{ currentPage }},
  1268. q: '{{ app.request.query.get('q', '') }}',
  1269. // Nouveaux filtres depuis l'URL
  1270. shop: '{{ app.request.query.get('shop', '') }}',
  1271. featured: '{{ app.request.query.get('featured', '') }}',
  1272. digital: '{{ app.request.query.get('digital', '') }}',
  1273. stockStatus: '{{ app.request.query.get('stock_status', '') }}',
  1274. ratingMin: '{{ app.request.query.get('rating_min', '') }}',
  1275. rating: '{{ app.request.query.get('rating_min', '') }}',
  1276. weightMin: '{{ app.request.query.get('weight_min', '') }}',
  1277. weightMax: '{{ app.request.query.get('weight_max', '') }}',
  1278. color: '{{ app.request.query.get('color', '') }}',
  1279. size: '{{ app.request.query.get('size', '') }}',
  1280. material: '{{ app.request.query.get('material', '') }}',
  1281. condition: '{{ app.request.query.get('condition', '') }}',
  1282. availability: '{{ app.request.query.get('availability', '') }}'
  1283. };
  1284. }
  1286. // Fonction pour appliquer les filtres
  1287. function applyFilters() {
  1288. const url = new URL('{{ path('ui_api_products_filter') }}', window.location.origin);
  1290. // Ajouter les paramètres
  1291. Object.keys(currentFilters).forEach(key => {
  1292. if (currentFilters[key] && currentFilters[key] !== '') { // Mapper les clés pour l'API
  1293. let apiKey = key;
  1294. if (key === 'priceMin') {
  1295. apiKey = 'price_min';
  1296. } else if (key === 'priceMax') {
  1297. apiKey = 'price_max';
  1298. } else if (key === 'ratingMin') {
  1299. apiKey = 'rating_min';
  1300. } else if (key === 'weightMin') {
  1301. apiKey = 'weight_min';
  1302. } else if (key === 'weightMax') {
  1303. apiKey = 'weight_max';
  1304. } else if (key === 'stockStatus') {
  1305. apiKey = 'stock_status';
  1306. }
  1308. url.searchParams.set(apiKey, currentFilters[key]);
  1309. }
  1310. });
  1312. // Afficher le loader
  1313. document.getElementById('productsContainer').innerHTML = '<div class="col-12 text-center"><i class="fa fa-spinner fa-spin"></i> Chargement...</div>';
  1315. // Faire la requête AJAX
  1316. fetch(url).then(response => response.json()).then(data => {
  1317. if (data.success) { // Mettre à jour les produits
  1318. document.getElementById('productsContainer').innerHTML = data.products;
  1320. // Mettre à jour la pagination
  1321. currentPage = data.pagination.currentPage;
  1322. totalPages = data.pagination.totalPages;
  1323. hasMoreProducts = currentPage < totalPages;
  1325. // Préserver l'état des filtres statiques avant la mise à jour
  1326. const preservedFilters = {
  1327. featured: currentFilters.featured,
  1328. digital: currentFilters.digital,
  1329. availability: currentFilters.availability,
  1330. rating: currentFilters.rating || currentFilters.ratingMin
  1331. };
  1333. // Mettre à jour les marques disponibles (toujours afficher toutes)
  1334. updateAvailableBrands(data.availableBrands || []);
  1336. // Mettre à jour les conditions disponibles (toujours afficher toutes)
  1337. updateAvailableConditions(data.availableConditions || []);
  1339. // Mettre à jour les boutiques disponibles (toujours afficher toutes)
  1340. updateAvailableShops(data.availableShops || []);
  1342. // Mettre à jour les attributs disponibles (toujours afficher tous)
  1343. updateAvailableAttributes(data.availableAttributes || {});
  1345. // Restaurer l'état des filtres statiques après la mise à jour
  1346. restoreStaticFiltersState(preservedFilters);
  1348. // Réinitialiser les filtres depuis currentFilters pour s'assurer qu'ils sont tous cochés
  1349. if (typeof initializeFiltersFromURL === 'function') {
  1350. initializeFiltersFromURL();
  1351. }
  1353. // Mettre à jour l'URL
  1354. updateURL();
  1356. // Mettre à jour l'affichage du bouton
  1357. updateLoadMoreButton();
  1359. // Réinitialiser les event listeners pour les nouveaux produits
  1360. const tempDiv = document.createElement('div');
  1361. tempDiv.innerHTML = data.products;
  1362. initializeProductEventListeners(tempDiv);
  1363. initializeProductImages(tempDiv);
  1365. // Mettre à jour les filtres actifs
  1366. if (typeof updateActiveFilters === 'function') {
  1367. updateActiveFilters();
  1368. }
  1369. }
  1370. }).catch(error => {
  1371. console.error('Erreur lors du filtrage:', error);
  1372. document.getElementById('productsContainer').innerHTML = '<div class="col-12 text-center text-danger">Erreur lors du chargement des produits</div>';
  1373. });
  1374. }
  1376. // Exposer la fonction globalement
  1377. window.applyFilters = applyFilters;
  1379. // Fonction pour appliquer le tri
  1380. function applySorting() {
  1381. currentFilters.sort = document.getElementById('sortSelect').value;
  1382. currentFilters.page = 1;
  1383. applyFilters();
  1384. }
  1386. // Fonction pour appliquer le filtre de prix
  1387. function applyPriceFilter() {
  1388. currentFilters.priceMin = document.getElementById('priceMin').value;
  1389. currentFilters.priceMax = document.getElementById('priceMax').value;
  1390. currentFilters.page = 1;
  1391. applyFilters();
  1392. }
  1394. // Fonction pour appliquer le filtre de poids
  1395. function applyWeightFilter() {
  1396. currentFilters.weightMin = document.getElementById('weightMin').value;
  1397. currentFilters.weightMax = document.getElementById('weightMax').value;
  1398. currentFilters.page = 1;
  1399. applyFilters();
  1400. }
  1402. // Fonction pour changer de page
  1403. function changePage(page) {
  1404. currentFilters.page = page;
  1405. applyFilters();
  1406. }
  1408. // Fonction pour mettre à jour les marques disponibles
  1409. function updateAvailableBrands(brands) {
  1410. const brandsFilter = document.getElementById('brandsFilter');
  1411. const brandList = document.getElementById('brandList');
  1412. const currentBrandValue = currentFilters.brand || '';
  1414. // Toujours afficher le filtre des marques
  1415. brandsFilter.style.display = 'block';
  1417. // Si pas de marques disponibles, garder les marques existantes ou afficher un message
  1418. if (brands.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  1419. if (brandList && brandList.children.length > 0) { // Juste mettre à jour les états cochés
  1420. const existingRadios = brandList.querySelectorAll('input[name="brand"]');
  1421. existingRadios.forEach(radio => {
  1422. if (currentBrandValue && radio.value === currentBrandValue) {
  1423. radio.checked = true;
  1424. } else if (! currentBrandValue && radio.id === 'all-brands') {
  1425. radio.checked = true;
  1426. } else {
  1427. radio.checked = false;
  1428. }
  1429. });
  1430. return; // Garder les marques existantes
  1431. }
  1432. // Sinon, afficher un message
  1433. brandList.innerHTML = '<li class="filter-list"><span class="text-muted">Aucune marque disponible</span></li>';
  1434. return;
  1435. }
  1437. let html = '';
  1438. const isAllSelected = ! currentBrandValue || currentBrandValue === '';
  1439. html += `<li class="filter-list"><input class="pixel-radio" type="radio" id="all-brands" name="brand" ${
  1440. isAllSelected ? 'checked' : ''
  1441. }><label for="all-brands">Toutes les marques</label></li>`;
  1443. brands.forEach(brand => {
  1444. const isSelected = currentBrandValue === brand.slug;
  1445. html += `<li class="filter-list">
  1446.                 <input class="pixel-radio" type="radio" id="brand-${
  1447. brand.id
  1448. }" name="brand" value="${
  1449. brand.slug
  1450. }" ${
  1451. isSelected ? 'checked' : ''
  1452. }>
  1453.                 <label for="brand-${
  1454. brand.id
  1455. }">${
  1456. brand.name
  1457. }<span>(${
  1458. brand.productCount
  1459. })</span></label>
  1460.             </li>`;
  1461. });
  1463. brandList.innerHTML = html;
  1465. // Ajouter les event listeners
  1466. brandList.querySelectorAll('input[name="brand"]').forEach(radio => {
  1467. radio.addEventListener('change', function () {
  1468. if (this.id === 'all-brands') {
  1469. currentFilters.brand = '';
  1470. } else {
  1471. currentFilters.brand = this.value;
  1472. } currentFilters.page = 1;
  1473. applyFilters();
  1474. });
  1475. });
  1476. }
  1478. // Fonction pour mettre à jour les conditions disponibles
  1479. function updateAvailableConditions(conditions) {
  1480. const conditionList = document.getElementById('conditionList');
  1481. const currentConditionValue = currentFilters.condition || '';
  1483. // Toujours garder le contenu statique et juste mettre à jour les états cochés
  1484. if (conditionList && conditionList.children.length > 0) {
  1485. const existingRadios = conditionList.querySelectorAll('input[name="condition"]');
  1486. existingRadios.forEach(radio => {
  1487. if (currentConditionValue && radio.value === currentConditionValue) {
  1488. radio.checked = true;
  1489. } else if (! currentConditionValue && radio.id === 'all-conditions') {
  1490. radio.checked = true;
  1491. } else {
  1492. radio.checked = false;
  1493. }
  1494. });
  1495. return; // Garder les conditions existantes
  1496. }
  1498. // Si pas de contenu statique, générer dynamiquement
  1499. if (conditions.length === 0) {
  1500. conditionList.innerHTML = '<li class="filter-list"><span class="text-muted">Aucune condition disponible</span></li>';
  1501. return;
  1502. }
  1504. let html = '';
  1505. const isAllSelected = ! currentConditionValue || currentConditionValue === '';
  1506. html += `<li class="filter-list"><input class="pixel-radio" type="radio" id="all-conditions" name="condition" ${
  1507. isAllSelected ? 'checked' : ''
  1508. }><label for="all-conditions">Toutes les conditions</label></li>`;
  1510. conditions.forEach(condition => {
  1511. const isSelected = currentConditionValue === condition.slug;
  1512. html += `<li class="filter-list">
  1513.                 <input class="pixel-radio" type="radio" id="condition-${
  1514. condition.id
  1515. }" name="condition" value="${
  1516. condition.slug
  1517. }" ${
  1518. isSelected ? 'checked' : ''
  1519. }>
  1520.                 <label for="condition-${
  1521. condition.id
  1522. }">${
  1523. condition.name
  1524. }<span>(${
  1525. condition.productCount
  1526. })</span></label>
  1527.             </li>`;
  1528. });
  1530. conditionList.innerHTML = html;
  1532. // Ajouter les event listeners
  1533. conditionList.querySelectorAll('input[name="condition"]').forEach(radio => {
  1534. radio.addEventListener('change', function () {
  1535. if (this.id === 'all-conditions') {
  1536. currentFilters.condition = '';
  1537. } else {
  1538. currentFilters.condition = this.value;
  1539. } currentFilters.page = 1;
  1540. applyFilters();
  1541. });
  1542. });
  1543. }
  1545. // Fonction pour mettre à jour les boutiques disponibles
  1546. function updateAvailableShops(shops) {
  1547. const shopsFilter = document.getElementById('shopsFilter');
  1548. const shopList = document.getElementById('shopList');
  1549. const currentShopValue = currentFilters.shop || '';
  1551. // Toujours afficher le filtre des boutiques
  1552. shopsFilter.style.display = 'block';
  1554. // Si pas de boutiques disponibles, afficher un message ou garder les boutiques existantes
  1555. if (shops.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  1556. if (shopList && shopList.children.length > 0) {
  1557. return; // Garder les boutiques existantes
  1558. }
  1559. // Sinon, afficher un message
  1560. shopList.innerHTML = '<li class="filter-list"><span class="text-muted">Aucune boutique disponible</span></li>';
  1561. return;
  1562. }
  1564. let html = '';
  1565. const isAllSelected = ! currentShopValue || currentShopValue === '';
  1566. html += `<li class="filter-list"><input class="pixel-radio" type="radio" id="all-shops" name="shop" ${
  1567. isAllSelected ? 'checked' : ''
  1568. }><label for="all-shops">Toutes les boutiques</label></li>`;
  1570. shops.forEach(shop => {
  1571. const isSelected = currentShopValue === shop.slug;
  1572. html += `<li class="filter-list">
  1573.                 <input class="pixel-radio" type="radio" id="shop-${
  1574. shop.id
  1575. }" name="shop" value="${
  1576. shop.slug
  1577. }" ${
  1578. isSelected ? 'checked' : ''
  1579. }>
  1580.                 <label for="shop-${
  1581. shop.id
  1582. }">${
  1583. shop.name
  1584. }<span>(${
  1585. shop.productCount
  1586. })</span></label>
  1587.             </li>`;
  1588. });
  1590. shopList.innerHTML = html;
  1592. // Mettre à jour aussi le modal
  1593. const modalShopList = document.getElementById('modalShopList');
  1594. if (modalShopList) {
  1595. modalShopList.innerHTML = html.replace(/id="all-shops"/g, 'id="modal-all-shops"').replace(/id="shop-/g, 'id="modal-shop-').replace(/name="shop"/g, 'name="modal-shop"').replace(/for="all-shops"/g, 'for="modal-all-shops"').replace(/for="shop-/g, 'for="modal-shop-');
  1596. }
  1598. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  1599. shopList.querySelectorAll('input[name="shop"]').forEach(radio => {
  1600. radio.addEventListener('change', function () {
  1601. if (this.id === 'all-shops') {
  1602. currentFilters.shop = '';
  1603. } else {
  1604. currentFilters.shop = this.value;
  1605. } currentFilters.page = 1;
  1606. applyFilters();
  1607. });
  1608. });
  1609. }
  1611. // Fonction pour mettre à jour les attributs disponibles
  1612. function updateAvailableAttributes(attributes) {
  1613. // Toujours afficher tous les filtres d'attributs, même s'ils ne sont pas pertinents
  1614. // Couleurs
  1615. updateAttributeFilter('colors', attributes.colors, 'colorList', 'colorsFilter');
  1617. // Tailles
  1618. updateAttributeFilter('sizes', attributes.sizes, 'sizeList', 'sizesFilter');
  1620. // Matériaux
  1621. updateAttributeFilter('materials', attributes.materials, 'materialList', 'materialsFilter');
  1623. // Conditions
  1624. updateAttributeFilter('conditions', attributes.conditions, 'conditionList', 'conditionsFilter');
  1625. }
  1627. // Fonction générique pour mettre à jour les filtres d'attributs
  1628. function updateAttributeFilter(attributeType, attributes, listId, filterId) {
  1629. const filter = document.getElementById(filterId);
  1630. const list = document.getElementById(listId);
  1631. const currentValue = currentFilters[attributeType] || '';
  1633. // Toujours afficher les filtres d'attributs
  1634. filter.style.display = 'block';
  1636. // Si pas d'attributs disponibles, afficher un message ou garder les attributs existants
  1637. if (! attributes || attributes.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  1638. if (list && list.children.length > 0) {
  1639. return; // Garder les attributs existants
  1640. }
  1641. // Sinon, afficher un message
  1642. list.innerHTML = '<li class="filter-list"><span class="text-muted">Aucun attribut disponible</span></li>';
  1643. return;
  1644. }
  1646. let html = '';
  1647. const isAllSelected = ! currentValue || currentValue === '';
  1648. html += `<li class="filter-list"><input class="pixel-radio" type="radio" id="all-${attributeType}" name="${attributeType}" ${
  1649. isAllSelected ? 'checked' : ''
  1650. }><label for="all-${attributeType}">Tous</label></li>`;
  1652. attributes.forEach(attr => {
  1653. const isSelected = currentValue === attr.value;
  1654. html += `<li class="filter-list">
  1655.                 <input class="pixel-radio" type="radio" id="${attributeType}-${
  1656. attr.value
  1657. }" name="${attributeType}" value="${
  1658. attr.value
  1659. }" ${
  1660. isSelected ? 'checked' : ''
  1661. }>
  1662.                 <label for="${attributeType}-${
  1663. attr.value
  1664. }">${
  1665. attr.value
  1666. }<span>(${
  1667. attr.count
  1668. })</span></label>
  1669.             </li>`;
  1670. });
  1672. list.innerHTML = html;
  1674. // Mettre à jour aussi le modal (si l'élément existe)
  1675. const modalListId = 'modal' + listId.charAt(0).toUpperCase() + listId.slice(1); // modalColorList, modalSizeList, etc.
  1676. const modalList = document.getElementById(modalListId);
  1677. if (modalList) { // Adapter le HTML pour le modal (changer les IDs et names)
  1678. let modalHtml = html.replace(new RegExp (`id="all-${attributeType}"`, 'g'), `id="modal-all-${attributeType}"`).replace(new RegExp (`id="${attributeType}-`, 'g'), `id="modal-${attributeType}-`).replace(new RegExp (`name="${attributeType}"`, 'g'), `name="modal-${attributeType}"`).replace(new RegExp (`for="all-${attributeType}"`, 'g'), `for="modal-all-${attributeType}"`).replace(new RegExp (`for="${attributeType}-`, 'g'), `for="modal-${attributeType}-`);
  1679. modalList.innerHTML = modalHtml;
  1680. }
  1682. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  1683. list.querySelectorAll (`input[name="${attributeType}"]`).forEach(radio => {
  1684. radio.addEventListener('change', function () {
  1685. if (this.id === `all-${attributeType}`) {
  1686. currentFilters[attributeType] = '';
  1687. } else {
  1688. currentFilters[attributeType] = this.value;
  1689. } currentFilters.page = 1;
  1690. applyFilters();
  1691. });
  1692. });
  1693. } else {
  1694. filter.style.display = 'none';
  1695. }
  1696. }
  1698. // Fonction pour mettre à jour l'URL
  1699. function updateURL () {
  1700. const url = new URL(window.location);
  1702. // Supprimer les anciens paramètres
  1703. const paramsToRemove = [
  1704. 'category',
  1705. 'brand',
  1706. 'sort',
  1707. 'price_min',
  1708. 'price_max',
  1709. 'page',
  1710. 'shop',
  1711. 'featured',
  1712. 'digital',
  1713. 'stock_status',
  1714. 'rating_min',
  1715. 'weight_min',
  1716. 'weight_max',
  1717. 'color',
  1718. 'size',
  1719. 'material',
  1720. 'condition',
  1721. 'availability'
  1722. ];
  1723. paramsToRemove.forEach(param => url.searchParams.delete(param));
  1725. // Ajouter les nouveaux paramètres
  1726. Object.keys(currentFilters).forEach(key => {
  1727. if (currentFilters[key]) {
  1728. url.searchParams.set(key, currentFilters[key]);
  1729. }
  1730. });
  1732. // Mettre à jour l'URL sans recharger la page
  1733. window.history.pushState({}, '', url);
  1734. }
  1736. // Fonction pour restaurer l'état des filtres statiques
  1737. function restoreStaticFiltersState (preservedFilters) { // Restaurer featured
  1738. if (preservedFilters.featured) {
  1739. const featuredInput = document.querySelector (`input[name="featured"][value="${
  1740. preservedFilters.featured
  1741. }"]`);
  1742. if (featuredInput) {
  1743. featuredInput.checked = true;
  1744. } else {
  1745. const featuredAll = document.getElementById('featured-all');
  1746. if (featuredAll) 
  1747. featuredAll.checked = true;
  1749. }
  1750. } else {
  1751. const featuredAll = document.getElementById('featured-all');
  1752. if (featuredAll) 
  1753. featuredAll.checked = true;
  1755. }
  1757. // Restaurer digital
  1758. if (preservedFilters.digital) {
  1759. const digitalInput = document.querySelector (`input[name="digital"][value="${
  1760. preservedFilters.digital
  1761. }"]`);
  1762. if (digitalInput) {
  1763. digitalInput.checked = true;
  1764. } else {
  1765. const digitalAll = document.getElementById('digital-all');
  1766. if (digitalAll) 
  1767. digitalAll.checked = true;
  1769. }
  1770. } else {
  1771. const digitalAll = document.getElementById('digital-all');
  1772. if (digitalAll) 
  1773. digitalAll.checked = true;
  1775. }
  1777. // Restaurer availability
  1778. if (preservedFilters.availability) {
  1779. const availabilityInput = document.querySelector (`input[name="availability"][value="${
  1780. preservedFilters.availability
  1781. }"]`);
  1782. if (availabilityInput) {
  1783. availabilityInput.checked = true;
  1784. } else {
  1785. const availabilityAll = document.getElementById('availability-all');
  1786. if (availabilityAll) 
  1787. availabilityAll.checked = true;
  1789. }
  1790. } else {
  1791. const availabilityAll = document.getElementById('availability-all');
  1792. if (availabilityAll) 
  1793. availabilityAll.checked = true;
  1795. }
  1797. // Restaurer rating (mapping vers ratingMin)
  1798. if (preservedFilters.rating) {
  1799. const ratingInput = document.querySelector (`input[name="rating"][value="${
  1800. preservedFilters.rating
  1801. }"]`);
  1802. if (ratingInput) {
  1803. ratingInput.checked = true;
  1804. } else {
  1805. const ratingAll = document.getElementById('rating-all');
  1806. if (ratingAll) 
  1807. ratingAll.checked = true;
  1809. }
  1810. } else {
  1811. const ratingAll = document.getElementById('rating-all');
  1812. if (ratingAll) 
  1813. ratingAll.checked = true;
  1815. }
  1816. }
  1818. // Fonction pour initialiser tous les filtres avec les valeurs de l'URL
  1819. function initializeFiltersFromURL () { // Initialiser les filtres statiques
  1820. const staticFilters = {
  1821. featured: currentFilters.featured || '',
  1822. digital: currentFilters.digital || '',
  1823. availability: currentFilters.availability || '',
  1824. rating: currentFilters.rating || currentFilters.ratingMin || ''
  1825. };
  1827. // Cocher les filtres statiques
  1828. Object.keys(staticFilters).forEach(filterName => {
  1829. const value = staticFilters[filterName];
  1830. if (value) {
  1831. const input = document.querySelector(`input[name="${filterName}"][value="${value}"]`);
  1832. if (input) {
  1833. input.checked = true;
  1834. } else { // Cocher "all" si la valeur n'existe pas
  1835. const allInput = document.getElementById (`${filterName}-all`);
  1836. if (allInput) 
  1837. allInput.checked = true;
  1839. }
  1840. } else {
  1841. const allInput = document.getElementById (`${filterName}-all`);
  1842. if (allInput) 
  1843. allInput.checked = true;
  1845. }
  1846. });
  1848. // Initialiser les filtres de poids
  1849. if (currentFilters.weightMin) {
  1850. const weightMinInput = document.getElementById('weightMin');
  1851. if (weightMinInput) 
  1852. weightMinInput.value = currentFilters.weightMin;
  1854. }
  1855. if (currentFilters.weightMax) {
  1856. const weightMaxInput = document.getElementById('weightMax');
  1857. if (weightMaxInput) 
  1858. weightMaxInput.value = currentFilters.weightMax;
  1860. }
  1862. // Initialiser les filtres de marque (si déjà chargés)
  1863. if (currentFilters.brand) {
  1864. const brandInput = document.querySelector (`input[name="brand"][value="${
  1865. currentFilters.brand
  1866. }"]`);
  1867. if (brandInput) {
  1868. brandInput.checked = true;
  1869. } else {
  1870. const allBrands = document.getElementById('all-brands');
  1871. if (allBrands) 
  1872. allBrands.checked = true;
  1874. }
  1875. }
  1877. // Initialiser les filtres de boutique (si déjà chargés)
  1878. if (currentFilters.shop) {
  1879. const shopInput = document.querySelector (`input[name="shop"][value="${
  1880. currentFilters.shop
  1881. }"]`);
  1882. if (shopInput) {
  1883. shopInput.checked = true;
  1884. } else {
  1885. const allShops = document.getElementById('all-shops');
  1886. if (allShops) 
  1887. allShops.checked = true;
  1889. }
  1890. }
  1892. // Initialiser les filtres d'attributs (si déjà chargés)
  1893. ['color', 'size', 'material', 'condition'].forEach(attrType => {
  1894. if (currentFilters[attrType]) {
  1895. const attrInput = document.querySelector(`input[name="${attrType}"][value="${
  1896. currentFilters[attrType]
  1897. }"]`);
  1898. if (attrInput) {
  1899. attrInput.checked = true;
  1900. } else {
  1901. const allAttr = document.getElementById (`all-${attrType}`);
  1902. if (allAttr) 
  1903. allAttr.checked = true;
  1905. }
  1906. }
  1907. });
  1908. }
  1910. // Initialiser les filtres
  1911. document.addEventListener('DOMContentLoaded', function () { // Initialiser les filtres depuis l'URL
  1912. initializeFiltersFromURL();
  1914. // Event listeners pour les filtres statiques
  1915. const staticFilters = ['featured', 'digital', 'availability'];
  1917. staticFilters.forEach(filterName => {
  1918. const inputs = document.querySelectorAll (`input[name="${filterName}"]`);
  1919. inputs.forEach(input => {
  1920. input.addEventListener('change', function () {
  1921. if (this.id.includes('-all')) {
  1922. currentFilters[filterName] = '';
  1923. } else {
  1924. currentFilters[filterName] = this.value;
  1925. }
  1926. currentFilters.page = 1;
  1927. applyFilters();
  1928. });
  1929. });
  1930. });
  1932. // Event listener spécial pour rating (mapping vers ratingMin)
  1933. const ratingInputs = document.querySelectorAll('input[name="rating"]');
  1934. ratingInputs.forEach(input => {
  1935. input.addEventListener('change', function () {
  1936. if (this.id === 'rating-all') {
  1937. currentFilters.ratingMin = '';
  1938. currentFilters.rating = '';
  1939. } else {
  1940. currentFilters.ratingMin = this.value;
  1941. currentFilters.rating = this.value;
  1942. }
  1943. currentFilters.page = 1;
  1944. applyFilters();
  1945. });
  1946. });
  1948. // Event listeners pour les filtres de poids
  1949. const weightInputs = ['weightMin', 'weightMax'];
  1950. weightInputs.forEach(inputId => {
  1951. const input = document.getElementById(inputId);
  1952. if (input) {
  1953. input.addEventListener('change', applyWeightFilter);
  1954. input.addEventListener('input', debounce(applyWeightFilter, 500));
  1955. }
  1956. });
  1958. // Event listeners pour les filtres de prix
  1959. const priceInputs = ['priceMin', 'priceMax'];
  1960. priceInputs.forEach(inputId => {
  1961. const input = document.getElementById(inputId);
  1962. if (input) {
  1963. input.addEventListener('change', applyPriceFilter);
  1964. input.addEventListener('input', debounce(applyPriceFilter, 500));
  1965. }
  1966. });
  1968. // Ajouter les event listeners pour les marques existantes
  1969. const brandList = document.getElementById('brandList');
  1970. if (brandList) {
  1971. brandList.querySelectorAll('input[name="brand"]').forEach(radio => {
  1972. radio.addEventListener('change', function () {
  1973. if (this.id === 'all-brands') {
  1974. currentFilters.brand = '';
  1975. } else {
  1976. currentFilters.brand = this.value;
  1977. }
  1978. currentFilters.page = 1;
  1979. applyFilters();
  1980. });
  1981. });
  1982. }
  1984. // Appliquer les filtres initiaux si une catégorie est sélectionnée
  1985. if (currentFilters.category) {
  1986. applyFilters();
  1987. } else { // Initialiser l'affichage du bouton au chargement de la page
  1988. updateLoadMoreButton();
  1989. }
  1990. });
  1992. // Fonction de debounce pour éviter trop de requêtes
  1993. function debounce (func, wait) {
  1994. let timeout;
  1995. return function executedFunction(...args) {
  1996. const later = () => {
  1997. clearTimeout(timeout);
  1998. func(...args);
  1999. };
  2000. clearTimeout(timeout);
  2001. timeout = setTimeout(later, wait);
  2002. };
  2003. }
  2005. // Les fonctions toggleComparison, toggleWishlist, et showNotification sont définies globalement dans base_home.html.twig
  2006. // Pas besoin de les redéfinir ici
  2008. // Fonctions pour le dropshipping
  2009. function generateDropshipLink (productId) {
  2010. showEbayPromptModal('URL originale (optionnel):', '').then(originalUrl => {
  2011. if (originalUrl === null) 
  2012. return;
  2013.  // Utilisateur a annulé
  2015. const formData = new FormData();
  2016. formData.append('originalUrl', originalUrl || '');
  2018. fetch (`/api/dropship/generate/${productId}`, {
  2019. method: 'POST',
  2020. body: formData
  2021. }).then(response => response.json()).then(data => {
  2022. if (data.success) { // Afficher le lien généré dans une modal
  2023. showDropshipLinkModal(data.data);
  2024. } else {
  2025. showNotification(data.message || 'Erreur lors de la génération du lien', 'error');
  2026. }
  2027. }).catch(error => {
  2028. console.error('Erreur:', error);
  2029. showNotification('Erreur lors de la génération du lien', 'error');
  2030. });
  2031. });
  2032. }
  2034. function showDropshipLinkModal (linkData) {
  2035. const modal = document.createElement('div');
  2036. modal.className = 'modal fade show';
  2037. modal.style.display = 'block';
  2038. modal.innerHTML = `
  2039.         <div class="modal-dialog">
  2040.             <div class="modal-content">
  2041.                 <div class="modal-header">
  2042.                     <h5 class="modal-title">
  2043.                         <i class="fa fa-share-alt"></i> Lien de dropshipping généré
  2044.                     </h5>
  2045.                     <button type="button" class="btn-close" onclick="closeModal(this)"></button>
  2046.                 </div>
  2047.                 <div class="modal-body">
  2048.                     <div class="mb-3">
  2049.                         <label class="form-label">Lien de dropshipping :</label>
  2050.                         <div class="input-group">
  2051.                             <input type="text" class="form-control" value="${
  2052. linkData.dropshipUrl
  2053. }" readonly id="dropshipUrl">
  2054.                             <button class="btn btn-outline-secondary" onclick="copyToClipboard('${
  2055. linkData.dropshipUrl
  2056. }')">
  2057.                                 <i class="fa fa-copy"></i>
  2058.                             </button>
  2059.                         </div>
  2060.                     </div>
  2061.                     <div class="row">
  2062.                         <div class="col-md-6">
  2063.                             <div class="card">
  2064.                                 <div class="card-body text-center">
  2065.                                     <h6 class="card-title">Taux de commission</h6>
  2066.                                     <h4 class="text-primary">${
  2067. linkData.commissionRate
  2068. }%</h4>
  2069.                                 </div>
  2070.                             </div>
  2071.                         </div>
  2072.                         <div class="col-md-6">
  2073.                             <div class="card">
  2074.                                 <div class="card-body text-center">
  2075.                                     <h6 class="card-title">Commission par vente</h6>
  2076.                                     <h4 class="text-success">${
  2077. linkData.commissionAmount
  2078. } HTG</h4>
  2079.                                 </div>
  2080.                             </div>
  2081.                         </div>
  2082.                     </div>
  2083.                     <div class="alert alert-info">
  2084.                         <i class="fa fa-info-circle"></i>
  2085.                         <strong>Note :</strong> Ce lien expire le ${
  2086. new Date(linkData.expiresAt).toLocaleDateString('fr-FR')
  2087. }.
  2088.                     </div>
  2089.                 </div>
  2090.                 <div class="modal-footer">
  2091.                     <button type="button" class="btn btn-secondary" onclick="closeModal(this)">Fermer</button>
  2092.                     <a href="/dropship/dashboard" class="btn btn-primary">
  2093.                         <i class="fa fa-tachometer"></i> Voir le dashboard
  2094.                     </a>
  2095.                 </div>
  2096.             </div>
  2097.         </div>
  2098.     `;
  2100. document.body.appendChild(modal);
  2102. // Ajouter le backdrop
  2103. const backdrop = document.createElement('div');
  2104. backdrop.className = 'modal-backdrop fade show';
  2105. document.body.appendChild(backdrop);
  2106. }
  2108. function closeModal (button) {
  2109. const modal = button.closest('.modal');
  2110. const backdrop = document.querySelector('.modal-backdrop');
  2112. if (modal) {
  2113. modal.remove();
  2114. }
  2115. if (backdrop) {
  2116. backdrop.remove();
  2117. }
  2118. }
  2120. function copyToClipboard (text) {
  2121. navigator.clipboard.writeText(text).then(function () {
  2122. showNotification('Lien copié dans le presse-papiers !', 'success');
  2123. }, function (err) {
  2124. console.error('Erreur lors de la copie:', err);
  2125. showNotification('Erreur lors de la copie du lien', 'error');
  2126. });
  2127. }
  2129. // Fonction pour initialiser le chargement infini
  2130. function initInfiniteScroll () {
  2131. const loader = document.getElementById('infiniteScrollLoader');
  2132. const noMoreProducts = document.getElementById('noMoreProducts');
  2134. // Afficher le loader si il y a plus de produits
  2135. if (hasMoreProducts && loader) {
  2136. loader.style.display = 'block';
  2137. } else if (!hasMoreProducts && noMoreProducts) {
  2138. noMoreProducts.style.display = 'block';
  2139. }
  2141. // Observer pour détecter quand l'utilisateur arrive en bas
  2142. const observer = new IntersectionObserver((entries) => {
  2143. entries.forEach(entry => {
  2144. if (entry.isIntersecting && !isLoading && hasMoreProducts) {
  2145. loadMoreProducts();
  2146. }
  2147. });
  2148. }, {
  2149. root: null,
  2150. rootMargin: '200px', // Démarrer le chargement 200px avant d'arriver en bas
  2151. threshold: 0.1
  2152. });
  2154. // Observer le loader
  2155. if (loader) {
  2156. observer.observe(loader);
  2157. }
  2158. }
  2160. // Fonction pour mettre à jour l'affichage du bouton
  2161. function updateLoadMoreButton () {
  2162. const loadMoreContainer = document.getElementById('loadMoreContainer');
  2163. const noMoreProducts = document.getElementById('noMoreProducts');
  2165. if (hasMoreProducts) {
  2166. if (loadMoreContainer) {
  2167. loadMoreContainer.style.display = 'block';
  2168. }
  2169. if (noMoreProducts) {
  2170. noMoreProducts.style.display = 'none';
  2171. }
  2172. } else {
  2173. if (loadMoreContainer) {
  2174. loadMoreContainer.style.display = 'none';
  2175. }
  2176. if (noMoreProducts) {
  2177. noMoreProducts.style.display = 'block';
  2178. }
  2179. }
  2180. }
  2182. // Fonction pour initialiser les images des nouveaux produits
  2183. function initializeProductImages (container) {
  2184. const productCards = container.querySelectorAll('.single-product');
  2185. productCards.forEach(card => {
  2186. const productId = card.querySelector('.add-to-cart') ?. getAttribute('data-product-id');
  2187. if (productId) { // Récupérer les images depuis les attributs data ou depuis le DOM
  2188. const imgElement = card.querySelector('.main-product-img');
  2189. if (imgElement && imgElement.dataset.images) {
  2190. const images = JSON.parse(imgElement.dataset.images);
  2191. productImages[productId] = images;
  2192. currentImageIndex[productId] = 0;
  2193. }
  2194. }
  2195. });
  2196. }
  2198. // Fonction pour initialiser les event listeners des nouveaux produits
  2199. function initializeProductEventListeners (container) { // Boutons d'ajout au panier
  2200. const cartButtons = container.querySelectorAll('.add-to-cart');
  2201. cartButtons.forEach(button => {
  2202. button.addEventListener('click', function () {
  2203. const productId = this.getAttribute('data-product-id');
  2204. const qty = this.getAttribute('data-qty');
  2206. fetch('{{ path("ui_cart_add") }}', {
  2207. method: 'POST',
  2208. headers: {
  2209. 'Content-Type': 'application/x-www-form-urlencoded'
  2210. },
  2211. body: 'productId=' + productId + '&qty=' + qty
  2212. }).then(response => response.json()).then(data => {
  2213. if (data.ok) {
  2214. showEbayModal('Produit ajouté au panier !', 'success');
  2215. const cartBadge = document.querySelector('.cart-badge');
  2216. if (cartBadge) {
  2217. cartBadge.textContent = data.totalQty;
  2218. }
  2219. } else {
  2220. showEbayModal(data.message || 'Erreur lors de l\'ajout au panier', 'error');
  2221. }
  2222. }).catch(error => {
  2223. console.error('Erreur:', error);
  2224. showEbayModal('Erreur lors de l\'ajout au panier', 'error');
  2225. });
  2226. });
  2227. });
  2228. }
  2230. // La fonction showEbayModal est déjà définie plus haut
  2232. // Modal style eBay pour remplacer prompt()
  2233. function showEbayPromptModal (message, defaultValue = '') {
  2234. return new Promise((resolve) => {
  2235. const modalId = 'ebayPromptModal';
  2236. let existingModal = document.getElementById(modalId);
  2237. if (existingModal) {
  2238. existingModal.remove();
  2239. }
  2241. const modal = document.createElement('div');
  2242. modal.id = modalId;
  2243. modal.className = 'modal fade';
  2244. modal.setAttribute('tabindex', '-1');
  2245. modal.setAttribute('aria-labelledby', 'ebayPromptModalLabel');
  2246. modal.setAttribute('aria-hidden', 'true');
  2248. modal.innerHTML = `
  2249. <div class="modal-dialog modal-dialog-centered">
  2250. <div class="modal-content" style="border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
  2251. <div class="modal-header" style="border-bottom: 1px solid #e0e0e0; padding: 20px 24px;">
  2252. <h5 class="modal-title" id="ebayPromptModalLabel" style="font-weight: 600; font-size: 18px; color: #333;">
  2253. <i class="ti-pencil-alt" style="color: #0064D2; margin-right: 8px;"></i>Saisie
  2254. </h5>
  2255. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin: 0;"></button>
  2256. </div>
  2257. <div class="modal-body" style="padding: 24px;">
  2258. <p style="margin-bottom: 16px; font-size: 16px; color: #333;">${message}</p>
  2259. <input type="text" class="form-control" id="ebayPromptInput" value="${defaultValue}" style="border-radius: 4px; border: 1px solid #ccc; padding: 10px; font-size: 14px;" autofocus>
  2260. </div>
  2261. <div class="modal-footer" style="border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: flex-end;">
  2262. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="min-width: 80px; border-radius: 4px; font-weight: 500; margin-right: 8px;">
  2263. Annuler
  2264. </button>
  2265. <button type="button" class="btn btn-primary" id="ebayPromptConfirm" style="min-width: 80px; background-color: #0064D2; border-color: #0064D2; border-radius: 4px; font-weight: 500;">
  2266. OK
  2267. </button>
  2268. </div>
  2269. </div>
  2270. </div>
  2271. `;
  2273. document.body.appendChild(modal);
  2274. const bsModal = new bootstrap.Modal(modal);
  2275. const input = modal.querySelector('#ebayPromptInput');
  2276. const confirmBtn = modal.querySelector('#ebayPromptConfirm');
  2278. // Gérer la confirmation
  2279. confirmBtn.addEventListener('click', function () {
  2280. const value = input.value;
  2281. bsModal.hide();
  2282. resolve(value);
  2283. });
  2285. // Gérer l'annulation
  2286. modal.addEventListener('hidden.bs.modal', function () {
  2287. if (input.value === undefined || input.value === '') {
  2288. resolve(null);
  2289. }
  2290. modal.remove();
  2291. });
  2293. // Gérer la touche Entrée
  2294. input.addEventListener('keypress', function (e) {
  2295. if (e.key === 'Enter') {
  2296. confirmBtn.click();
  2297. }
  2298. });
  2300. bsModal.show();
  2301. input.focus();
  2302. input.select();
  2303. });
  2304. }
  2306. // Remplacer window.alert et window.prompt
  2307. window.alert = showEbayModal;
  2308. window.prompt = showEbayPromptModal;
  2310. </script>
  2312. <script>
  2313.     // Gestion du toggle de la sidebar sur mobile
  2314. document.addEventListener('DOMContentLoaded', function () {
  2315. const sidebarToggle = document.querySelector('.listing-sidebar-toggle');
  2316. const sidebarCollapse = document.getElementById('listingSidebarCollapse');
  2318. if (sidebarToggle && sidebarCollapse) { // Bootstrap 5 utilise des événements natifs
  2319. sidebarCollapse.addEventListener('show.bs.collapse', function () {
  2320. sidebarToggle.classList.remove('collapsed');
  2321. sidebarToggle.setAttribute('aria-expanded', 'true');
  2322. });
  2324. sidebarCollapse.addEventListener('hide.bs.collapse', function () {
  2325. sidebarToggle.classList.add('collapsed');
  2326. sidebarToggle.setAttribute('aria-expanded', 'false');
  2327. });
  2329. sidebarCollapse.addEventListener('shown.bs.collapse', function () {
  2330. sidebarToggle.classList.remove('collapsed');
  2331. });
  2333. sidebarCollapse.addEventListener('hidden.bs.collapse', function () {
  2334. sidebarToggle.classList.add('collapsed');
  2335. });
  2337. // Vérifier l'état initial
  2338. if (sidebarCollapse.classList.contains('show')) {
  2339. sidebarToggle.classList.remove('collapsed');
  2340. sidebarToggle.setAttribute('aria-expanded', 'true');
  2341. } else {
  2342. sidebarToggle.classList.add('collapsed');
  2343. sidebarToggle.setAttribute('aria-expanded', 'false');
  2344. }
  2345. }
  2346. });
  2348. // Synchroniser la recherche avec la barre de recherche du header
  2349. const headerSearchInput = document.getElementById('search_input');
  2350. if (headerSearchInput && typeof currentFilters !== 'undefined') { // Mettre à jour la valeur de la barre de recherche du header
  2351. headerSearchInput.value = currentFilters.q || '';
  2353. // Afficher le bouton clear si nécessaire
  2354. const clearSearchBtn = document.getElementById('clear_search_btn');
  2355. if (clearSearchBtn) {
  2356. clearSearchBtn.style.display = currentFilters.q ? 'block' : 'none';
  2357. }
  2358. }
  2360. // Réinitialiser tous les filtres
  2361. const resetFiltersBtn = document.getElementById('resetFiltersBtn');
  2362. if (resetFiltersBtn) {
  2363. resetFiltersBtn.addEventListener('click', function () {
  2364. resetAllFilters();
  2365. });
  2366. }
  2368. // Fonction pour réinitialiser tous les filtres
  2369. function resetAllFilters () {
  2370. currentFilters = {
  2371. category: '',
  2372. brand: '',
  2373. sort: 'newest',
  2374. priceMin: '',
  2375. priceMax: '',
  2376. page: 1,
  2377. q: '',
  2378. shop: '',
  2379. featured: '',
  2380. digital: '',
  2381. stockStatus: '',
  2382. ratingMin: '',
  2383. rating: '',
  2384. weightMin: '',
  2385. weightMax: '',
  2386. color: '',
  2387. size: '',
  2388. material: '',
  2389. condition: '',
  2390. availability: ''
  2391. };
  2393. // Réinitialiser la barre de recherche du header
  2394. const headerSearchInput = document.getElementById('search_input');
  2395. if (headerSearchInput) {
  2396. headerSearchInput.value = '';
  2397. }
  2398. const clearSearchBtn = document.getElementById('clear_search_btn');
  2399. if (clearSearchBtn) {
  2400. clearSearchBtn.style.display = 'none';
  2401. }
  2403. // Réinitialiser les inputs
  2404. document.getElementById('sortSelect').value = 'newest';
  2406. // Réinitialiser les radios
  2407. document.querySelectorAll('input[type="radio"]').forEach(radio => {
  2408. if (radio.id.includes('all-') || radio.id.includes('featured-all') || radio.id.includes('digital-all') || radio.id.includes('availability-all') || radio.id.includes('rating-all')) {
  2409. radio.checked = true;
  2410. } else {
  2411. radio.checked = false;
  2412. }
  2413. });
  2415. // Réinitialiser les inputs de prix et poids
  2416. const weightMinInput = document.getElementById('weightMin');
  2417. const weightMaxInput = document.getElementById('weightMax');
  2419. if (weightMinInput) 
  2420. weightMinInput.value = '';
  2422. if (weightMaxInput) 
  2423. weightMaxInput.value = '';
  2426. applyFilters();
  2427. updateActiveFilters();
  2428. }
  2430. // Fonction pour mettre à jour l'affichage des filtres actifs
  2431. function updateActiveFilters () {
  2432. const activeFiltersDiv = document.getElementById('activeFilters');
  2433. const activeFiltersList = document.getElementById('activeFiltersList');
  2434. const filters = [];
  2436. if (currentFilters.q) {
  2437. filters.push (`<span class="badge bg-primary">Recherche: "${
  2438. currentFilters.q
  2439. }"</span>`);
  2440. }
  2441. if (currentFilters.category) {
  2442. filters.push(`<span class="badge bg-secondary">Catégorie</span>`);
  2443. }
  2444. if (currentFilters.brand) {
  2445. filters.push(`<span class="badge bg-secondary">Marque</span>`);
  2446. }
  2447. if (currentFilters.priceMin || currentFilters.priceMax) {
  2448. filters.push(`<span class="badge bg-info">Prix</span>`);
  2449. }
  2450. if (currentFilters.featured === 'true') {
  2451. filters.push(`<span class="badge bg-warning">Produits vedettes</span>`);
  2452. }
  2453. if (currentFilters.digital === 'true') {
  2454. filters.push(`<span class="badge bg-success">Numériques</span>`);
  2455. }
  2456. if (currentFilters.digital === 'false') {
  2457. filters.push(`<span class="badge bg-success">Physiques</span>`);
  2458. }
  2459. if (currentFilters.availability) {
  2460. filters.push(`<span class="badge bg-info">Disponibilité</span>`);
  2461. }
  2462. if (currentFilters.ratingMin || currentFilters.rating) {
  2463. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  2464. filters.push (`<span class="badge bg-warning">Note ≥ ${ratingValue}</span>`);
  2465. }
  2466. if (currentFilters.weightMin || currentFilters.weightMax) {
  2467. filters.push(`<span class="badge bg-secondary">Poids</span>`);
  2468. }
  2470. if (filters.length > 0) {
  2471. activeFiltersList.innerHTML = filters.join(' ');
  2472. activeFiltersDiv.style.display = 'block';
  2473. } else {
  2474. activeFiltersDiv.style.display = 'none';
  2475. }
  2476. }
  2478. // Mettre à jour les filtres actifs au chargement et après chaque filtrage
  2479. document.addEventListener('DOMContentLoaded', function () {
  2480. updateActiveFilters();
  2481. });
  2483. // Mettre à jour les filtres actifs après chaque application de filtres
  2484. const originalApplyFilters = applyFilters;
  2485. applyFilters = function () {
  2486. originalApplyFilters();
  2487. setTimeout(updateActiveFilters, 100);
  2488. // Mettre à jour le compteur de filtres actifs
  2489. updateActiveFiltersCount();
  2490. };
  2492. // S'assurer que applyFilters est accessible globalement
  2493. window.applyFilters = applyFilters;
  2495. // Fonction pour mettre à jour le compteur de filtres actifs
  2496. function updateActiveFiltersCount () {
  2497. const count = Object.keys(currentFilters).filter(key => {
  2498. const value = currentFilters[key];
  2499. return value && value !== '' && key !== 'page' && key !== 'sort';
  2500. }).length;
  2502. const badge = document.getElementById('activeFiltersCount');
  2503. if (badge) {
  2504. if (count > 0) {
  2505. badge.textContent = count;
  2506. badge.style.display = 'inline-block';
  2507. } else {
  2508. badge.style.display = 'none';
  2509. }
  2510. }
  2511. }
  2513. // Initialiser le compteur au chargement
  2514. document.addEventListener('DOMContentLoaded', function () {
  2515. updateActiveFiltersCount();
  2516. });
  2517. </script>
  2519. <!-- Modal de filtres -->
  2520. <div class="modal fade" id="filtersModal" tabindex="-1" aria-labelledby="filtersModalLabel" aria-hidden="true">
  2521.     <div class="modal-dialog modal-lg">
  2522.         <div class="modal-content" style="display: flex; flex-direction: column; max-height: 90vh;">
  2523.             <div class="modal-header" style="flex-shrink: 0;">
  2524.                 <h5 class="modal-title" id="filtersModalLabel">
  2525.                     <i class="lnr lnr-filter me-2"></i>Filtres de recherche
  2526.                 </h5>
  2527.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  2528.             </div>
  2529.             <div class="modal-body" style="overflow-y: auto; flex: 1; min-height: 0;">
  2530.                 <div
  2531.                     class="row">
  2532.                     <!-- Colonne gauche -->
  2533.                     <div
  2534.                         class="col-md-6">
  2535.                         <!-- Marques -->
  2536.                         <div class="common-filter mb-4">
  2537.                             <div class="head">Marques</div>
  2538.                             <ul class="brand-list" id="modalBrandList">
  2539.                                 <li class="filter-list">
  2540.                                     <input class="pixel-radio" type="radio" id="modal-all-brands" name="modal-brand" checked>
  2541.                                     <label for="modal-all-brands">Toutes les marques</label>
  2542.                                 </li>
  2543.                                 {% for brand in brands %}
  2544.                                     <li class="filter-list">
  2545.                                         <input class="pixel-radio" type="radio" id="modal-brand-{{ brand.id }}" name="modal-brand" value="{{ brand.slug }}">
  2546.                                         <label for="modal-brand-{{ brand.id }}">{{ brand.name }}<span>({{ brand.getActiveProductsCount() }})</span>
  2547.                                         </label>
  2548.                                     </li>
  2549.                                 {% endfor %}
  2550.                             </ul>
  2551.                         </div>
  2553.                         <!-- Conditions -->
  2554.                         <div class="common-filter mb-4">
  2555.                             <div class="head">Condition</div>
  2556.                             <ul class="condition-list" id="modalConditionList">
  2557.                                 <li class="filter-list">
  2558.                                     <input class="pixel-radio" type="radio" id="modal-all-conditions" name="modal-condition" checked>
  2559.                                     <label for="modal-all-conditions">Toutes les conditions</label>
  2560.                                 </li>
  2561.                                 {% for condition in conditions %}
  2562.                                     <li class="filter-list">
  2563.                                         <input class="pixel-radio" type="radio" id="modal-condition-{{ condition.id }}" name="modal-condition" value="{{ condition.slug }}">
  2564.                                         <label for="modal-condition-{{ condition.id }}">{{ condition.name }}<span>({{ condition.getActiveProductsCount() }})</span>
  2565.                                         </label>
  2566.                                     </li>
  2567.                                 {% endfor %}
  2568.                             </ul>
  2569.                         </div>
  2571.                         <!-- Boutiques -->
  2572.                         <div class="common-filter mb-4">
  2573.                             <div class="head">Boutiques</div>
  2574.                             <div id="modalShopsFilter">
  2575.                                 <ul
  2576.                                     class="shop-list" id="modalShopList"><!-- Les boutiques seront chargées dynamiquement -->
  2577.                                 </ul>
  2578.                             </div>
  2579.                         </div>
  2581.                         <!-- Produits vedettes -->
  2582.                         <div class="common-filter mb-4">
  2583.                             <div class="head">Produits vedettes</div>
  2584.                             <ul>
  2585.                                 <li class="filter-list">
  2586.                                     <input class="pixel-radio" type="radio" id="modal-featured-all" name="modal-featured" checked>
  2587.                                     <label for="modal-featured-all">Tous les produits</label>
  2588.                                 </li>
  2589.                                 <li class="filter-list">
  2590.                                     <input class="pixel-radio" type="radio" id="modal-featured-only" name="modal-featured" value="true">
  2591.                                     <label for="modal-featured-only">Produits vedettes uniquement</label>
  2592.                                 </li>
  2593.                             </ul>
  2594.                         </div>
  2596.                         <!-- Type de produit -->
  2597.                         <div class="common-filter mb-4">
  2598.                             <div class="head">Type de produit</div>
  2599.                             <ul>
  2600.                                 <li class="filter-list">
  2601.                                     <input class="pixel-radio" type="radio" id="modal-digital-all" name="modal-digital" checked>
  2602.                                     <label for="modal-digital-all">Tous les types</label>
  2603.                                 </li>
  2604.                                 <li class="filter-list">
  2605.                                     <input class="pixel-radio" type="radio" id="modal-digital-physical" name="modal-digital" value="false">
  2606.                                     <label for="modal-digital-physical">Produits physiques</label>
  2607.                                 </li>
  2608.                                 <li class="filter-list">
  2609.                                     <input class="pixel-radio" type="radio" id="modal-digital-digital" name="modal-digital" value="true">
  2610.                                     <label for="modal-digital-digital">Produits numériques</label>
  2611.                                 </li>
  2612.                             </ul>
  2613.                         </div>
  2614.                     </div>
  2616.                     <!-- Colonne droite -->
  2617.                     <div
  2618.                         class="col-md-6">
  2619.                         <!-- Disponibilité -->
  2620.                         <div class="common-filter mb-4">
  2621.                             <div class="head">Disponibilité</div>
  2622.                             <ul>
  2623.                                 <li class="filter-list">
  2624.                                     <input class="pixel-radio" type="radio" id="modal-availability-all" name="modal-availability" checked>
  2625.                                     <label for="modal-availability-all">Tous</label>
  2626.                                 </li>
  2627.                                 <li class="filter-list">
  2628.                                     <input class="pixel-radio" type="radio" id="modal-availability-in-stock" name="modal-availability" value="in_stock">
  2629.                                     <label for="modal-availability-in-stock">En stock</label>
  2630.                                 </li>
  2631.                                 <li class="filter-list">
  2632.                                     <input class="pixel-radio" type="radio" id="modal-availability-low-stock" name="modal-availability" value="low_stock">
  2633.                                     <label for="modal-availability-low-stock">Stock faible</label>
  2634.                                 </li>
  2635.                                 <li class="filter-list">
  2636.                                     <input class="pixel-radio" type="radio" id="modal-availability-out-of-stock" name="modal-availability" value="out_of_stock">
  2637.                                     <label for="modal-availability-out-of-stock">Rupture de stock</label>
  2638.                                 </li>
  2639.                             </ul>
  2640.                         </div>
  2642.                         <!-- Note minimale -->
  2643.                         <div class="common-filter mb-4">
  2644.                             <div class="head">Note minimale</div>
  2645.                             <ul>
  2646.                                 <li class="filter-list">
  2647.                                     <input class="pixel-radio" type="radio" id="modal-rating-all" name="modal-rating" checked>
  2648.                                     <label for="modal-rating-all">Toutes les notes</label>
  2649.                                 </li>
  2650.                                 <li class="filter-list">
  2651.                                     <input class="pixel-radio" type="radio" id="modal-rating-4" name="modal-rating" value="4">
  2652.                                     <label for="modal-rating-4">4 étoiles et plus</label>
  2653.                                 </li>
  2654.                                 <li class="filter-list">
  2655.                                     <input class="pixel-radio" type="radio" id="modal-rating-3" name="modal-rating" value="3">
  2656.                                     <label for="modal-rating-3">3 étoiles et plus</label>
  2657.                                 </li>
  2658.                                 <li class="filter-list">
  2659.                                     <input class="pixel-radio" type="radio" id="modal-rating-2" name="modal-rating" value="2">
  2660.                                     <label for="modal-rating-2">2 étoiles et plus</label>
  2661.                                 </li>
  2662.                             </ul>
  2663.                         </div>
  2665.                         <!-- Prix -->
  2666.                         <div class="common-filter mb-4">
  2667.                             <div class="head">Prix (HTG)</div>
  2668.                             <div class="price-range-area">
  2669.                                 <div class="d-flex gap-3">
  2670.                                     <div class="flex-grow-1">
  2671.                                         <label class="form-label">Min</label>
  2672.                                         <input type="number" class="form-control" id="modal-priceMin" placeholder="0" min="0" step="0.01">
  2673.                                     </div>
  2674.                                     <div class="flex-grow-1">
  2675.                                         <label class="form-label">Max</label>
  2676.                                         <input type="number" class="form-control" id="modal-priceMax" placeholder="999999" min="0" step="0.01">
  2677.                                     </div>
  2678.                                 </div>
  2679.                             </div>
  2680.                         </div>
  2682.                         <!-- Poids -->
  2683.                         <div class="common-filter mb-4">
  2684.                             <div class="head">Poids (kg)</div>
  2685.                             <div class="weight-range-area">
  2686.                                 <div class="d-flex gap-3">
  2687.                                     <div class="flex-grow-1">
  2688.                                         <label class="form-label">Min</label>
  2689.                                         <input type="number" class="form-control" id="modal-weightMin" placeholder="0" step="0.1" min="0">
  2690.                                     </div>
  2691.                                     <div class="flex-grow-1">
  2692.                                         <label class="form-label">Max</label>
  2693.                                         <input type="number" class="form-control" id="modal-weightMax" placeholder="100" step="0.1" min="0">
  2694.                                     </div>
  2695.                                 </div>
  2696.                             </div>
  2697.                         </div>
  2699.                         <!-- Couleur -->
  2700.                         <div class="common-filter mb-4">
  2701.                             <div class="head">Couleur</div>
  2702.                             <div id="modalColorsFilter">
  2703.                                 <ul
  2704.                                     class="color-list" id="modalColorList"><!-- Les couleurs seront chargées dynamiquement -->
  2705.                                 </ul>
  2706.                             </div>
  2707.                         </div>
  2709.                         <!-- Taille -->
  2710.                         <div class="common-filter mb-4">
  2711.                             <div class="head">Taille</div>
  2712.                             <div id="modalSizesFilter">
  2713.                                 <ul
  2714.                                     class="size-list" id="modalSizeList"><!-- Les tailles seront chargées dynamiquement -->
  2715.                                 </ul>
  2716.                             </div>
  2717.                         </div>
  2719.                         <!-- Matériau -->
  2720.                         <div class="common-filter mb-4">
  2721.                             <div class="head">Matériau</div>
  2722.                             <div id="modalMaterialsFilter">
  2723.                                 <ul
  2724.                                     class="material-list" id="modalMaterialList"><!-- Les matériaux seront chargés dynamiquement -->
  2725.                                 </ul>
  2726.                             </div>
  2727.                         </div>
  2728.                     </div>
  2729.                 </div>
  2730.             </div>
  2731.             <div class="modal-footer" style="flex-shrink: 0; border-top: 1px solid #dee2e6; padding: 1rem 1.5rem; background: #f8f9fa;">
  2732.                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
  2733.                     <i class="lnr lnr-cross-circle me-1"></i>Annuler
  2734.                 </button>
  2735.                 <button type="button" class="btn btn-outline-danger" id="modalResetFiltersBtn">
  2736.                     <i class="lnr lnr-refresh me-1"></i>Réinitialiser
  2737.                 </button>
  2738.                 <button type="button" class="btn btn-primary" id="modalApplyFiltersBtn">
  2739.                     <i class="lnr lnr-checkmark-circle me-1"></i>Appliquer les filtres
  2740.                 </button>
  2741.             </div>
  2742.         </div>
  2743.     </div>
  2744. </div>
  2746. <script>
  2747.     // Synchroniser les filtres du modal avec currentFilters au chargement
  2748. document.addEventListener('DOMContentLoaded', function () {
  2749. console.log('[Modal] Initializing filter modal...');
  2751. // Fonction pour synchroniser les valeurs du modal avec currentFilters
  2752. function syncModalFilters() {
  2753. console.log('[Modal] Syncing filters with currentFilters:', currentFilters);
  2755. // Réinitialiser tous les radios "Tous" d'abord
  2756. document.querySelectorAll('#filtersModal input[type="radio"][id*="-all"]').forEach(radio => {
  2757. radio.checked = true;
  2758. });
  2760. // Marques
  2761. if (currentFilters.brand) {
  2762. const brandRadio = document.querySelector (`#modalBrandList input[value="${
  2763. currentFilters.brand
  2764. }"]`);
  2765. if (brandRadio) {
  2766. brandRadio.checked = true;
  2767. console.log('[Modal] Brand synced:', currentFilters.brand);
  2768. }
  2769. } else {
  2770. const allBrands = document.getElementById('modal-all-brands');
  2771. if (allBrands) 
  2772. allBrands.checked = true;
  2774. }
  2776. // Conditions
  2777. if (currentFilters.condition) {
  2778. const conditionRadio = document.querySelector (`#modalConditionList input[value="${
  2779. currentFilters.condition
  2780. }"]`);
  2781. if (conditionRadio) {
  2782. conditionRadio.checked = true;
  2783. console.log('[Modal] Condition synced:', currentFilters.condition);
  2784. }
  2785. } else {
  2786. const allConditions = document.getElementById('modal-all-conditions');
  2787. if (allConditions) 
  2788. allConditions.checked = true;
  2790. }
  2792. // Featured
  2793. if (currentFilters.featured === 'true') {
  2794. const featuredRadio = document.getElementById('modal-featured-only');
  2795. if (featuredRadio) {
  2796. featuredRadio.checked = true;
  2797. console.log('[Modal] Featured synced');
  2798. }
  2799. } else {
  2800. const allFeatured = document.getElementById('modal-featured-all');
  2801. if (allFeatured) 
  2802. allFeatured.checked = true;
  2804. }
  2806. // Digital
  2807. if (currentFilters.digital === 'true') {
  2808. const digitalRadio = document.getElementById('modal-digital-digital');
  2809. if (digitalRadio) 
  2810. digitalRadio.checked = true;
  2812. } else if (currentFilters.digital === 'false') {
  2813. const physicalRadio = document.getElementById('modal-digital-physical');
  2814. if (physicalRadio) 
  2815. physicalRadio.checked = true;
  2817. } else {
  2818. const allDigital = document.getElementById('modal-digital-all');
  2819. if (allDigital) 
  2820. allDigital.checked = true;
  2822. }
  2824. // Availability
  2825. if (currentFilters.availability) {
  2826. const availabilityId = `modal-availability-${
  2827. currentFilters.availability.replace('_', '-')
  2828. }`;
  2829. const availabilityRadio = document.getElementById(availabilityId);
  2830. if (availabilityRadio) {
  2831. availabilityRadio.checked = true;
  2832. console.log('[Modal] Availability synced:', currentFilters.availability);
  2833. }
  2834. } else {
  2835. const allAvailability = document.getElementById('modal-availability-all');
  2836. if (allAvailability) 
  2837. allAvailability.checked = true;
  2839. }
  2841. // Rating
  2842. if (currentFilters.ratingMin || currentFilters.rating) {
  2843. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  2844. const ratingRadio = document.getElementById (`modal-rating-${ratingValue}`);
  2845. if (ratingRadio) {
  2846. ratingRadio.checked = true;
  2847. console.log('[Modal] Rating synced:', ratingValue);
  2848. }
  2849. } else {
  2850. const allRating = document.getElementById('modal-rating-all');
  2851. if (allRating) 
  2852. allRating.checked = true;
  2854. }
  2856. // Prix
  2857. const priceMinInput = document.getElementById('modal-priceMin');
  2858. const priceMaxInput = document.getElementById('modal-priceMax');
  2859. if (priceMinInput) 
  2860. priceMinInput.value = currentFilters.priceMin || '';
  2862. if (priceMaxInput) 
  2863. priceMaxInput.value = currentFilters.priceMax || '';
  2866. // Poids
  2867. const weightMinInput = document.getElementById('modal-weightMin');
  2868. const weightMaxInput = document.getElementById('modal-weightMax');
  2869. if (weightMinInput) 
  2870. weightMinInput.value = currentFilters.weightMin || '';
  2872. if (weightMaxInput) 
  2873. weightMaxInput.value = currentFilters.weightMax || '';
  2876. console.log('[Modal] Filters synced successfully');
  2877. }
  2879. // Fonction pour charger les filtres dynamiques dans le modal
  2880. function loadDynamicFiltersToModal() {
  2881. console.log('[Modal] Loading dynamic filters...');
  2883. // Boutiques
  2884. const sidebarShopList = document.getElementById('shopList');
  2885. const modalShopList = document.getElementById('modalShopList');
  2886. if (modalShopList) { // Si la sidebar a déjà les boutiques, les copier
  2887. if (sidebarShopList && sidebarShopList.innerHTML.trim() && ! sidebarShopList.innerHTML.includes('Aucune boutique') && ! sidebarShopList.innerHTML.includes('seront chargées')) {
  2888. let shopHtml = sidebarShopList.innerHTML.replace(/id="all-shops"/g, 'id="modal-all-shops"').replace(/id="shop-/g, 'id="modal-shop-').replace(/name="shop"/g, 'name="modal-shop"').replace(/for="all-shops"/g, 'for="modal-all-shops"').replace(/for="shop-/g, 'for="modal-shop-');
  2889. modalShopList.innerHTML = shopHtml;
  2891. // Synchroniser la sélection
  2892. if (currentFilters.shop) {
  2893. const shopRadio = document.querySelector (`#modalShopList input[value="${
  2894. currentFilters.shop
  2895. }"]`);
  2896. if (shopRadio) 
  2897. shopRadio.checked = true;
  2899. } else {
  2900. const allShops = document.getElementById('modal-all-shops');
  2901. if (allShops) 
  2902. allShops.checked = true;
  2904. }
  2905. console.log('[Modal] Shops loaded from sidebar');
  2906. } else { // Si pas encore chargés, afficher un message ou laisser vide
  2907. if (! modalShopList.innerHTML.trim() || modalShopList.innerHTML.includes('seront chargées')) {
  2908. modalShopList.innerHTML = '<li class="filter-list"><span class="text-muted">Les boutiques seront chargées lors de l\'application des filtres</span></li>';
  2909. }
  2910. }
  2911. }
  2913. // Couleurs
  2914. const sidebarColorList = document.getElementById('colorList');
  2915. const modalColorList = document.getElementById('modalColorList');
  2916. if (sidebarColorList && modalColorList) {
  2917. if (sidebarColorList.innerHTML.trim() && ! sidebarColorList.innerHTML.includes('Aucun')) {
  2918. let colorHtml = sidebarColorList.innerHTML.replace(/id="all-color"/g, 'id="modal-all-color"').replace(/id="color-/g, 'id="modal-color-').replace(/name="color"/g, 'name="modal-color"').replace(/for="all-color"/g, 'for="modal-all-color"').replace(/for="color-/g, 'for="modal-color-');
  2919. modalColorList.innerHTML = colorHtml;
  2921. // Synchroniser la sélection
  2922. if (currentFilters.color) {
  2923. const colorRadio = document.querySelector (`#modalColorList input[value="${
  2924. currentFilters.color
  2925. }"]`);
  2926. if (colorRadio) 
  2927. colorRadio.checked = true;
  2929. } else {
  2930. const allColor = document.getElementById('modal-all-color');
  2931. if (allColor) 
  2932. allColor.checked = true;
  2934. }
  2935. console.log('[Modal] Colors loaded');
  2936. }
  2937. }
  2939. // Tailles
  2940. const sidebarSizeList = document.getElementById('sizeList');
  2941. const modalSizeList = document.getElementById('modalSizeList');
  2942. if (sidebarSizeList && modalSizeList) {
  2943. if (sidebarSizeList.innerHTML.trim() && ! sidebarSizeList.innerHTML.includes('Aucun')) {
  2944. let sizeHtml = sidebarSizeList.innerHTML.replace(/id="all-size"/g, 'id="modal-all-size"').replace(/id="size-/g, 'id="modal-size-').replace(/name="size"/g, 'name="modal-size"').replace(/for="all-size"/g, 'for="modal-all-size"').replace(/for="size-/g, 'for="modal-size-');
  2945. modalSizeList.innerHTML = sizeHtml;
  2947. // Synchroniser la sélection
  2948. if (currentFilters.size) {
  2949. const sizeRadio = document.querySelector (`#modalSizeList input[value="${
  2950. currentFilters.size
  2951. }"]`);
  2952. if (sizeRadio) 
  2953. sizeRadio.checked = true;
  2955. } else {
  2956. const allSize = document.getElementById('modal-all-size');
  2957. if (allSize) 
  2958. allSize.checked = true;
  2960. }
  2961. console.log('[Modal] Sizes loaded');
  2962. }
  2963. }
  2965. // Matériaux
  2966. const sidebarMaterialList = document.getElementById('materialList');
  2967. const modalMaterialList = document.getElementById('modalMaterialList');
  2968. if (sidebarMaterialList && modalMaterialList) {
  2969. if (sidebarMaterialList.innerHTML.trim() && ! sidebarMaterialList.innerHTML.includes('Aucun')) {
  2970. let materialHtml = sidebarMaterialList.innerHTML.replace(/id="all-material"/g, 'id="modal-all-material"').replace(/id="material-/g, 'id="modal-material-').replace(/name="material"/g, 'name="modal-material"').replace(/for="all-material"/g, 'for="modal-all-material"').replace(/for="material-/g, 'for="modal-material-');
  2971. modalMaterialList.innerHTML = materialHtml;
  2973. // Synchroniser la sélection
  2974. if (currentFilters.material) {
  2975. const materialRadio = document.querySelector (`#modalMaterialList input[value="${
  2976. currentFilters.material
  2977. }"]`);
  2978. if (materialRadio) 
  2979. materialRadio.checked = true;
  2981. } else {
  2982. const allMaterial = document.getElementById('modal-all-material');
  2983. if (allMaterial) 
  2984. allMaterial.checked = true;
  2986. }
  2987. console.log('[Modal] Materials loaded');
  2988. }
  2989. }
  2990. }
  2992. // Synchroniser à l'ouverture du modal
  2993. const filtersModal = document.getElementById('filtersModal');
  2994. if (filtersModal) {
  2995. filtersModal.addEventListener('show.bs.modal', function () {
  2996. console.log('[Modal] Modal opening, syncing filters...');
  2998. // Charger les filtres dynamiques d'abord si pas encore chargés
  2999. loadDynamicFiltersToModal();
  3001. // Puis synchroniser les valeurs
  3002. setTimeout(() => {
  3003. syncModalFilters();
  3004. }, 100);
  3005. });
  3006. }
  3008. // Charger les filtres dynamiques au chargement initial si la sidebar les a déjà
  3009. loadDynamicFiltersToModal();
  3011. // Bouton Appliquer les filtres
  3012. const applyBtn = document.getElementById('modalApplyFiltersBtn');
  3013. if (applyBtn) {
  3014. applyBtn.addEventListener('click', function (e) {
  3015. e.preventDefault();
  3016. console.log('[Modal] Apply button clicked, collecting filter values...');
  3018. // Collecter les valeurs du modal
  3019. const brandRadio = document.querySelector('#modalBrandList input[name="modal-brand"]:checked');
  3020. if (brandRadio) {
  3021. currentFilters.brand = brandRadio.id !== 'modal-all-brands' ? brandRadio.value : '';
  3022. console.log('[Modal] Brand:', currentFilters.brand);
  3023. } else {
  3024. currentFilters.brand = '';
  3025. console.log('[Modal] Brand: No selection found');
  3026. }
  3028. // Conditions
  3029. const conditionRadio = document.querySelector('#modalConditionList input[name="modal-condition"]:checked');
  3030. if (conditionRadio) {
  3031. currentFilters.condition = conditionRadio.id !== 'modal-all-conditions' ? conditionRadio.value : '';
  3032. console.log('[Modal] Condition:', currentFilters.condition);
  3033. } else {
  3034. currentFilters.condition = '';
  3035. }
  3037. // Featured
  3038. const featuredRadio = document.querySelector('#filtersModal input[name="modal-featured"]:checked');
  3039. if (featuredRadio) {
  3040. currentFilters.featured = featuredRadio.id !== 'modal-featured-all' ? featuredRadio.value : '';
  3041. console.log('[Modal] Featured:', currentFilters.featured);
  3042. } else {
  3043. currentFilters.featured = '';
  3044. }
  3046. // Digital
  3047. const digitalRadio = document.querySelector('#filtersModal input[name="modal-digital"]:checked');
  3048. if (digitalRadio) {
  3049. currentFilters.digital = digitalRadio.id !== 'modal-digital-all' ? digitalRadio.value : '';
  3050. console.log('[Modal] Digital:', currentFilters.digital);
  3051. } else {
  3052. currentFilters.digital = '';
  3053. }
  3055. // Availability
  3056. const availabilityRadio = document.querySelector('#filtersModal input[name="modal-availability"]:checked');
  3057. if (availabilityRadio) {
  3058. currentFilters.availability = availabilityRadio.id !== 'modal-availability-all' ? availabilityRadio.value : '';
  3059. console.log('[Modal] Availability:', currentFilters.availability);
  3060. } else {
  3061. currentFilters.availability = '';
  3062. }
  3064. // Rating
  3065. const ratingRadio = document.querySelector('#filtersModal input[name="modal-rating"]:checked');
  3066. if (ratingRadio && ratingRadio.id !== 'modal-rating-all') {
  3067. currentFilters.ratingMin = ratingRadio.value;
  3068. currentFilters.rating = ratingRadio.value;
  3069. console.log('[Modal] Rating:', currentFilters.ratingMin);
  3070. } else {
  3071. currentFilters.ratingMin = '';
  3072. currentFilters.rating = '';
  3073. }
  3075. // Prix
  3076. const priceMinInput = document.getElementById('modal-priceMin');
  3077. const priceMaxInput = document.getElementById('modal-priceMax');
  3078. currentFilters.priceMin = priceMinInput ? priceMinInput.value.trim() : '';
  3079. currentFilters.priceMax = priceMaxInput ? priceMaxInput.value.trim() : '';
  3080. console.log('[Modal] Price:', currentFilters.priceMin, '-', currentFilters.priceMax);
  3082. // Poids
  3083. const weightMinInput = document.getElementById('modal-weightMin');
  3084. const weightMaxInput = document.getElementById('modal-weightMax');
  3085. currentFilters.weightMin = weightMinInput ? weightMinInput.value.trim() : '';
  3086. currentFilters.weightMax = weightMaxInput ? weightMaxInput.value.trim() : '';
  3087. console.log('[Modal] Weight:', currentFilters.weightMin, '-', currentFilters.weightMax);
  3089. // Couleur
  3090. const colorRadio = document.querySelector('#modalColorList input[name="modal-color"]:checked');
  3091. if (colorRadio) {
  3092. currentFilters.color = colorRadio.id !== 'modal-all-color' ? colorRadio.value : '';
  3093. console.log('[Modal] Color:', currentFilters.color);
  3094. } else {
  3095. currentFilters.color = '';
  3096. }
  3098. // Taille
  3099. const sizeRadio = document.querySelector('#modalSizeList input[name="modal-size"]:checked');
  3100. if (sizeRadio) {
  3101. currentFilters.size = sizeRadio.id !== 'modal-all-size' ? sizeRadio.value : '';
  3102. console.log('[Modal] Size:', currentFilters.size);
  3103. } else {
  3104. currentFilters.size = '';
  3105. }
  3107. // Matériau
  3108. const materialRadio = document.querySelector('#modalMaterialList input[name="modal-material"]:checked');
  3109. if (materialRadio) {
  3110. currentFilters.material = materialRadio.id !== 'modal-all-material' ? materialRadio.value : '';
  3111. console.log('[Modal] Material:', currentFilters.material);
  3112. } else {
  3113. currentFilters.material = '';
  3114. }
  3116. // Boutiques
  3117. const shopRadio = document.querySelector('#modalShopList input[name="modal-shop"]:checked');
  3118. if (shopRadio) {
  3119. currentFilters.shop = shopRadio.id !== 'modal-all-shops' ? shopRadio.value : '';
  3120. console.log('[Modal] Shop:', currentFilters.shop);
  3121. } else {
  3122. currentFilters.shop = '';
  3123. }
  3125. currentFilters.page = 1;
  3127. console.log('[Modal] All filters collected:', currentFilters);
  3129. // Fermer le modal d'abord
  3130. const modalElement = document.getElementById('filtersModal');
  3131. const modal = bootstrap.Modal.getInstance(modalElement);
  3132. if (modal) {
  3133. modal.hide();
  3134. console.log('[Modal] Modal closed');
  3135. }
  3137. // Appliquer les filtres après un court délai pour laisser le modal se fermer
  3138. setTimeout(() => { // Vérifier que applyFilters existe
  3139. if (typeof window.applyFilters === 'function') {
  3140. console.log('[Modal] Calling applyFilters()...');
  3141. window.applyFilters();
  3142. // Mettre à jour le compteur de filtres actifs
  3143. setTimeout(() => {
  3144. if (typeof updateActiveFiltersCount === 'function') {
  3145. updateActiveFiltersCount();
  3146. }
  3147. }, 100);
  3148. } else {
  3149. console.error('[Modal] applyFilters is not available!', typeof window.applyFilters);
  3150. // Essayer de recharger la page avec les nouveaux paramètres
  3151. const url = new URL(window.location.href);
  3152. Object.keys(currentFilters).forEach(key => {
  3153. if (currentFilters[key] && currentFilters[key] !== '') {
  3154. let apiKey = key;
  3155. if (key === 'priceMin') {
  3156. apiKey = 'price_min';
  3157. } else if (key === 'priceMax') {
  3158. apiKey = 'price_max';
  3159. } else if (key === 'ratingMin') {
  3160. apiKey = 'rating_min';
  3161. } else if (key === 'weightMin') {
  3162. apiKey = 'weight_min';
  3163. } else if (key === 'weightMax') {
  3164. apiKey = 'weight_max';
  3165. } else if (key === 'stockStatus') {
  3166. apiKey = 'stock_status';
  3167. }
  3169. url.searchParams.set(apiKey, currentFilters[key]);
  3170. } else {
  3171. let apiKey = key;
  3172. if (key === 'priceMin') {
  3173. apiKey = 'price_min';
  3174. } else if (key === 'priceMax') {
  3175. apiKey = 'price_max';
  3176. } else if (key === 'ratingMin') {
  3177. apiKey = 'rating_min';
  3178. } else if (key === 'weightMin') {
  3179. apiKey = 'weight_min';
  3180. } else if (key === 'weightMax') {
  3181. apiKey = 'weight_max';
  3182. } else if (key === 'stockStatus') {
  3183. apiKey = 'stock_status';
  3184. }
  3186. url.searchParams.delete(apiKey);
  3187. }
  3188. });
  3189. window.location.href = url.toString();
  3190. }
  3191. }, 300);
  3192. });
  3193. } else {
  3194. console.error('[Modal] Apply button not found!');
  3195. }
  3197. // Bouton Réinitialiser
  3198. const resetBtn = document.getElementById('modalResetFiltersBtn');
  3199. if (resetBtn) {
  3200. resetBtn.addEventListener('click', function () {
  3201. console.log('[Modal] Reset button clicked');
  3203. // Réinitialiser tous les filtres du modal
  3204. document.querySelectorAll('#filtersModal input[type="radio"]').forEach(radio => {
  3205. if (radio.id && radio.id.includes('-all')) {
  3206. radio.checked = true;
  3207. } else {
  3208. radio.checked = false;
  3209. }
  3210. });
  3212. const priceMinInput = document.getElementById('modal-priceMin');
  3213. const priceMaxInput = document.getElementById('modal-priceMax');
  3214. const weightMinInput = document.getElementById('modal-weightMin');
  3215. const weightMaxInput = document.getElementById('modal-weightMax');
  3217. if (priceMinInput) 
  3218. priceMinInput.value = '';
  3220. if (priceMaxInput) 
  3221. priceMaxInput.value = '';
  3223. if (weightMinInput) 
  3224. weightMinInput.value = '';
  3226. if (weightMaxInput) 
  3227. weightMaxInput.value = '';
  3230. // Réinitialiser currentFilters (garder category et sort)
  3231. const category = currentFilters.category || '';
  3232. const sort = currentFilters.sort || 'newest';
  3233. currentFilters = {
  3234. category: category,
  3235. sort: sort,
  3236. page: 1,
  3237. brand: '',
  3238. condition: '',
  3239. featured: '',
  3240. digital: '',
  3241. availability: '',
  3242. ratingMin: '',
  3243. rating: '',
  3244. priceMin: '',
  3245. priceMax: '',
  3246. weightMin: '',
  3247. weightMax: '',
  3248. color: '',
  3249. size: '',
  3250. material: '',
  3251. shop: ''
  3252. };
  3254. console.log('[Modal] Filters reset, currentFilters:', currentFilters);
  3256. // Fermer le modal d'abord
  3257. const modalElement = document.getElementById('filtersModal');
  3258. const modal = bootstrap.Modal.getInstance(modalElement);
  3259. if (modal) {
  3260. modal.hide();
  3261. console.log('[Modal] Modal closed after reset');
  3262. }
  3264. // Appliquer les filtres après un court délai
  3265. setTimeout(() => {
  3266. if (typeof window.applyFilters === 'function') {
  3267. window.applyFilters();
  3268. } else {
  3269. console.error('[Modal] applyFilters not available, reloading page...');
  3270. // Recharger la page avec les filtres réinitialisés
  3271. const url = new URL(window.location.href);
  3272. url.searchParams.delete('price_min');
  3273. url.searchParams.delete('price_max');
  3274. url.searchParams.delete('rating_min');
  3275. url.searchParams.delete('weight_min');
  3276. url.searchParams.delete('weight_max');
  3277. url.searchParams.delete('brand');
  3278. url.searchParams.delete('condition');
  3279. url.searchParams.delete('featured');
  3280. url.searchParams.delete('digital');
  3281. url.searchParams.delete('availability');
  3282. url.searchParams.delete('color');
  3283. url.searchParams.delete('size');
  3284. url.searchParams.delete('material');
  3285. url.searchParams.delete('shop');
  3286. window.location.href = url.toString();
  3287. }
  3288. }, 300);
  3289. });
  3290. } else {
  3291. console.error('[Modal] Reset button not found!');
  3292. }
  3294. // S'assurer que les filtres dynamiques sont chargés au premier chargement si disponibles
  3295. setTimeout(() => {
  3296. loadDynamicFiltersToModal();
  3297. }, 500);
  3298. });
  3299. </script>{% endblock %}