var/cache/dev/twig/c0/c04a5fdd74c8e9f784ba4242ea93c0af.php line 56

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* home/listing.html.twig */
  18. class __TwigTemplate_aa414e651db26efa98eb1f11d53e7f48 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'body' => [$this, 'block_body'],
  34.             'title' => [$this, 'block_title'],
  35.             'stylesheets' => [$this, 'block_stylesheets'],
  36.             'javascripts' => [$this, 'block_javascripts'],
  37.         ];
  38.     }
  40.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  41.     {
  42.         // line 1
  43.         return "base_home.html.twig";
  44.     }
  46.     protected function doDisplay(array $context, array $blocks = []): iterable
  47.     {
  48.         $macros = $this->macros;
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  50.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/listing.html.twig"));
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  53.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/listing.html.twig"));
  55.         $this->parent = $this->load("base_home.html.twig", 1);
  56.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  57.         
  58.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  60.         
  61.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  63.     }
  65.     // line 3
  66.     /**
  67.      * @return iterable<null|scalar|\Stringable>
  68.      */
  69.     public function block_body(array $context, array $blocks = []): iterable
  70.     {
  71.         $macros = $this->macros;
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  73.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  76.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  78.         // line 4
  79.         yield "
  80. \t<!-- Start Banner Area -->
  81. \t<section class=\"banner-area organic-breadcrumb\">
  82. \t\t<div class=\"container\">
  83. \t\t\t<div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  84. \t\t\t\t<div class=\"col-first\">
  85. \t\t\t\t\t<h1>Page de listage de produit</h1>
  86. \t\t\t\t\t<nav class=\"d-flex align-items-center\">
  87. \t\t\t\t\t\t<a href=\"";
  88.         // line 12
  89.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_home");
  90.         yield "\">Accueil<span class=\"lnr lnr-arrow-right\"></span>
  91. \t\t\t\t\t\t</a>
  92. \t\t\t\t\t\t<a href=\"javascript:void(0);\">Liste des produits</a>
  93. \t\t\t\t\t</nav>
  94. \t\t\t\t</div>
  95. \t\t\t</div>
  96. \t\t</div>
  97. \t</section>
  98. \t<!-- End Banner Area -->
  100. \t<div class=\"container\">
  101. \t\t<div class=\"row\">
  102. \t\t\t<div class=\"col-xl-3 col-lg-4 col-md-5\">
  103. \t\t\t\t<!-- Bouton toggle sidebar mobile -->
  104. \t\t\t\t<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\">
  105. \t\t\t\t\t<i class=\"lnr lnr-menu me-2\"></i>Filtres et catégories
  106. \t\t\t\t\t<i class=\"lnr lnr-chevron-down ms-2 toggle-icon\"></i>
  107. \t\t\t\t</button>
  109. \t\t\t\t<!-- Sidebar avec collapse -->
  110. \t\t\t\t<div class=\"collapse d-md-block\" id=\"listingSidebarCollapse\">
  111. \t\t\t\t\t<div class=\"sidebar-categories\">
  112. \t\t\t\t\t\t<div class=\"head\">Catégories</div>
  113. \t\t\t\t\t\t<ul class=\"main-categories\">
  114. \t\t\t\t\t\t\t<li class=\"main-nav-list\">
  115. \t\t\t\t\t\t\t\t<a href=\"";
  116.         // line 37
  117.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing");
  118.         yield "\" class=\"category-link ";
  119.         if ((($tmp =  !($context["currentCategory"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  120.             yield "active";
  121.         }
  122.         yield "\">
  123. \t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-tag\"></span>Toutes les catégories
  124. \t\t\t\t\t\t\t\t\t<span class=\"number\">(";
  125.         // line 39
  126.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["totalProducts"] ?? null), "html", null, true);
  127.         yield ")</span>
  128. \t\t\t\t\t\t\t\t</a>
  129. \t\t\t\t\t\t\t</li>
  130. \t\t\t\t\t\t\t";
  131.         // line 42
  132.         $context['_parent'] = $context;
  133.         $context['_seq'] = CoreExtension::ensureTraversable(($context["categories"] ?? null));
  134.         $context['_iterated'] = false;
  135.         foreach ($context['_seq'] as $context["_key"] => $context["category"]) {
  136.             // line 43
  137.             yield "\t\t\t\t\t\t\t\t<li class=\"main-nav-list\">
  138. \t\t\t\t\t\t\t\t\t<a href=\"";
  139.             // line 44
  140.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_listing", ["category" => CoreExtension::getAttribute($this->env, $this->source, $context["category"], "slug", [], "any", false, false, false, 44)]), "html", null, true);
  141.             yield "\" class=\"category-link ";
  142.             if ((($context["currentCategory"] ?? null) == CoreExtension::getAttribute($this->env, $this->source, $context["category"], "slug", [], "any", false, false, false, 44))) {
  143.                 yield "active";
  144.             }
  145.             yield "\" data-category=\"";
  146.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "slug", [], "any", false, false, false, 44), "html", null, true);
  147.             yield "\">
  148. \t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-tag\"></span>
  149. \t\t\t\t\t\t\t\t\t\t";
  150.             // line 46
  151.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["category"], "name", [], "any", false, false, false, 46), "html", null, true);
  152.             yield "
  153. \t\t\t\t\t\t\t\t\t\t<span class=\"number\">(";
  154.             // line 47
  155.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, $context["category"], "products", [], "any", false, false, false, 47)), "html", null, true);
  156.             yield ")</span>
  157. \t\t\t\t\t\t\t\t\t</a>
  158. \t\t\t\t\t\t\t\t</li>
  159. \t\t\t\t\t\t\t";
  160.             $context['_iterated'] = true;
  161.         }
  162.         // line 50
  163.         if (!$context['_iterated']) {
  164.             // line 51
  165.             yield "\t\t\t\t\t\t\t\t<li class=\"main-nav-list\">
  166. \t\t\t\t\t\t\t\t\t<span>Aucune catégorie</span>
  167. \t\t\t\t\t\t\t\t</li>
  168. \t\t\t\t\t\t\t";
  169.         }
  170.         $_parent = $context['_parent'];
  171.         unset($context['_seq'], $context['_key'], $context['category'], $context['_parent'], $context['_iterated']);
  172.         $context = array_intersect_key($context, $_parent) + $_parent;
  173.         // line 55
  174.         yield "\t\t\t\t\t\t</ul>
  175. \t\t\t\t\t</div>
  176. \t\t\t\t\t<div class=\"sidebar-filter mt-50\" id=\"brandsFilter\">
  177. \t\t\t\t\t\t<div class=\"top-filter-head\">Filtres</div>
  178. \t\t\t\t\t\t<div class=\"common-filter\">
  179. \t\t\t\t\t\t\t<div class=\"head\">Marques</div>
  180. \t\t\t\t\t\t\t<ul class=\"brand-list\" id=\"brandList\">
  181. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  182. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"all-brands\" name=\"brand\" checked>
  183. \t\t\t\t\t\t\t\t\t<label for=\"all-brands\">Toutes les marques</label>
  184. \t\t\t\t\t\t\t\t</li>
  185. \t\t\t\t\t\t\t\t";
  186.         // line 66
  187.         $context['_parent'] = $context;
  188.         $context['_seq'] = CoreExtension::ensureTraversable(($context["brands"] ?? null));
  189.         foreach ($context['_seq'] as $context["_key"] => $context["brand"]) {
  190.             // line 67
  191.             yield "\t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  192. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"brand-";
  193.             // line 68
  194.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "id", [], "any", false, false, false, 68), "html", null, true);
  195.             yield "\" name=\"brand\" value=\"";
  196.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "slug", [], "any", false, false, false, 68), "html", null, true);
  197.             yield "\">
  198. \t\t\t\t\t\t\t\t\t\t<label for=\"brand-";
  199.             // line 69
  200.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "id", [], "any", false, false, false, 69), "html", null, true);
  201.             yield "\">";
  202.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "name", [], "any", false, false, false, 69), "html", null, true);
  203.             yield "<span>(";
  204.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "getActiveProductsCount", [], "method", false, false, false, 69), "html", null, true);
  205.             yield ")</span>
  206. \t\t\t\t\t\t\t\t\t\t</label>
  207. \t\t\t\t\t\t\t\t\t</li>
  208. \t\t\t\t\t\t\t\t";
  209.         }
  210.         $_parent = $context['_parent'];
  211.         unset($context['_seq'], $context['_key'], $context['brand'], $context['_parent']);
  212.         $context = array_intersect_key($context, $_parent) + $_parent;
  213.         // line 73
  214.         yield "\t\t\t\t\t\t\t</ul>
  215. \t\t\t\t\t\t</div>
  216. \t\t\t\t\t\t<!-- Filtres avancés -->
  217. \t\t\t\t\t\t<div class=\"common-filter\">
  218. \t\t\t\t\t\t\t<div class=\"head\">Boutiques</div>
  219. \t\t\t\t\t\t\t<div id=\"shopsFilter\">
  220. \t\t\t\t\t\t\t\t<form action=\"#\">
  221. \t\t\t\t\t\t\t\t\t<ul
  222. \t\t\t\t\t\t\t\t\t\tclass=\"shop-list\" id=\"shopList\"><!-- Les boutiques seront chargées dynamiquement -->
  223. \t\t\t\t\t\t\t\t\t</ul>
  224. \t\t\t\t\t\t\t\t</form>
  225. \t\t\t\t\t\t\t</div>
  226. \t\t\t\t\t\t</div>
  228. \t\t\t\t\t\t<div class=\"common-filter\">
  229. \t\t\t\t\t\t\t<div class=\"head\">Condition (";
  230.         // line 88
  231.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["conditions"] ?? null)), "html", null, true);
  232.         yield ")</div>
  233. \t\t\t\t\t\t\t<ul class=\"condition-list\" id=\"conditionList\">
  234. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  235. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"all-conditions\" name=\"condition\" checked>
  236. \t\t\t\t\t\t\t\t\t<label for=\"all-conditions\">Toutes les conditions</label>
  237. \t\t\t\t\t\t\t\t</li>
  238. \t\t\t\t\t\t\t\t";
  239.         // line 94
  240.         $context['_parent'] = $context;
  241.         $context['_seq'] = CoreExtension::ensureTraversable(($context["conditions"] ?? null));
  242.         $context['_iterated'] = false;
  243.         foreach ($context['_seq'] as $context["_key"] => $context["condition"]) {
  244.             // line 95
  245.             yield "\t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  246. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"condition-";
  247.             // line 96
  248.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "id", [], "any", false, false, false, 96), "html", null, true);
  249.             yield "\" name=\"condition\" value=\"";
  250.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "slug", [], "any", false, false, false, 96), "html", null, true);
  251.             yield "\">
  252. \t\t\t\t\t\t\t\t\t\t<label for=\"condition-";
  253.             // line 97
  254.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "id", [], "any", false, false, false, 97), "html", null, true);
  255.             yield "\">";
  256.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "name", [], "any", false, false, false, 97), "html", null, true);
  257.             yield "<span>(";
  258.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "getActiveProductsCount", [], "method", false, false, false, 97), "html", null, true);
  259.             yield ")</span>
  260. \t\t\t\t\t\t\t\t\t\t</label>
  261. \t\t\t\t\t\t\t\t\t</li>
  262. \t\t\t\t\t\t\t\t";
  263.             $context['_iterated'] = true;
  264.         }
  265.         // line 100
  266.         if (!$context['_iterated']) {
  267.             // line 101
  268.             yield "\t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  269. \t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Aucune condition disponible</span>
  270. \t\t\t\t\t\t\t\t\t</li>
  271. \t\t\t\t\t\t\t\t";
  272.         }
  273.         $_parent = $context['_parent'];
  274.         unset($context['_seq'], $context['_key'], $context['condition'], $context['_parent'], $context['_iterated']);
  275.         $context = array_intersect_key($context, $_parent) + $_parent;
  276.         // line 105
  277.         yield "\t\t\t\t\t\t\t</ul>
  278. \t\t\t\t\t\t</div>
  280. \t\t\t\t\t\t<div class=\"common-filter\">
  281. \t\t\t\t\t\t\t<div class=\"head\">Produits vedettes</div>
  282. \t\t\t\t\t\t\t<form action=\"#\">
  283. \t\t\t\t\t\t\t\t<ul>
  284. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  285. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"featured-all\" name=\"featured\" checked>
  286. \t\t\t\t\t\t\t\t\t\t<label for=\"featured-all\">Tous les produits</label>
  287. \t\t\t\t\t\t\t\t\t</li>
  288. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  289. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"featured-only\" name=\"featured\" value=\"true\">
  290. \t\t\t\t\t\t\t\t\t\t<label for=\"featured-only\">Produits vedettes uniquement</label>
  291. \t\t\t\t\t\t\t\t\t</li>
  292. \t\t\t\t\t\t\t\t</ul>
  293. \t\t\t\t\t\t\t</form>
  294. \t\t\t\t\t\t</div>
  296. \t\t\t\t\t\t<div class=\"common-filter\">
  297. \t\t\t\t\t\t\t<div class=\"head\">Type de produit</div>
  298. \t\t\t\t\t\t\t<form action=\"#\">
  299. \t\t\t\t\t\t\t\t<ul>
  300. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  301. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-all\" name=\"digital\" checked>
  302. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-all\">Tous les types</label>
  303. \t\t\t\t\t\t\t\t\t</li>
  304. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  305. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-physical\" name=\"digital\" value=\"false\">
  306. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-physical\">Produits physiques</label>
  307. \t\t\t\t\t\t\t\t\t</li>
  308. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  309. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-digital\" name=\"digital\" value=\"true\">
  310. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-digital\">Produits numériques</label>
  311. \t\t\t\t\t\t\t\t\t</li>
  312. \t\t\t\t\t\t\t\t</ul>
  313. \t\t\t\t\t\t\t</form>
  314. \t\t\t\t\t\t</div>
  316. \t\t\t\t\t\t<div class=\"common-filter\">
  317. \t\t\t\t\t\t\t<div class=\"head\">Disponibilité</div>
  318. \t\t\t\t\t\t\t<form action=\"#\">
  319. \t\t\t\t\t\t\t\t<ul>
  320. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  321. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-all\" name=\"availability\" checked>
  322. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-all\">Tous</label>
  323. \t\t\t\t\t\t\t\t\t</li>
  324. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  325. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-in-stock\" name=\"availability\" value=\"in_stock\">
  326. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-in-stock\">En stock</label>
  327. \t\t\t\t\t\t\t\t\t</li>
  328. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  329. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-low-stock\" name=\"availability\" value=\"low_stock\">
  330. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-low-stock\">Stock faible</label>
  331. \t\t\t\t\t\t\t\t\t</li>
  332. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  333. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-out-of-stock\" name=\"availability\" value=\"out_of_stock\">
  334. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-out-of-stock\">Rupture de stock</label>
  335. \t\t\t\t\t\t\t\t\t</li>
  336. \t\t\t\t\t\t\t\t</ul>
  337. \t\t\t\t\t\t\t</form>
  338. \t\t\t\t\t\t</div>
  340. \t\t\t\t\t\t<div class=\"common-filter\">
  341. \t\t\t\t\t\t\t<div class=\"head\">Note minimale</div>
  342. \t\t\t\t\t\t\t<form action=\"#\">
  343. \t\t\t\t\t\t\t\t<ul>
  344. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  345. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-all\" name=\"rating\" checked>
  346. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-all\">Toutes les notes</label>
  347. \t\t\t\t\t\t\t\t\t</li>
  348. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  349. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-4\" name=\"rating\" value=\"4\">
  350. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-4\">4 étoiles et plus</label>
  351. \t\t\t\t\t\t\t\t\t</li>
  352. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  353. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-3\" name=\"rating\" value=\"3\">
  354. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-3\">3 étoiles et plus</label>
  355. \t\t\t\t\t\t\t\t\t</li>
  356. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  357. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-2\" name=\"rating\" value=\"2\">
  358. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-2\">2 étoiles et plus</label>
  359. \t\t\t\t\t\t\t\t\t</li>
  360. \t\t\t\t\t\t\t\t</ul>
  361. \t\t\t\t\t\t\t</form>
  362. \t\t\t\t\t\t</div>
  364. \t\t\t\t\t\t<div class=\"common-filter\">
  365. \t\t\t\t\t\t\t<div class=\"head\">Poids</div>
  366. \t\t\t\t\t\t\t<div class=\"weight-range-area\">
  367. \t\t\t\t\t\t\t\t<div class=\"weight-inputs d-flex\">
  368. \t\t\t\t\t\t\t\t\t<div class=\"weight-input\">
  369. \t\t\t\t\t\t\t\t\t\t<label>Min (kg):</label>
  370. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" id=\"weightMin\" placeholder=\"0\" step=\"0.1\" min=\"0\">
  371. \t\t\t\t\t\t\t\t\t</div>
  372. \t\t\t\t\t\t\t\t\t<div class=\"weight-input\">
  373. \t\t\t\t\t\t\t\t\t\t<label>Max (kg):</label>
  374. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" id=\"weightMax\" placeholder=\"100\" step=\"0.1\" min=\"0\">
  375. \t\t\t\t\t\t\t\t\t</div>
  376. \t\t\t\t\t\t\t\t</div>
  377. \t\t\t\t\t\t\t</div>
  378. \t\t\t\t\t\t</div>
  380. \t\t\t\t\t\t<div class=\"common-filter\">
  381. \t\t\t\t\t\t\t<div class=\"head\">Couleur</div>
  382. \t\t\t\t\t\t\t<div id=\"colorsFilter\">
  383. \t\t\t\t\t\t\t\t<form action=\"#\">
  384. \t\t\t\t\t\t\t\t\t<ul
  385. \t\t\t\t\t\t\t\t\t\tclass=\"color-list\" id=\"colorList\"><!-- Les couleurs seront chargées dynamiquement -->
  386. \t\t\t\t\t\t\t\t\t</ul>
  387. \t\t\t\t\t\t\t\t</form>
  388. \t\t\t\t\t\t\t</div>
  389. \t\t\t\t\t\t</div>
  391. \t\t\t\t\t\t<div class=\"common-filter\">
  392. \t\t\t\t\t\t\t<div class=\"head\">Taille</div>
  393. \t\t\t\t\t\t\t<div id=\"sizesFilter\">
  394. \t\t\t\t\t\t\t\t<form action=\"#\">
  395. \t\t\t\t\t\t\t\t\t<ul
  396. \t\t\t\t\t\t\t\t\t\tclass=\"size-list\" id=\"sizeList\"><!-- Les tailles seront chargées dynamiquement -->
  397. \t\t\t\t\t\t\t\t\t</ul>
  398. \t\t\t\t\t\t\t\t</form>
  399. \t\t\t\t\t\t\t</div>
  400. \t\t\t\t\t\t</div>
  402. \t\t\t\t\t\t<div class=\"common-filter\">
  403. \t\t\t\t\t\t\t<div class=\"head\">Matériau</div>
  404. \t\t\t\t\t\t\t<div id=\"materialsFilter\">
  405. \t\t\t\t\t\t\t\t<form action=\"#\">
  406. \t\t\t\t\t\t\t\t\t<ul
  407. \t\t\t\t\t\t\t\t\t\tclass=\"material-list\" id=\"materialList\"><!-- Les matériaux seront chargés dynamiquement -->
  408. \t\t\t\t\t\t\t\t\t</ul>
  409. \t\t\t\t\t\t\t\t</form>
  410. \t\t\t\t\t\t\t</div>
  411. \t\t\t\t\t\t</div>
  414. \t\t\t\t\t\t<div class=\"common-filter\">
  415. \t\t\t\t\t\t\t<div class=\"head\">Prix</div>
  416. \t\t\t\t\t\t\t<div class=\"price-range-area\">
  417. \t\t\t\t\t\t\t\t<div id=\"price-range\"></div>
  418. \t\t\t\t\t\t\t\t<div class=\"value-wrapper d-flex\">
  419. \t\t\t\t\t\t\t\t\t<div class=\"price\">Prix:</div>
  420. \t\t\t\t\t\t\t\t\t<span>\$</span>
  421. \t\t\t\t\t\t\t\t\t<div id=\"lower-value\"></div>
  422. \t\t\t\t\t\t\t\t\t<div class=\"to\">to</div>
  423. \t\t\t\t\t\t\t\t\t<span>\$</span>
  424. \t\t\t\t\t\t\t\t\t<div id=\"upper-value\"></div>
  425. \t\t\t\t\t\t\t\t</div>
  426. \t\t\t\t\t\t\t</div>
  427. \t\t\t\t\t\t</div>
  428. \t\t\t\t\t</div>
  429. \t\t\t\t</div>
  430. \t\t\t\t<!-- Fin du collapse sidebar -->
  431. \t\t\t</div>
  432. \t\t\t<div class=\"col-xl-9 col-lg-8 col-md-7\">
  433. \t\t\t<!-- Barre de tri et bouton de filtres -->
  434. \t\t\t<div class=\"row mb-4\">
  435. \t\t\t\t<div
  436. \t\t\t\t\tclass=\"col-md-6 mb-3 mb-md-0\">
  437. \t\t\t\t\t<!-- Bouton pour ouvrir le modal de filtres -->
  438. \t\t\t\t\t<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;\">
  439. \t\t\t\t\t\t<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);\">
  440. \t\t\t\t\t\t\t<i class=\"lnr lnr-filter\" style=\"font-size: 1.3rem; color: white; font-weight: bold;\"></i>
  441. \t\t\t\t\t\t</div>
  442. \t\t\t\t\t\t<span style=\"font-size: 1.1rem; font-weight: 600; color: #333;\">Filtres</span>
  443. \t\t\t\t\t\t<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>
  444. \t\t\t\t\t</button>
  445. \t\t\t\t</div>
  446. \t\t\t\t<div class=\"col-md-6\">
  447. \t\t\t\t\t<select class=\"form-select\" id=\"sortSelect\" onchange=\"applySorting()\">
  448. \t\t\t\t\t\t<option value=\"newest\" ";
  449.         // line 276
  450.         if ((($context["currentSort"] ?? null) == "newest")) {
  451.             yield " selected ";
  452.         }
  453.         yield ">Plus récents</option>
  454. \t\t\t\t\t\t<option value=\"price_asc\" ";
  455.         // line 277
  456.         if ((($context["currentSort"] ?? null) == "price_asc")) {
  457.             yield " selected ";
  458.         }
  459.         yield ">Prix croissant</option>
  460. \t\t\t\t\t\t<option value=\"price_desc\" ";
  461.         // line 278
  462.         if ((($context["currentSort"] ?? null) == "price_desc")) {
  463.             yield " selected ";
  464.         }
  465.         yield ">Prix décroissant</option>
  466. \t\t\t\t\t\t<option value=\"name_asc\" ";
  467.         // line 279
  468.         if ((($context["currentSort"] ?? null) == "name_asc")) {
  469.             yield " selected ";
  470.         }
  471.         yield ">Nom A-Z</option>
  472. \t\t\t\t\t\t<option value=\"name_desc\" ";
  473.         // line 280
  474.         if ((($context["currentSort"] ?? null) == "name_desc")) {
  475.             yield " selected ";
  476.         }
  477.         yield ">Nom Z-A</option>
  478. \t\t\t\t\t\t<option value=\"popular\" ";
  479.         // line 281
  480.         if ((($context["currentSort"] ?? null) == "popular")) {
  481.             yield " selected ";
  482.         }
  483.         yield ">Plus populaires</option>
  484. \t\t\t\t\t</select>
  485. \t\t\t\t</div>
  486. \t\t\t</div>
  488. \t\t\t<!-- Start Best Seller -->
  489. \t\t\t<section class=\"lattest-product-area pb-40 category-list\">
  490. \t\t\t\t<div class=\"row\" id=\"productsContainer\">
  491. \t\t\t\t\t";
  492.         // line 289
  493.         $context['_parent'] = $context;
  494.         $context['_seq'] = CoreExtension::ensureTraversable(($context["products"] ?? null));
  495.         $context['_iterated'] = false;
  496.         foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  497.             // line 290
  498.             yield "\t\t\t\t\t\t<div class=\"col-lg-4 col-md-6\">
  499. \t\t\t\t\t\t\t<div class=\"single-product\">
  500. \t\t\t\t\t\t\t\t<div class=\"product-image-container mb-2\" onmouseenter=\"showImageNav(";
  501.             // line 292
  502.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 292), "html", null, true);
  503.             yield ")\" onmouseleave=\"hideImageNav(";
  504.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 292), "html", null, true);
  505.             yield ")\">
  506. \t\t\t\t\t\t\t\t\t<a href=\"";
  507.             // line 293
  508.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 293)]), "html", null, true);
  509.             yield "\">
  510. \t\t\t\t\t\t\t\t\t\t";
  511.             // line 294
  512.             $context["allImages"] = ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 294)) ? (Twig\Extension\CoreExtension::default(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 294), [])) : ([]));
  513.             // line 295
  514.             yield "\t\t\t\t\t\t\t\t\t\t";
  515.             if (CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", true, true, false, 295)) {
  516.                 // line 296
  517.                 yield "\t\t\t\t\t\t\t\t\t\t\t";
  518.                 $context['_parent'] = $context;
  519.                 $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", false, false, false, 296));
  520.                 foreach ($context['_seq'] as $context["_key"] => $context["variant"]) {
  521.                     // line 297
  522.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t";
  523.                     if ((CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "isActive", [], "any", false, false, false, 297) && CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", true, true, false, 297))) {
  524.                         // line 298
  525.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t\t";
  526.                         $context['_parent'] = $context;
  527.                         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", false, false, false, 298));
  528.                         foreach ($context['_seq'] as $context["_key"] => $context["variantImg"]) {
  529.                             // line 299
  530.                             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  531.                             $context["allImages"] = Twig\Extension\CoreExtension::merge(($context["allImages"] ?? null), [$context["variantImg"]]);
  532.                             // line 300
  533.                             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t";
  534.                         }
  535.                         $_parent = $context['_parent'];
  536.                         unset($context['_seq'], $context['_key'], $context['variantImg'], $context['_parent']);
  537.                         $context = array_intersect_key($context, $_parent) + $_parent;
  538.                         // line 301
  539.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t";
  540.                     }
  541.                     // line 302
  542.                     yield "\t\t\t\t\t\t\t\t\t\t\t";
  543.                 }
  544.                 $_parent = $context['_parent'];
  545.                 unset($context['_seq'], $context['_key'], $context['variant'], $context['_parent']);
  546.                 $context = array_intersect_key($context, $_parent) + $_parent;
  547.                 // line 303
  548.                 yield "\t\t\t\t\t\t\t\t\t\t";
  549.             }
  550.             // line 304
  551.             yield "\t\t\t\t\t\t\t\t\t\t";
  552.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allImages"] ?? null)) > 0)) {
  553.                 // line 305
  554.                 yield "\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-";
  555.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 305), "html", null, true);
  556.                 yield "\" src=\"";
  557.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v0 = ($context["allImages"] ?? null)) && is_array($_v0) || $_v0 instanceof ArrayAccess ? ($_v0[0] ?? null) : null)), "html", null, true);
  558.                 yield "\" alt=\"";
  559.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 305), "html", null, true);
  560.                 yield "\">
  561. \t\t\t\t\t\t\t\t\t\t";
  562.             } else {
  563.                 // line 307
  564.                 yield "\t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-";
  565.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 307), "html", null, true);
  566.                 yield "\" src=\"";
  567.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/product/p1.jpg"), "html", null, true);
  568.                 yield "\" alt=\"";
  569.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 307), "html", null, true);
  570.                 yield "\">
  571. \t\t\t\t\t\t\t\t\t\t";
  572.             }
  573.             // line 309
  574.             yield "\t\t\t\t\t\t\t\t\t</a>
  576. \t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  577. \t\t\t\t\t\t\t\t\t";
  578.             // line 312
  579.             $context["allImages"] = ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 312)) ? (Twig\Extension\CoreExtension::default(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 312), [])) : ([]));
  580.             // line 313
  581.             yield "\t\t\t\t\t\t\t\t\t";
  582.             if (CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", true, true, false, 313)) {
  583.                 // line 314
  584.                 yield "\t\t\t\t\t\t\t\t\t\t";
  585.                 $context['_parent'] = $context;
  586.                 $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", false, false, false, 314));
  587.                 foreach ($context['_seq'] as $context["_key"] => $context["variant"]) {
  588.                     // line 315
  589.                     yield "\t\t\t\t\t\t\t\t\t\t\t";
  590.                     if ((CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "isActive", [], "any", false, false, false, 315) && CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", true, true, false, 315))) {
  591.                         // line 316
  592.                         yield "\t\t\t\t\t\t\t\t\t\t\t\t";
  593.                         $context['_parent'] = $context;
  594.                         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", false, false, false, 316));
  595.                         foreach ($context['_seq'] as $context["_key"] => $context["variantImg"]) {
  596.                             // line 317
  597.                             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t";
  598.                             $context["allImages"] = Twig\Extension\CoreExtension::merge(($context["allImages"] ?? null), [$context["variantImg"]]);
  599.                             // line 318
  600.                             yield "\t\t\t\t\t\t\t\t\t\t\t\t";
  601.                         }
  602.                         $_parent = $context['_parent'];
  603.                         unset($context['_seq'], $context['_key'], $context['variantImg'], $context['_parent']);
  604.                         $context = array_intersect_key($context, $_parent) + $_parent;
  605.                         // line 319
  606.                         yield "\t\t\t\t\t\t\t\t\t\t\t";
  607.                     }
  608.                     // line 320
  609.                     yield "\t\t\t\t\t\t\t\t\t\t";
  610.                 }
  611.                 $_parent = $context['_parent'];
  612.                 unset($context['_seq'], $context['_key'], $context['variant'], $context['_parent']);
  613.                 $context = array_intersect_key($context, $_parent) + $_parent;
  614.                 // line 321
  615.                 yield "\t\t\t\t\t\t\t\t\t";
  616.             }
  617.             // line 322
  618.             yield "\t\t\t\t\t\t\t\t\t";
  619.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allImages"] ?? null)) > 1)) {
  620.                 // line 323
  621.                 yield "\t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-";
  622.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 323), "html", null, true);
  623.                 yield "\" onclick=\"prevImage(";
  624.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 323), "html", null, true);
  625.                 yield ")\" style=\"display: none;\">
  626. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  627. \t\t\t\t\t\t\t\t\t\t</button>
  628. \t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-";
  629.                 // line 326
  630.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 326), "html", null, true);
  631.                 yield "\" onclick=\"nextImage(";
  632.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 326), "html", null, true);
  633.                 yield ")\" style=\"display: none;\">
  634. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  635. \t\t\t\t\t\t\t\t\t\t</button>
  637. \t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  638. \t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-";
  639.                 // line 331
  640.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 331), "html", null, true);
  641.                 yield "\" style=\"display: none;\">
  642. \t\t\t\t\t\t\t\t\t\t\t";
  643.                 // line 332
  644.                 $context['_parent'] = $context;
  645.                 $context['_seq'] = CoreExtension::ensureTraversable(($context["allImages"] ?? null));
  646.                 $context['loop'] = [
  647.                   'parent' => $context['_parent'],
  648.                   'index0' => 0,
  649.                   'index'  => 1,
  650.                   'first'  => true,
  651.                 ];
  652.                 if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  653.                     $length = count($context['_seq']);
  654.                     $context['loop']['revindex0'] = $length - 1;
  655.                     $context['loop']['revindex'] = $length;
  656.                     $context['loop']['length'] = $length;
  657.                     $context['loop']['last'] = 1 === $length;
  658.                 }
  659.                 foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  660.                     // line 333
  661.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-";
  662.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 333), "html", null, true);
  663.                     yield "-";
  664.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 333), "html", null, true);
  665.                     yield "\" onclick=\"showImage(";
  666.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 333), "html", null, true);
  667.                     yield ", ";
  668.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 333), "html", null, true);
  669.                     yield ")\"></span>
  670. \t\t\t\t\t\t\t\t\t\t\t";
  671.                     ++$context['loop']['index0'];
  672.                     ++$context['loop']['index'];
  673.                     $context['loop']['first'] = false;
  674.                     if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  675.                         --$context['loop']['revindex0'];
  676.                         --$context['loop']['revindex'];
  677.                         $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  678.                     }
  679.                 }
  680.                 $_parent = $context['_parent'];
  681.                 unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  682.                 $context = array_intersect_key($context, $_parent) + $_parent;
  683.                 // line 335
  684.                 yield "\t\t\t\t\t\t\t\t\t\t</div>
  685. \t\t\t\t\t\t\t\t\t";
  686.             }
  687.             // line 337
  688.             yield "\t\t\t\t\t\t\t\t</div>
  690. \t\t\t\t\t\t\t\t<div class=\"product-details\">
  691. \t\t\t\t\t\t\t\t\t<a href=\"";
  692.             // line 340
  693.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 340)]), "html", null, true);
  694.             yield "\">
  695. \t\t\t\t\t\t\t\t\t\t<h6>";
  696.             // line 341
  697.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "name", [], "any", false, false, false, 341), "html", null, true);
  698.             yield "</h6>
  699. \t\t\t\t\t\t\t\t\t</a>
  701. \t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  702. \t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  703. \t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  704. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  705. \t\t\t\t\t\t\t\t\t\t\tVendu par :
  706. \t\t\t\t\t\t\t\t\t\t\t";
  707.             // line 349
  708.             if ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", true, true, false, 349) && CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 349))) {
  709.                 // line 350
  710.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  711.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 350), "slug", [], "any", false, false, false, 350)]), "html", null, true);
  712.                 yield "\" class=\"shop-link\">
  713. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  714.                 // line 351
  715.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, $context["product"], "shop", [], "any", false, false, false, 351), "name", [], "any", false, false, false, 351), "html", null, true);
  716.                 yield "
  717. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  718. \t\t\t\t\t\t\t\t\t\t\t";
  719.             } else {
  720.                 // line 354
  721.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  722. \t\t\t\t\t\t\t\t\t\t\t";
  723.             }
  724.             // line 356
  725.             yield "\t\t\t\t\t\t\t\t\t\t</small>
  726. \t\t\t\t\t\t\t\t\t</div>
  728. \t\t\t\t\t\t\t\t\t<div class=\"price\">
  729. \t\t\t\t\t\t\t\t\t\t<h6>";
  730.             // line 360
  731.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "price", [], "any", false, false, false, 360), 2, ".", " "), "html", null, true);
  732.             yield "
  733. \t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  734. \t\t\t\t\t\t\t\t\t\t";
  735.             // line 362
  736.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 362)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  737.                 // line 363
  738.                 yield "\t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">";
  739.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "compareAtPrice", [], "any", false, false, false, 363), 2, ".", " "), "html", null, true);
  740.                 yield "
  741. \t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  742. \t\t\t\t\t\t\t\t\t\t";
  743.             }
  744.             // line 366
  745.             yield "\t\t\t\t\t\t\t\t\t</div>
  746. \t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  747. \t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"";
  748.             // line 368
  749.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 368), "html", null, true);
  750.             yield "\" data-qty=\"1\">
  751. \t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  752. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  753. \t\t\t\t\t\t\t\t\t\t</a>
  754. \t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info wishlist-btn\" data-product-id=\"";
  755.             // line 372
  756.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 372), "html", null, true);
  757.             yield "\" ";
  758.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 372)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  759.                 yield " onclick=\"toggleWishlist(";
  760.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 372), "html", null, true);
  761.                 yield ", this); return false;\" ";
  762.             } else {
  763.                 yield " onclick=\"alert('Vous devez être connecté pour ajouter aux favoris'); return false;\" ";
  764.             }
  765.             yield ">
  766. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  767. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  768. \t\t\t\t\t\t\t\t\t\t</a>
  769. \t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"social-info comparison-btn\" data-product-id=\"";
  770.             // line 376
  771.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 376), "html", null, true);
  772.             yield "\" ";
  773.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 376)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  774.                 yield " onclick=\"toggleComparison(";
  775.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 376), "html", null, true);
  776.                 yield ", this); return false;\" ";
  777.             } else {
  778.                 yield " onclick=\"alert('Vous devez être connecté pour comparer des produits'); return false;\" ";
  779.             }
  780.             yield ">
  781. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  782. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  783. \t\t\t\t\t\t\t\t\t\t</a>
  784. \t\t\t\t\t\t\t\t\t\t<a href=\"";
  785.             // line 380
  786.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_product_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, $context["product"], "slug", [], "any", false, false, false, 380)]), "html", null, true);
  787.             yield "\" class=\"social-info\">
  788. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  789. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  790. \t\t\t\t\t\t\t\t\t\t</a>
  791. \t\t\t\t\t\t\t\t\t</div>
  792. \t\t\t\t\t\t\t\t</div>
  793. \t\t\t\t\t\t\t</div>
  794. \t\t\t\t\t\t</div>
  795. \t\t\t\t\t";
  796.             $context['_iterated'] = true;
  797.         }
  798.         // line 388
  799.         if (!$context['_iterated']) {
  800.             // line 389
  801.             yield "\t\t\t\t\t\t<div class=\"col-12\">
  802. \t\t\t\t\t\t\t<p>Aucun produit disponible.</p>
  803. \t\t\t\t\t\t</div>
  804. \t\t\t\t\t";
  805.         }
  806.         $_parent = $context['_parent'];
  807.         unset($context['_seq'], $context['_key'], $context['product'], $context['_parent'], $context['_iterated']);
  808.         $context = array_intersect_key($context, $_parent) + $_parent;
  809.         // line 393
  810.         yield "\t\t\t\t</div>
  812. \t\t\t\t<!-- Bouton Charger plus de produits -->
  813. \t\t\t\t";
  814.         // line 396
  815.         if ((($context["totalPages"] ?? null) > ($context["currentPage"] ?? null))) {
  816.             // line 397
  817.             yield "\t\t\t\t\t<div class=\"text-center mt-4 mb-4\" id=\"loadMoreContainer\">
  818. \t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"loadMoreBtn\" onclick=\"loadMoreProducts()\">
  819. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>Charger plus de produits
  820. \t\t\t\t\t\t</button>
  821. \t\t\t\t\t</div>
  822. \t\t\t\t";
  823.         }
  824.         // line 403
  825.         yield "
  826. \t\t\t\t<!-- Message de fin -->
  827. \t\t\t\t<div id=\"noMoreProducts\" class=\"text-center py-4\" style=\"display: none;\">
  828. \t\t\t\t\t<p class=\"text-muted\">
  829. \t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  830. \t\t\t\t\t\tTous les produits ont été chargés</p>
  831. \t\t\t\t</div>
  832. \t\t\t</section>
  833. \t\t\t<!-- End Best Seller -->
  834. \t\t</div>
  835. \t</div>
  836. </div>";
  837.         
  838.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  840.         
  841.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  843.         yield from [];
  844.     }
  846.     // line 414
  847.     /**
  848.      * @return iterable<null|scalar|\Stringable>
  849.      */
  850.     public function block_title(array $context, array $blocks = []): iterable
  851.     {
  852.         $macros = $this->macros;
  853.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  854.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  856.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  857.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  859.         yield "Liste des produits | MaketOu";
  860.         
  861.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  863.         
  864.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  866.         yield from [];
  867.     }
  869.     /**
  870.      * @return iterable<null|scalar|\Stringable>
  871.      */
  872.     public function block_stylesheets(array $context, array $blocks = []): iterable
  873.     {
  874.         $macros = $this->macros;
  875.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  876.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  878.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  879.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  881.         // line 415
  882.         yield "<style>
  883. \t/* Styles pour la navigation des images */
  884. \t.product-image-container {
  885. \t\tposition: relative;
  886. \t\toverflow: hidden;
  887. \t\tborder-radius: 8px;
  888. \t}
  890. \t.img-nav-btn {
  891. \t\tposition: absolute;
  892. \t\ttop: 50%;
  893. \t\ttransform: translateY(-50%);
  894. \t\tbackground: rgba(0, 0, 0, 0.6);
  895. \t\tcolor: white;
  896. \t\tborder: none;
  897. \t\twidth: 35px;
  898. \t\theight: 35px;
  899. \t\tborder-radius: 50%;
  900. \t\tdisplay: flex;
  901. \t\talign-items: center;
  902. \t\tjustify-content: center;
  903. \t\tcursor: pointer;
  904. \t\ttransition: all 0.3s ease;
  905. \t\tz-index: 10;
  906. \t}
  908. \t.img-nav-btn:hover {
  909. \t\tbackground: #095ad3;
  910. \t\ttransform: translateY(-50%) scale(1.1);
  911. \t}
  913. \t.img-nav-left {
  914. \t\tleft: 10px;
  915. \t}
  917. \t.img-nav-right {
  918. \t\tright: 10px;
  919. \t}
  921. \t.img-indicators {
  922. \t\tposition: absolute;
  923. \t\tbottom: 10px;
  924. \t\tleft: 50%;
  925. \t\ttransform: translateX(-50%);
  926. \t\tdisplay: flex;
  927. \t\tgap: 5px;
  928. \t\tz-index: 10;
  929. \t}
  931. \t.indicator {
  932. \t\twidth: 8px;
  933. \t\theight: 8px;
  934. \t\tborder-radius: 50%;
  935. \t\tbackground: rgba(255, 255, 255, 0.5);
  936. \t\tcursor: pointer;
  937. \t\tmargin-bottom: 10px;
  938. \t\ttransition: all 0.3s ease;
  939. \t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  940. \t}
  942. \t.indicator.active {
  943. \t\tbackground: #ffa200;
  944. \t\tborder-color: #ffa200;
  945. \t\ttransform: scale(1.2);
  946. \t}
  948. \t.indicator:hover {
  949. \t\tbackground: rgba(255, 255, 255, 0.8);
  950. \t}
  952. \t/* Styles pour l'affichage de la boutique */
  953. \t.shop-info {
  954. \t\tmargin: 8px 0;
  955. \t\tpadding: 5px 0;
  956. \t\tborder-bottom: 1px solid #f0f0f0;
  957. \t}
  959. \t.shop-link {
  960. \t\tcolor: #007bff;
  961. \t\ttext-decoration: none;
  962. \t\tfont-weight: 500;
  963. \t}
  965. \t.shop-link:hover {
  966. \t\tcolor: #ffa200;
  967. \t\ttext-decoration: underline;
  968. \t}
  970. \t/* Animation pour le survol */
  971. \t.product-image-container:hover .main-product-img {
  972. \t\ttransform: scale(1.05);
  973. \t\ttransition: transform 0.3s ease;
  974. \t}
  976. \t.main-product-img {
  977. \t\ttransition: transform 0.3s ease;
  978. \t\twidth: 100%;
  979. \t\theight: 100%;
  980. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  981. \t\tobject-position: center; /* Centre l'image */
  982. \t\tdisplay: block;
  983. \t}
  985. \t/* Styles pour les images des produits associés (Deals de la semaine) */
  986. \t.related-product-img-container {
  987. \t\tposition: relative;
  988. \t\toverflow: hidden;
  989. \t\tborder-radius: 8px;
  990. \t\twidth: 100%;
  991. \t\theight: 200px; /* Hauteur fixe pour les produits associés */
  992. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  993. \t}
  995. \t.related-product-img {
  996. \t\twidth: 100%;
  997. \t\theight: 100%;
  998. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  999. \t\tobject-position: center; /* Centre l'image */
  1000. \t\tdisplay: block;
  1001. \t\ttransition: transform 0.3s ease;
  1002. \t}
  1004. \t.related-product-img-container:hover .related-product-img {
  1005. \t\ttransform: scale(1.05);
  1006. \t}
  1008. \t/* Styles pour l'image de catégorie dans les deals */
  1009. \t.category-banner-container {
  1010. \t\tdisplay: block;
  1011. \t\tposition: relative;
  1012. \t\toverflow: hidden;
  1013. \t\tborder-radius: 8px;
  1014. \t\twidth: 100%;
  1015. \t\theight: 400px; /* Hauteur fixe pour la bannière de catégorie */
  1016. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  1017. \t}
  1019. \t.category-banner-img {
  1020. \t\twidth: 100%;
  1021. \t\theight: 100%;
  1022. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  1023. \t\tobject-position: center; /* Centre l'image */
  1024. \t\tdisplay: block;
  1025. \t\ttransition: transform 0.3s ease;
  1026. \t}
  1028. \t.category-banner-container:hover .category-banner-img {
  1029. \t\ttransform: scale(1.05);
  1030. \t}
  1032. \t/* Styles pour les images de la modal Quick Product View */
  1033. \t.quick-view-carousel .item {
  1034. \t\twidth: 100%;
  1035. \t\theight: 400px; /* Hauteur fixe pour les images du carousel */
  1036. \t\tbackground-size: cover;
  1037. \t\tbackground-position: center;
  1038. \t\tbackground-repeat: no-repeat;
  1039. \t\tborder-radius: 8px;
  1040. \t}
  1042. \t/* Contraindre le conteneur d'image pour maintenir les proportions */
  1043. \t.product-image-container {
  1044. \t\tposition: relative;
  1045. \t\toverflow: hidden;
  1046. \t\tborder-radius: 8px;
  1047. \t\twidth: 200px;
  1048. \t\taspect-ratio: 1 / 1; /* Conteneur carré */
  1049. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  1050. \t}
  1052. \t/* Styles pour le bouton de filtre amélioré */
  1053. \t.filter-icon-circle {
  1054. \t\ttransition: all 0.3s ease;
  1055. \t}
  1057. \tbutton[data-bs-target=\"#filtersModal\"]:hover .filter-icon-circle {
  1058. \t\tbackground: linear-gradient(135deg, #ff8c00 0%, #ff7700 100%) !important;
  1059. \t\ttransform: rotate(15deg) scale(1.1);
  1060. \t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.5);
  1061. \t}
  1063. \tbutton[data-bs-target=\"#filtersModal\"]:hover {
  1064. \t\ttransform: translateY(-2px);
  1065. \t}
  1067. \tbutton[data-bs-target=\"#filtersModal\"]:active {
  1068. \t\ttransform: translateY(0);
  1069. \t}
  1071. \tbutton[data-bs-target=\"#filtersModal\"]:hover span {
  1072. \t\tcolor: #ffa200 !important;
  1073. \t}
  1075. \t/* Styles pour le modal de filtres */
  1076. \t#filtersModal .modal-body {
  1077. \t\tpadding: 1.5rem;
  1078. \t}
  1080. \t#filtersModal .modal-body::-webkit-scrollbar {
  1081. \t\twidth: 8px;
  1082. \t}
  1084. \t#filtersModal .modal-body::-webkit-scrollbar-track {
  1085. \t\tbackground: #f1f1f1;
  1086. \t\tborder-radius: 4px;
  1087. \t}
  1089. \t#filtersModal .modal-body::-webkit-scrollbar-thumb {
  1090. \t\tbackground: #ffa200;
  1091. \t\tborder-radius: 4px;
  1092. \t}
  1094. \t#filtersModal .modal-body::-webkit-scrollbar-thumb:hover {
  1095. \t\tbackground: #e69100;
  1096. \t}
  1098. \t#filtersModal .modal-footer {
  1099. \t\tbox-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  1100. \t}
  1102. \t/* Styles pour les filtres avancés */
  1103. \t.weight-range-area {
  1104. \t\tpadding: 15px 0;
  1105. \t}
  1107. \t.weight-inputs {
  1108. \t\tgap: 15px;
  1109. \t\talign-items: center;
  1110. \t}
  1112. \t.weight-input {
  1113. \t\tflex: 1;
  1114. \t}
  1116. \t.weight-input label {
  1117. \t\tdisplay: block;
  1118. \t\tmargin-bottom: 5px;
  1119. \t\tfont-weight: 500;
  1120. \t\tcolor: #333;
  1121. \t}
  1123. \t.weight-input input {
  1124. \t\twidth: 100%;
  1125. \t\tpadding: 8px 12px;
  1126. \t\tborder: 1px solid #ddd;
  1127. \t\tborder-radius: 4px;
  1128. \t\tfont-size: 14px;
  1129. \t}
  1131. \t.weight-input input:focus {
  1132. \t\toutline: none;
  1133. \t\tborder-color: #ffa200;
  1134. \t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  1135. \t}
  1137. \t/* Styles pour les filtres dynamiques */
  1138. \t.shop-list,
  1139. \t.color-list,
  1140. \t.size-list,
  1141. \t.material-list,
  1142. \t.condition-list {
  1143. \t\tmax-height: 200px;
  1144. \t\toverflow-y: auto;
  1145. \t\tpadding-right: 5px;
  1146. \t}
  1148. \t.shop-list::-webkit-scrollbar,
  1149. \t.color-list::-webkit-scrollbar,
  1150. \t.size-list::-webkit-scrollbar,
  1151. \t.material-list::-webkit-scrollbar,
  1152. \t.condition-list::-webkit-scrollbar {
  1153. \t\twidth: 6px;
  1154. \t}
  1156. \t.shop-list::-webkit-scrollbar-track,
  1157. \t.color-list::-webkit-scrollbar-track,
  1158. \t.size-list::-webkit-scrollbar-track,
  1159. \t.material-list::-webkit-scrollbar-track,
  1160. \t.condition-list::-webkit-scrollbar-track {
  1161. \t\tbackground: #f1f1f1;
  1162. \t\tborder-radius: 3px;
  1163. \t}
  1165. \t.shop-list::-webkit-scrollbar-thumb,
  1166. \t.color-list::-webkit-scrollbar-thumb,
  1167. \t.size-list::-webkit-scrollbar-thumb,
  1168. \t.material-list::-webkit-scrollbar-thumb,
  1169. \t.condition-list::-webkit-scrollbar-thumb {
  1170. \t\tbackground: #ffa200;
  1171. \t\tborder-radius: 3px;
  1172. \t}
  1174. \t.shop-list::-webkit-scrollbar-thumb:hover,
  1175. \t.color-list::-webkit-scrollbar-thumb:hover,
  1176. \t.size-list::-webkit-scrollbar-thumb:hover,
  1177. \t.material-list::-webkit-scrollbar-thumb:hover,
  1178. \t.condition-list::-webkit-scrollbar-thumb:hover {
  1179. \t\tbackground: #e69100;
  1180. \t}
  1182. \t/* Animation pour les filtres qui apparaissent */
  1183. \t.common-filter {
  1184. \t\ttransition: all 0.3s ease;
  1185. \t}
  1187. \t.common-filter[style*=\"display: none\"] {
  1188. \t\topacity: 0;
  1189. \t\ttransform: translateY(-10px);
  1190. \t}
  1192. \t.common-filter[style*=\"display: block\"] {
  1193. \t\topacity: 1;
  1194. \t\ttransform: translateY(0);
  1195. \t}
  1197. \t/* Styles pour les indicateurs de chargement */
  1198. \t.loading-indicator {
  1199. \t\tdisplay: inline-block;
  1200. \t\twidth: 20px;
  1201. \t\theight: 20px;
  1202. \t\tborder: 3px solid #f3f3f3;
  1203. \t\tborder-top: 3px solid #ffa200;
  1204. \t\tborder-radius: 50%;
  1205. \t\tanimation: spin 1s linear infinite;
  1206. \t}
  1208. \t@keyframes spin {
  1209. \t\t0% {
  1210. \t\t\ttransform: rotate(0deg);
  1211. \t\t}
  1212. \t\t100% {
  1213. \t\t\ttransform: rotate(360deg);
  1214. \t\t}
  1215. \t}
  1217. \t/* Styles pour le loader de chargement infini */
  1218. \t.infinite-loader {
  1219. \t\tdisplay: flex;
  1220. \t\tflex-direction: column;
  1221. \t\talign-items: center;
  1222. \t\tjustify-content: center;
  1223. \t\tpadding: 20px;
  1224. \t}
  1226. \t.loader-spinner {
  1227. \t\twidth: 50px;
  1228. \t\theight: 50px;
  1229. \t\tborder: 4px solid #f3f3f3;
  1230. \t\tborder-top: 4px solid #ffa200;
  1231. \t\tborder-radius: 50%;
  1232. \t\tanimation: spin 1s linear infinite;
  1233. \t}
  1235. \t#infiniteScrollLoader {
  1236. \t\tmin-height: 100px;
  1237. \t}
  1239. \t#noMoreProducts {
  1240. \t\tmin-height: 60px;
  1241. \t\tcolor: #6c757d;
  1242. \t}
  1244. \t#noMoreProducts i {
  1245. \t\tfont-size: 24px;
  1246. \t\tcolor: #28a745;
  1247. \t\tmargin-right: 8px;
  1248. \t}
  1250. \t/* Responsive pour les filtres */
  1251. \t@media(max-width: 768px) {
  1252. \t\t.weight-inputs {
  1253. \t\t\tflex-direction: column;
  1254. \t\t\tgap: 10px;
  1255. \t\t}
  1257. \t\t.weight-input {
  1258. \t\t\twidth: 100%;
  1259. \t\t}
  1261. \t\t.common-filter {
  1262. \t\t\tmargin-bottom: 20px;
  1263. \t\t}
  1265. \t\t.shop-list,
  1266. \t\t.color-list,
  1267. \t\t.size-list,
  1268. \t\t.material-list,
  1269. \t\t.condition-list {
  1270. \t\t\tmax-height: 150px;
  1271. \t\t}
  1272. \t}
  1273. \t/* Bouton toggle sidebar mobile */
  1274. \t.listing-sidebar-toggle {
  1275. \t\tborder-radius: 0.5rem;
  1276. \t\tpadding: 0.75rem;
  1277. \t\tfont-weight: 500;
  1278. \t\tdisplay: flex;
  1279. \t\talign-items: center;
  1280. \t\tjustify-content: center;
  1281. \t}
  1283. \t.listing-sidebar-toggle .toggle-icon {
  1284. \t\ttransition: transform 0.3s ease;
  1285. \t\tdisplay: inline-block;
  1286. \t}
  1288. \t/* État fermé (par défaut) */
  1289. \t.listing-sidebar-toggle[aria-expanded=\"false\"] .toggle-icon,
  1290. \t.listing-sidebar-toggle.collapsed .toggle-icon {
  1291. \t\ttransform: rotate(0deg);
  1292. \t}
  1294. \t/* État ouvert */
  1295. \t.listing-sidebar-toggle[aria-expanded=\"true\"] .toggle-icon,
  1296. \t.listing-sidebar-toggle:not(.collapsed) .toggle-icon {
  1297. \t\ttransform: rotate(180deg);
  1298. \t}
  1300. \t/* Sidebar mobile */
  1301. \t@media(max-width: 767.98px) {
  1302. \t\t#listingSidebarCollapse {
  1303. \t\t\tmargin-bottom: 1rem;
  1304. \t\t}
  1305. \t}
  1306. </style>";
  1307.         
  1308.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1310.         
  1311.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1313.         yield from [];
  1314.     }
  1316.     // line 839
  1317.     /**
  1318.      * @return iterable<null|scalar|\Stringable>
  1319.      */
  1320.     public function block_javascripts(array $context, array $blocks = []): iterable
  1321.     {
  1322.         $macros = $this->macros;
  1323.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1324.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1326.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1327.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  1329.         // line 840
  1330.         yield "<script>
  1331. // === Script isolé : chargement de plus de produits (comme les boutiques) ===
  1332. var currentPage = ";
  1333.         // line 842
  1334.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentPage"] ?? null), "html", null, true);
  1335.         yield ";
  1336. var totalPages = ";
  1337.         // line 843
  1338.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["totalPages"] ?? null), "html", null, true);
  1339.         yield ";
  1340. var isLoading = false;
  1342. function loadMoreProducts() {
  1343.     if (isLoading || currentPage >= totalPages) return;
  1345.     isLoading = true;
  1346.     var btn = document.getElementById('loadMoreBtn');
  1347.     var productsContainer = document.getElementById('productsContainer');
  1349.     if (!btn || !productsContainer) {
  1350.         isLoading = false;
  1351.         return;
  1352.     }
  1354.     var originalText = btn.innerHTML;
  1355.     btn.disabled = true;
  1356.     btn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Chargement...';
  1358.     currentPage++;
  1359.     var url = new URL(window.location.href);
  1360.     url.searchParams.set('page', currentPage);
  1362.     fetch(url.toString(), {
  1363.         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  1364.     })
  1365.     .then(function(response) { return response.json(); })
  1366.     .then(function(data) {
  1367.         if (data.success && data.products) {
  1368.             var tempDiv = document.createElement('div');
  1369.             tempDiv.innerHTML = data.products;
  1371.             var newProducts = tempDiv.querySelectorAll('.col-lg-4, .col-lg-3, [class*=\"col-lg\"]');
  1372.             newProducts.forEach(function(product) {
  1373.                 productsContainer.appendChild(product);
  1374.             });
  1376.             currentPage = data.pagination.currentPage;
  1377.             totalPages = data.pagination.totalPages;
  1379.             // Initialiser les images et events pour les nouveaux produits
  1380.             if (typeof initializeProductImages === 'function') initializeProductImages(tempDiv);
  1381.             if (typeof initializeProductEventListeners === 'function') initializeProductEventListeners(tempDiv);
  1383.             if (currentPage >= totalPages) {
  1384.                 document.getElementById('loadMoreContainer').style.display = 'none';
  1385.             } else {
  1386.                 btn.disabled = false;
  1387.                 btn.innerHTML = originalText;
  1388.             }
  1389.         } else {
  1390.             document.getElementById('loadMoreContainer').style.display = 'none';
  1391.         }
  1392.         isLoading = false;
  1393.     })
  1394.     .catch(function(error) {
  1395.         btn.disabled = false;
  1396.         btn.innerHTML = originalText;
  1397.         isLoading = false;
  1398.     });
  1399. }
  1400. </script>
  1402. <script>
  1403. \t// Variables globales pour la navigation des images
  1404. const productImages = {};
  1405. const currentImageIndex = {};
  1407. // Variables pour le chargement infini (utilise les var globales définies au-dessus)
  1408. let hasMoreProducts = totalPages > currentPage;
  1410. let currentFilters = {
  1411. category: '";
  1412.         // line 915
  1413.         yield (((array_key_exists("currentCategory", $context) &&  !(null === $context["currentCategory"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentCategory"], "html", null, true)) : (""));
  1414.         yield "',
  1415. brand: '";
  1416.         // line 916
  1417.         yield (((array_key_exists("currentBrand", $context) &&  !(null === $context["currentBrand"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentBrand"], "html", null, true)) : (""));
  1418.         yield "',
  1419. sort: '";
  1420.         // line 917
  1421.         yield (((array_key_exists("currentSort", $context) &&  !(null === $context["currentSort"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentSort"], "html", null, true)) : ("newest"));
  1422.         yield "',
  1423. priceMin: '";
  1424.         // line 918
  1425.         yield (((array_key_exists("priceMin", $context) &&  !(null === $context["priceMin"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["priceMin"], "html", null, true)) : (""));
  1426.         yield "',
  1427. priceMax: '";
  1428.         // line 919
  1429.         yield (((array_key_exists("priceMax", $context) &&  !(null === $context["priceMax"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["priceMax"], "html", null, true)) : (""));
  1430.         yield "'
  1431. };
  1433. // Modal style eBay pour remplacer les alertes - Définir AVANT son utilisation
  1434. function showEbayModal(message, type = 'info') {
  1435. const modalId = 'ebayAlertModal';
  1436. let existingModal = document.getElementById(modalId);
  1437. if (existingModal) {
  1438. existingModal.remove();
  1439. }
  1441. const modal = document.createElement('div');
  1442. modal.id = modalId;
  1443. modal.className = 'modal fade';
  1444. modal.setAttribute('tabindex', '-1');
  1445. modal.setAttribute('aria-labelledby', 'ebayAlertModalLabel');
  1446. modal.setAttribute('aria-hidden', 'true');
  1448. // Définir les couleurs et icônes selon le type
  1449. let iconClass = 'ti-info-alt';
  1450. let iconColor = '#0064D2';
  1451. let title = 'Information';
  1453. switch (type) {
  1454. case 'success': iconClass = 'ti-check-box';
  1455. iconColor = '#0A7C42';
  1456. title = 'Succès';
  1457. break;
  1458. case 'error':
  1459. case 'danger': iconClass = 'ti-alert';
  1460. iconColor = '#D32F2F';
  1461. title = 'Erreur';
  1462. break;
  1463. case 'warning': iconClass = 'ti-alert-triangle';
  1464. iconColor = '#F57C00';
  1465. title = 'Attention';
  1466. break;
  1467. default: iconClass = 'ti-info-alt';
  1468. iconColor = '#0064D2';
  1469. title = 'Information';
  1470. }
  1472. modal.innerHTML = `
  1473. <div class=\"modal-dialog modal-dialog-centered\">
  1474. <div class=\"modal-content\" style=\"border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);\">
  1475. <div class=\"modal-header\" style=\"border-bottom: 1px solid #e0e0e0; padding: 20px 24px;\">
  1476. <h5 class=\"modal-title\" id=\"ebayAlertModalLabel\" style=\"font-weight: 600; font-size: 18px; color: #333;\">
  1477. <i class=\"\${iconClass}\" style=\"color: \${iconColor}; margin-right: 8px;\"></i>\${title}
  1478. </h5>
  1479. <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" style=\"margin: 0;\"></button>
  1480. </div>
  1481. <div class=\"modal-body\" style=\"padding: 24px; text-align: center;\">
  1482. <p style=\"margin: 0; font-size: 16px; color: #333; line-height: 1.5;\">\${message}</p>
  1483. </div>
  1484. <div class=\"modal-footer\" style=\"border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: center;\">
  1485. <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;\">
  1486. OK
  1487. </button>
  1488. </div>
  1489. </div>
  1490. </div>
  1491. `;
  1493. document.body.appendChild(modal);
  1494. const bsModal = new bootstrap.Modal(modal);
  1495. bsModal.show();
  1497. // Supprimer le modal du DOM après fermeture
  1498. modal.addEventListener('hidden.bs.modal', function () {
  1499. modal.remove();
  1500. });
  1501. }
  1503. // Rendre la fonction globale
  1504. window.showEbayModal = showEbayModal;
  1506. document.addEventListener('DOMContentLoaded', function () { // Initialisation des données d'images pour chaque produit
  1507. ";
  1508.         // line 996
  1509.         $context['_parent'] = $context;
  1510.         $context['_seq'] = CoreExtension::ensureTraversable(($context["products"] ?? null));
  1511.         foreach ($context['_seq'] as $context["_key"] => $context["product"]) {
  1512.             // line 997
  1513.             $context["allImages"] = ((CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", true, true, false, 997)) ? (Twig\Extension\CoreExtension::default(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "images", [], "any", false, false, false, 997), [])) : ([]));
  1514.             // line 998
  1515.             if (CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", true, true, false, 998)) {
  1516.                 // line 999
  1517.                 yield "\t";
  1518.                 $context['_parent'] = $context;
  1519.                 $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "variants", [], "any", false, false, false, 999));
  1520.                 foreach ($context['_seq'] as $context["_key"] => $context["variant"]) {
  1521.                     // line 1000
  1522.                     yield "\t\t";
  1523.                     if ((CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "isActive", [], "any", false, false, false, 1000) && CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", true, true, false, 1000))) {
  1524.                         // line 1001
  1525.                         yield "\t\t\t";
  1526.                         $context['_parent'] = $context;
  1527.                         $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, $context["variant"], "images", [], "any", false, false, false, 1001));
  1528.                         foreach ($context['_seq'] as $context["_key"] => $context["variantImg"]) {
  1529.                             // line 1002
  1530.                             yield "\t\t\t\t";
  1531.                             $context["allImages"] = Twig\Extension\CoreExtension::merge(($context["allImages"] ?? null), [$context["variantImg"]]);
  1532.                             // line 1003
  1533.                             yield "\t\t\t";
  1534.                         }
  1535.                         $_parent = $context['_parent'];
  1536.                         unset($context['_seq'], $context['_key'], $context['variantImg'], $context['_parent']);
  1537.                         $context = array_intersect_key($context, $_parent) + $_parent;
  1538.                         // line 1004
  1539.                         yield "\t\t";
  1540.                     }
  1541.                     // line 1005
  1542.                     yield "\t";
  1543.                 }
  1544.                 $_parent = $context['_parent'];
  1545.                 unset($context['_seq'], $context['_key'], $context['variant'], $context['_parent']);
  1546.                 $context = array_intersect_key($context, $_parent) + $_parent;
  1547.             }
  1548.             // line 1007
  1549.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["allImages"] ?? null)) > 0)) {
  1550.                 yield "productImages[";
  1551.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 1007), "html", null, true);
  1552.                 yield "] = [";
  1553.                 $context['_parent'] = $context;
  1554.                 $context['_seq'] = CoreExtension::ensureTraversable(($context["allImages"] ?? null));
  1555.                 $context['loop'] = [
  1556.                   'parent' => $context['_parent'],
  1557.                   'index0' => 0,
  1558.                   'index'  => 1,
  1559.                   'first'  => true,
  1560.                 ];
  1561.                 if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  1562.                     $length = count($context['_seq']);
  1563.                     $context['loop']['revindex0'] = $length - 1;
  1564.                     $context['loop']['revindex'] = $length;
  1565.                     $context['loop']['length'] = $length;
  1566.                     $context['loop']['last'] = 1 === $length;
  1567.                 }
  1568.                 foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  1569.                     yield "'";
  1570.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  1571.                     yield "'";
  1572.                     if ((($tmp =  !CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "last", [], "any", false, false, false, 1007)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1573.                         yield ",";
  1574.                     }
  1575.                     ++$context['loop']['index0'];
  1576.                     ++$context['loop']['index'];
  1577.                     $context['loop']['first'] = false;
  1578.                     if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  1579.                         --$context['loop']['revindex0'];
  1580.                         --$context['loop']['revindex'];
  1581.                         $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  1582.                     }
  1583.                 }
  1584.                 $_parent = $context['_parent'];
  1585.                 unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  1586.                 $context = array_intersect_key($context, $_parent) + $_parent;
  1587.                 yield "];
  1588. currentImageIndex[";
  1589.                 // line 1008
  1590.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 1008), "html", null, true);
  1591.                 yield "] = 0;
  1592. console.log('Initialized product ";
  1593.                 // line 1009
  1594.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 1009), "html", null, true);
  1595.                 yield " with images:', productImages[";
  1596.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["product"], "id", [], "any", false, false, false, 1009), "html", null, true);
  1597.                 yield "]);";
  1598.             }
  1599.         }
  1600.         $_parent = $context['_parent'];
  1601.         unset($context['_seq'], $context['_key'], $context['product'], $context['_parent']);
  1602.         $context = array_intersect_key($context, $_parent) + $_parent;
  1603.         // line 1010
  1604.         yield "
  1605. // Gestion du panier
  1606. const cartButtons = document.querySelectorAll('.add-to-cart');
  1607. cartButtons.forEach(button => {
  1608. button.addEventListener('click', function () {
  1609. const productId = this.getAttribute('data-product-id');
  1610. const qty = this.getAttribute('data-qty');
  1612. fetch('";
  1613.         // line 1018
  1614.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_add");
  1615.         yield "', {
  1616. method: 'POST',
  1617. headers: {
  1618. 'Content-Type': 'application/x-www-form-urlencoded'
  1619. },
  1620. body: 'productId=' + productId + '&qty=' + qty
  1621. }).then(response => response.json()).then(data => {
  1622. if (data.ok) {
  1623. showEbayModal('Produit ajouté au panier !', 'success');
  1624. // Mettre à jour le compteur du panier si présent
  1625. const cartBadge = document.querySelector('.cart-badge');
  1626. if (cartBadge) {
  1627. cartBadge.textContent = data.totalQty;
  1628. }
  1629. } else {
  1630. showEbayModal(data.message || 'Erreur lors de l\\'ajout au panier', 'error');
  1631. }
  1632. }).catch(error => {
  1633. console.error('Erreur:', error);
  1634. showEbayModal('Erreur lors de l\\'ajout au panier', 'error');
  1635. });
  1636. });
  1637. });
  1638. });
  1640. // Fonctions pour la navigation des images
  1641. window.showImageNav = function(productId) {
  1642. const leftBtn = document.getElementById('img-left-' + productId);
  1643. const rightBtn = document.getElementById('img-right-' + productId);
  1644. const indicators = document.getElementById('img-indicators-' + productId);
  1646. if (leftBtn) {
  1647. leftBtn.style.display = 'flex';
  1648. }
  1650. if (rightBtn) {
  1651. rightBtn.style.display = 'flex';
  1652. }
  1654. if (indicators) {
  1655. indicators.style.display = 'flex';
  1656. }
  1657. };
  1659. window.hideImageNav = function(productId) {
  1660. const leftBtn = document.getElementById('img-left-' + productId);
  1661. const rightBtn = document.getElementById('img-right-' + productId);
  1662. const indicators = document.getElementById('img-indicators-' + productId);
  1664. if (leftBtn) {
  1665. leftBtn.style.display = 'none';
  1666. }
  1668. if (rightBtn) {
  1669. rightBtn.style.display = 'none';
  1670. }
  1672. if (indicators) {
  1673. indicators.style.display = 'none';
  1674. }
  1675. };
  1677. window.showImage = function(productId, imageIndex) {
  1678. if (! productImages[productId] || ! productImages[productId][imageIndex]) {
  1679. console.log('Image not found for product', productId, 'index', imageIndex);
  1680. return;
  1681. }
  1683. const img = document.getElementById('main-img-' + productId);
  1684. if (img) {
  1685. console.log('Changing image to:', productImages[productId][imageIndex]);
  1687. // Force le rechargement de l'image
  1688. img.style.opacity = '0.5';
  1689. setTimeout(() => {
  1690. img.src = productImages[productId][imageIndex];
  1691. img.style.opacity = '1';
  1692. currentImageIndex[productId] = imageIndex;
  1693. updateIndicators(productId);
  1694. }, 100);
  1695. } else {
  1696. console.log('Image element not found:', 'main-img-' + productId);
  1697. }
  1698. };
  1700. window.nextImage = function(productId) {
  1701. if (! productImages[productId]) {
  1702. console.log('No images for product', productId);
  1703. return;
  1704. }
  1706. const nextIndex = (currentImageIndex[productId] + 1) % productImages[productId].length;
  1707. showImage(productId, nextIndex);
  1708. };
  1710. window.prevImage = function(productId) {
  1711. if (! productImages[productId]) {
  1712. console.log('No images for product', productId);
  1713. return;
  1714. }
  1716. const prevIndex = currentImageIndex[productId] === 0 ? productImages[productId].length - 1 : currentImageIndex[productId] - 1;
  1717. showImage(productId, prevIndex);
  1718. };
  1720. function updateIndicators(productId) {
  1721. const indicators = document.querySelectorAll('#img-indicators-' + productId + ' .indicator');
  1722. indicators.forEach((indicator, index) => {
  1723. indicator.classList.toggle('active', index === currentImageIndex[productId]);
  1724. });
  1725. }
  1727. // Fonction pour tracker la vue d'un produit
  1728. function trackProductView(productId) {
  1729. fetch (`/api/track-product-view/\${productId}`, {
  1730. method: 'POST',
  1731. headers: {
  1732. 'Content-Type': 'application/json',
  1733. 'X-Requested-With': 'XMLHttpRequest'
  1734. }
  1735. }).then(response => response.json()).then(data => {
  1736. if (data.success) {
  1737. console.log (`Vue enregistrée pour le produit \${productId}:`, data.viewCount);
  1738. }
  1739. }).catch(error => {
  1740. console.error('Erreur lors du tracking:', error);
  1741. });
  1742. }
  1744. // Fonction pour tracker la vue d'une boutique
  1745. function trackShopView(shopId) {
  1746. fetch (`/api/track-shop-view/\${shopId}`, {
  1747. method: 'POST',
  1748. headers: {
  1749. 'Content-Type': 'application/json',
  1750. 'X-Requested-With': 'XMLHttpRequest'
  1751. }
  1752. }).then(response => response.json()).then(data => {
  1753. if (data.success) {
  1754. console.log (`Vue enregistrée pour la boutique \${shopId}:`, data.viewCount);
  1755. }
  1756. }).catch(error => {
  1757. console.error('Erreur lors du tracking:', error);
  1758. });
  1759. }
  1761. // Ajouter le tracking aux événements existants
  1762. document.addEventListener('DOMContentLoaded', function () { // Tracking au survol des produits (avec délai)
  1763. const productCards = document.querySelectorAll('.single_product_item');
  1765. productCards.forEach(card => {
  1766. const productId = card.dataset.productId;
  1767. const shopId = card.dataset.shopId;
  1769. if (productId) {
  1770. let hoverTimeout;
  1772. card.addEventListener('mouseenter', () => { // Tracker la vue du produit après 2 secondes de survol
  1773. hoverTimeout = setTimeout(() => {
  1774. trackProductView(productId);
  1775. }, 2000);
  1776. });
  1778. card.addEventListener('mouseleave', () => {
  1779. clearTimeout(hoverTimeout);
  1780. });
  1782. // Tracking au clic sur le lien du produit
  1783. const productLink = card.querySelector('.product_img a');
  1784. if (productLink) {
  1785. productLink.addEventListener('click', () => {
  1786. trackProductView(productId);
  1787. });
  1788. }
  1789. }
  1791. // Tracking au clic sur le lien de la boutique
  1792. if (shopId) {
  1793. const shopLink = card.querySelector('.shop-link');
  1794. if (shopLink) {
  1795. shopLink.addEventListener('click', () => {
  1796. trackShopView(shopId);
  1797. });
  1798. }
  1799. }
  1800. });
  1801. });
  1802. </script>
  1804. <script>
  1805. \t// Système de filtrage AJAX avancé
  1806. // currentFilters est déjà déclaré plus haut, on met juste à jour les valeurs
  1807. if (typeof currentFilters !== 'undefined') { // Mettre à jour les valeurs existantes
  1808. currentFilters.category = '";
  1809.         // line 1211
  1810.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentCategory"] ?? null), "html", null, true);
  1811.         yield "';
  1812. currentFilters.brand = '";
  1813.         // line 1212
  1814.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentBrand"] ?? null), "html", null, true);
  1815.         yield "';
  1816. currentFilters.condition = '";
  1817.         // line 1213
  1818.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentCondition"] ?? null), "html", null, true);
  1819.         yield "';
  1820. currentFilters.sort = '";
  1821.         // line 1214
  1822.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentSort"] ?? null), "html", null, true);
  1823.         yield "';
  1824. currentFilters.priceMin = '";
  1825.         // line 1215
  1826.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["priceMin"] ?? null), "html", null, true);
  1827.         yield "';
  1828. currentFilters.priceMax = '";
  1829.         // line 1216
  1830.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["priceMax"] ?? null), "html", null, true);
  1831.         yield "';
  1832. currentFilters.page = ";
  1833.         // line 1217
  1834.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentPage"] ?? null), "html", null, true);
  1835.         yield ";
  1836. currentFilters.q = currentFilters.q || '";
  1837.         // line 1218
  1838.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1218), "query", [], "any", false, false, false, 1218), "get", ["q", ""], "method", false, false, false, 1218), "html", null, true);
  1839.         yield "';
  1840. // Ajouter les nouveaux filtres depuis l'URL s'ils n'existent pas
  1841. if (! currentFilters.shop) 
  1842. currentFilters.shop = '";
  1843.         // line 1221
  1844.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1221), "query", [], "any", false, false, false, 1221), "get", ["shop", ""], "method", false, false, false, 1221), "html", null, true);
  1845.         yield "';
  1847. if (! currentFilters.featured) 
  1848. currentFilters.featured = '";
  1849.         // line 1224
  1850.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1224), "query", [], "any", false, false, false, 1224), "get", ["featured", ""], "method", false, false, false, 1224), "html", null, true);
  1851.         yield "';
  1853. if (! currentFilters.digital) 
  1854. currentFilters.digital = '";
  1855.         // line 1227
  1856.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1227), "query", [], "any", false, false, false, 1227), "get", ["digital", ""], "method", false, false, false, 1227), "html", null, true);
  1857.         yield "';
  1859. if (! currentFilters.stockStatus) 
  1860. currentFilters.stockStatus = '";
  1861.         // line 1230
  1862.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1230), "query", [], "any", false, false, false, 1230), "get", ["stock_status", ""], "method", false, false, false, 1230), "html", null, true);
  1863.         yield "';
  1865. if (! currentFilters.ratingMin) 
  1866. currentFilters.ratingMin = '";
  1867.         // line 1233
  1868.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1233), "query", [], "any", false, false, false, 1233), "get", ["rating_min", ""], "method", false, false, false, 1233), "html", null, true);
  1869.         yield "';
  1871. if (! currentFilters.rating) 
  1872. currentFilters.rating = '";
  1873.         // line 1236
  1874.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1236), "query", [], "any", false, false, false, 1236), "get", ["rating_min", ""], "method", false, false, false, 1236), "html", null, true);
  1875.         yield "';
  1877. if (! currentFilters.weightMin) 
  1878. currentFilters.weightMin = '";
  1879.         // line 1239
  1880.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1239), "query", [], "any", false, false, false, 1239), "get", ["weight_min", ""], "method", false, false, false, 1239), "html", null, true);
  1881.         yield "';
  1883. if (! currentFilters.weightMax) 
  1884. currentFilters.weightMax = '";
  1885.         // line 1242
  1886.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1242), "query", [], "any", false, false, false, 1242), "get", ["weight_max", ""], "method", false, false, false, 1242), "html", null, true);
  1887.         yield "';
  1889. if (! currentFilters.color) 
  1890. currentFilters.color = '";
  1891.         // line 1245
  1892.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1245), "query", [], "any", false, false, false, 1245), "get", ["color", ""], "method", false, false, false, 1245), "html", null, true);
  1893.         yield "';
  1895. if (! currentFilters.size) 
  1896. currentFilters.size = '";
  1897.         // line 1248
  1898.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1248), "query", [], "any", false, false, false, 1248), "get", ["size", ""], "method", false, false, false, 1248), "html", null, true);
  1899.         yield "';
  1901. if (! currentFilters.material) 
  1902. currentFilters.material = '";
  1903.         // line 1251
  1904.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1251), "query", [], "any", false, false, false, 1251), "get", ["material", ""], "method", false, false, false, 1251), "html", null, true);
  1905.         yield "';
  1907. if (! currentFilters.condition) 
  1908. currentFilters.condition = '";
  1909.         // line 1254
  1910.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1254), "query", [], "any", false, false, false, 1254), "get", ["condition", ""], "method", false, false, false, 1254), "html", null, true);
  1911.         yield "';
  1913. if (! currentFilters.availability) 
  1914. currentFilters.availability = '";
  1915.         // line 1257
  1916.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1257), "query", [], "any", false, false, false, 1257), "get", ["availability", ""], "method", false, false, false, 1257), "html", null, true);
  1917.         yield "';
  1919. } else { // Si currentFilters n'existe pas, le créer avec les valeurs de l'URL
  1920. let currentFilters = {
  1921. category: '";
  1922.         // line 1261
  1923.         yield (((array_key_exists("currentCategory", $context) &&  !(null === $context["currentCategory"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentCategory"], "html", null, true)) : (""));
  1924.         yield "',
  1925. brand: '";
  1926.         // line 1262
  1927.         yield (((array_key_exists("currentBrand", $context) &&  !(null === $context["currentBrand"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentBrand"], "html", null, true)) : (""));
  1928.         yield "',
  1929. condition: '";
  1930.         // line 1263
  1931.         yield (((array_key_exists("currentCondition", $context) &&  !(null === $context["currentCondition"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentCondition"], "html", null, true)) : (""));
  1932.         yield "',
  1933. sort: '";
  1934.         // line 1264
  1935.         yield (((array_key_exists("currentSort", $context) &&  !(null === $context["currentSort"]))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["currentSort"], "html", null, true)) : ("newest"));
  1936.         yield "',
  1937. priceMin: '";
  1938.         // line 1265
  1939.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1265), "query", [], "any", false, false, false, 1265), "get", ["price_min", ""], "method", false, false, false, 1265), "html", null, true);
  1940.         yield "',
  1941. priceMax: '";
  1942.         // line 1266
  1943.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1266), "query", [], "any", false, false, false, 1266), "get", ["price_max", ""], "method", false, false, false, 1266), "html", null, true);
  1944.         yield "',
  1945. page: ";
  1946.         // line 1267
  1947.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(($context["currentPage"] ?? null), "html", null, true);
  1948.         yield ",
  1949. q: '";
  1950.         // line 1268
  1951.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1268), "query", [], "any", false, false, false, 1268), "get", ["q", ""], "method", false, false, false, 1268), "html", null, true);
  1952.         yield "',
  1953. // Nouveaux filtres depuis l'URL
  1954. shop: '";
  1955.         // line 1270
  1956.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1270), "query", [], "any", false, false, false, 1270), "get", ["shop", ""], "method", false, false, false, 1270), "html", null, true);
  1957.         yield "',
  1958. featured: '";
  1959.         // line 1271
  1960.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1271), "query", [], "any", false, false, false, 1271), "get", ["featured", ""], "method", false, false, false, 1271), "html", null, true);
  1961.         yield "',
  1962. digital: '";
  1963.         // line 1272
  1964.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1272), "query", [], "any", false, false, false, 1272), "get", ["digital", ""], "method", false, false, false, 1272), "html", null, true);
  1965.         yield "',
  1966. stockStatus: '";
  1967.         // line 1273
  1968.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1273), "query", [], "any", false, false, false, 1273), "get", ["stock_status", ""], "method", false, false, false, 1273), "html", null, true);
  1969.         yield "',
  1970. ratingMin: '";
  1971.         // line 1274
  1972.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1274), "query", [], "any", false, false, false, 1274), "get", ["rating_min", ""], "method", false, false, false, 1274), "html", null, true);
  1973.         yield "',
  1974. rating: '";
  1975.         // line 1275
  1976.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1275), "query", [], "any", false, false, false, 1275), "get", ["rating_min", ""], "method", false, false, false, 1275), "html", null, true);
  1977.         yield "',
  1978. weightMin: '";
  1979.         // line 1276
  1980.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1276), "query", [], "any", false, false, false, 1276), "get", ["weight_min", ""], "method", false, false, false, 1276), "html", null, true);
  1981.         yield "',
  1982. weightMax: '";
  1983.         // line 1277
  1984.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1277), "query", [], "any", false, false, false, 1277), "get", ["weight_max", ""], "method", false, false, false, 1277), "html", null, true);
  1985.         yield "',
  1986. color: '";
  1987.         // line 1278
  1988.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1278), "query", [], "any", false, false, false, 1278), "get", ["color", ""], "method", false, false, false, 1278), "html", null, true);
  1989.         yield "',
  1990. size: '";
  1991.         // line 1279
  1992.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1279), "query", [], "any", false, false, false, 1279), "get", ["size", ""], "method", false, false, false, 1279), "html", null, true);
  1993.         yield "',
  1994. material: '";
  1995.         // line 1280
  1996.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1280), "query", [], "any", false, false, false, 1280), "get", ["material", ""], "method", false, false, false, 1280), "html", null, true);
  1997.         yield "',
  1998. condition: '";
  1999.         // line 1281
  2000.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1281), "query", [], "any", false, false, false, 1281), "get", ["condition", ""], "method", false, false, false, 1281), "html", null, true);
  2001.         yield "',
  2002. availability: '";
  2003.         // line 1282
  2004.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "request", [], "any", false, false, false, 1282), "query", [], "any", false, false, false, 1282), "get", ["availability", ""], "method", false, false, false, 1282), "html", null, true);
  2005.         yield "'
  2006. };
  2007. }
  2009. // Fonction pour appliquer les filtres
  2010. function applyFilters() {
  2011. const url = new URL('";
  2012.         // line 1288
  2013.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_api_products_filter");
  2014.         yield "', window.location.origin);
  2016. // Ajouter les paramètres
  2017. Object.keys(currentFilters).forEach(key => {
  2018. if (currentFilters[key] && currentFilters[key] !== '') { // Mapper les clés pour l'API
  2019. let apiKey = key;
  2020. if (key === 'priceMin') {
  2021. apiKey = 'price_min';
  2022. } else if (key === 'priceMax') {
  2023. apiKey = 'price_max';
  2024. } else if (key === 'ratingMin') {
  2025. apiKey = 'rating_min';
  2026. } else if (key === 'weightMin') {
  2027. apiKey = 'weight_min';
  2028. } else if (key === 'weightMax') {
  2029. apiKey = 'weight_max';
  2030. } else if (key === 'stockStatus') {
  2031. apiKey = 'stock_status';
  2032. }
  2034. url.searchParams.set(apiKey, currentFilters[key]);
  2035. }
  2036. });
  2038. // Afficher le loader
  2039. document.getElementById('productsContainer').innerHTML = '<div class=\"col-12 text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Chargement...</div>';
  2041. // Faire la requête AJAX
  2042. fetch(url).then(response => response.json()).then(data => {
  2043. if (data.success) { // Mettre à jour les produits
  2044. document.getElementById('productsContainer').innerHTML = data.products;
  2046. // Mettre à jour la pagination
  2047. currentPage = data.pagination.currentPage;
  2048. totalPages = data.pagination.totalPages;
  2049. hasMoreProducts = currentPage < totalPages;
  2051. // Préserver l'état des filtres statiques avant la mise à jour
  2052. const preservedFilters = {
  2053. featured: currentFilters.featured,
  2054. digital: currentFilters.digital,
  2055. availability: currentFilters.availability,
  2056. rating: currentFilters.rating || currentFilters.ratingMin
  2057. };
  2059. // Mettre à jour les marques disponibles (toujours afficher toutes)
  2060. updateAvailableBrands(data.availableBrands || []);
  2062. // Mettre à jour les conditions disponibles (toujours afficher toutes)
  2063. updateAvailableConditions(data.availableConditions || []);
  2065. // Mettre à jour les boutiques disponibles (toujours afficher toutes)
  2066. updateAvailableShops(data.availableShops || []);
  2068. // Mettre à jour les attributs disponibles (toujours afficher tous)
  2069. updateAvailableAttributes(data.availableAttributes || {});
  2071. // Restaurer l'état des filtres statiques après la mise à jour
  2072. restoreStaticFiltersState(preservedFilters);
  2074. // Réinitialiser les filtres depuis currentFilters pour s'assurer qu'ils sont tous cochés
  2075. if (typeof initializeFiltersFromURL === 'function') {
  2076. initializeFiltersFromURL();
  2077. }
  2079. // Mettre à jour l'URL
  2080. updateURL();
  2082. // Mettre à jour l'affichage du bouton
  2083. updateLoadMoreButton();
  2085. // Réinitialiser les event listeners pour les nouveaux produits
  2086. const tempDiv = document.createElement('div');
  2087. tempDiv.innerHTML = data.products;
  2088. initializeProductEventListeners(tempDiv);
  2089. initializeProductImages(tempDiv);
  2091. // Mettre à jour les filtres actifs
  2092. if (typeof updateActiveFilters === 'function') {
  2093. updateActiveFilters();
  2094. }
  2095. }
  2096. }).catch(error => {
  2097. console.error('Erreur lors du filtrage:', error);
  2098. document.getElementById('productsContainer').innerHTML = '<div class=\"col-12 text-center text-danger\">Erreur lors du chargement des produits</div>';
  2099. });
  2100. }
  2102. // Exposer la fonction globalement
  2103. window.applyFilters = applyFilters;
  2105. // Fonction pour appliquer le tri
  2106. function applySorting() {
  2107. currentFilters.sort = document.getElementById('sortSelect').value;
  2108. currentFilters.page = 1;
  2109. applyFilters();
  2110. }
  2112. // Fonction pour appliquer le filtre de prix
  2113. function applyPriceFilter() {
  2114. currentFilters.priceMin = document.getElementById('priceMin').value;
  2115. currentFilters.priceMax = document.getElementById('priceMax').value;
  2116. currentFilters.page = 1;
  2117. applyFilters();
  2118. }
  2120. // Fonction pour appliquer le filtre de poids
  2121. function applyWeightFilter() {
  2122. currentFilters.weightMin = document.getElementById('weightMin').value;
  2123. currentFilters.weightMax = document.getElementById('weightMax').value;
  2124. currentFilters.page = 1;
  2125. applyFilters();
  2126. }
  2128. // Fonction pour changer de page
  2129. function changePage(page) {
  2130. currentFilters.page = page;
  2131. applyFilters();
  2132. }
  2134. // Fonction pour mettre à jour les marques disponibles
  2135. function updateAvailableBrands(brands) {
  2136. const brandsFilter = document.getElementById('brandsFilter');
  2137. const brandList = document.getElementById('brandList');
  2138. const currentBrandValue = currentFilters.brand || '';
  2140. // Toujours afficher le filtre des marques
  2141. brandsFilter.style.display = 'block';
  2143. // Si pas de marques disponibles, garder les marques existantes ou afficher un message
  2144. if (brands.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  2145. if (brandList && brandList.children.length > 0) { // Juste mettre à jour les états cochés
  2146. const existingRadios = brandList.querySelectorAll('input[name=\"brand\"]');
  2147. existingRadios.forEach(radio => {
  2148. if (currentBrandValue && radio.value === currentBrandValue) {
  2149. radio.checked = true;
  2150. } else if (! currentBrandValue && radio.id === 'all-brands') {
  2151. radio.checked = true;
  2152. } else {
  2153. radio.checked = false;
  2154. }
  2155. });
  2156. return; // Garder les marques existantes
  2157. }
  2158. // Sinon, afficher un message
  2159. brandList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune marque disponible</span></li>';
  2160. return;
  2161. }
  2163. let html = '';
  2164. const isAllSelected = ! currentBrandValue || currentBrandValue === '';
  2165. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-brands\" name=\"brand\" \${
  2166. isAllSelected ? 'checked' : ''
  2167. }><label for=\"all-brands\">Toutes les marques</label></li>`;
  2169. brands.forEach(brand => {
  2170. const isSelected = currentBrandValue === brand.slug;
  2171. html += `<li class=\"filter-list\">
  2172.                 <input class=\"pixel-radio\" type=\"radio\" id=\"brand-\${
  2173. brand.id
  2174. }\" name=\"brand\" value=\"\${
  2175. brand.slug
  2176. }\" \${
  2177. isSelected ? 'checked' : ''
  2178. }>
  2179.                 <label for=\"brand-\${
  2180. brand.id
  2181. }\">\${
  2182. brand.name
  2183. }<span>(\${
  2184. brand.productCount
  2185. })</span></label>
  2186.             </li>`;
  2187. });
  2189. brandList.innerHTML = html;
  2191. // Ajouter les event listeners
  2192. brandList.querySelectorAll('input[name=\"brand\"]').forEach(radio => {
  2193. radio.addEventListener('change', function () {
  2194. if (this.id === 'all-brands') {
  2195. currentFilters.brand = '';
  2196. } else {
  2197. currentFilters.brand = this.value;
  2198. } currentFilters.page = 1;
  2199. applyFilters();
  2200. });
  2201. });
  2202. }
  2204. // Fonction pour mettre à jour les conditions disponibles
  2205. function updateAvailableConditions(conditions) {
  2206. const conditionList = document.getElementById('conditionList');
  2207. const currentConditionValue = currentFilters.condition || '';
  2209. // Toujours garder le contenu statique et juste mettre à jour les états cochés
  2210. if (conditionList && conditionList.children.length > 0) {
  2211. const existingRadios = conditionList.querySelectorAll('input[name=\"condition\"]');
  2212. existingRadios.forEach(radio => {
  2213. if (currentConditionValue && radio.value === currentConditionValue) {
  2214. radio.checked = true;
  2215. } else if (! currentConditionValue && radio.id === 'all-conditions') {
  2216. radio.checked = true;
  2217. } else {
  2218. radio.checked = false;
  2219. }
  2220. });
  2221. return; // Garder les conditions existantes
  2222. }
  2224. // Si pas de contenu statique, générer dynamiquement
  2225. if (conditions.length === 0) {
  2226. conditionList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune condition disponible</span></li>';
  2227. return;
  2228. }
  2230. let html = '';
  2231. const isAllSelected = ! currentConditionValue || currentConditionValue === '';
  2232. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-conditions\" name=\"condition\" \${
  2233. isAllSelected ? 'checked' : ''
  2234. }><label for=\"all-conditions\">Toutes les conditions</label></li>`;
  2236. conditions.forEach(condition => {
  2237. const isSelected = currentConditionValue === condition.slug;
  2238. html += `<li class=\"filter-list\">
  2239.                 <input class=\"pixel-radio\" type=\"radio\" id=\"condition-\${
  2240. condition.id
  2241. }\" name=\"condition\" value=\"\${
  2242. condition.slug
  2243. }\" \${
  2244. isSelected ? 'checked' : ''
  2245. }>
  2246.                 <label for=\"condition-\${
  2247. condition.id
  2248. }\">\${
  2249. condition.name
  2250. }<span>(\${
  2251. condition.productCount
  2252. })</span></label>
  2253.             </li>`;
  2254. });
  2256. conditionList.innerHTML = html;
  2258. // Ajouter les event listeners
  2259. conditionList.querySelectorAll('input[name=\"condition\"]').forEach(radio => {
  2260. radio.addEventListener('change', function () {
  2261. if (this.id === 'all-conditions') {
  2262. currentFilters.condition = '';
  2263. } else {
  2264. currentFilters.condition = this.value;
  2265. } currentFilters.page = 1;
  2266. applyFilters();
  2267. });
  2268. });
  2269. }
  2271. // Fonction pour mettre à jour les boutiques disponibles
  2272. function updateAvailableShops(shops) {
  2273. const shopsFilter = document.getElementById('shopsFilter');
  2274. const shopList = document.getElementById('shopList');
  2275. const currentShopValue = currentFilters.shop || '';
  2277. // Toujours afficher le filtre des boutiques
  2278. shopsFilter.style.display = 'block';
  2280. // Si pas de boutiques disponibles, afficher un message ou garder les boutiques existantes
  2281. if (shops.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  2282. if (shopList && shopList.children.length > 0) {
  2283. return; // Garder les boutiques existantes
  2284. }
  2285. // Sinon, afficher un message
  2286. shopList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune boutique disponible</span></li>';
  2287. return;
  2288. }
  2290. let html = '';
  2291. const isAllSelected = ! currentShopValue || currentShopValue === '';
  2292. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-shops\" name=\"shop\" \${
  2293. isAllSelected ? 'checked' : ''
  2294. }><label for=\"all-shops\">Toutes les boutiques</label></li>`;
  2296. shops.forEach(shop => {
  2297. const isSelected = currentShopValue === shop.slug;
  2298. html += `<li class=\"filter-list\">
  2299.                 <input class=\"pixel-radio\" type=\"radio\" id=\"shop-\${
  2300. shop.id
  2301. }\" name=\"shop\" value=\"\${
  2302. shop.slug
  2303. }\" \${
  2304. isSelected ? 'checked' : ''
  2305. }>
  2306.                 <label for=\"shop-\${
  2307. shop.id
  2308. }\">\${
  2309. shop.name
  2310. }<span>(\${
  2311. shop.productCount
  2312. })</span></label>
  2313.             </li>`;
  2314. });
  2316. shopList.innerHTML = html;
  2318. // Mettre à jour aussi le modal
  2319. const modalShopList = document.getElementById('modalShopList');
  2320. if (modalShopList) {
  2321. 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-');
  2322. }
  2324. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  2325. shopList.querySelectorAll('input[name=\"shop\"]').forEach(radio => {
  2326. radio.addEventListener('change', function () {
  2327. if (this.id === 'all-shops') {
  2328. currentFilters.shop = '';
  2329. } else {
  2330. currentFilters.shop = this.value;
  2331. } currentFilters.page = 1;
  2332. applyFilters();
  2333. });
  2334. });
  2335. }
  2337. // Fonction pour mettre à jour les attributs disponibles
  2338. function updateAvailableAttributes(attributes) {
  2339. // Toujours afficher tous les filtres d'attributs, même s'ils ne sont pas pertinents
  2340. // Couleurs
  2341. updateAttributeFilter('colors', attributes.colors, 'colorList', 'colorsFilter');
  2343. // Tailles
  2344. updateAttributeFilter('sizes', attributes.sizes, 'sizeList', 'sizesFilter');
  2346. // Matériaux
  2347. updateAttributeFilter('materials', attributes.materials, 'materialList', 'materialsFilter');
  2349. // Conditions
  2350. updateAttributeFilter('conditions', attributes.conditions, 'conditionList', 'conditionsFilter');
  2351. }
  2353. // Fonction générique pour mettre à jour les filtres d'attributs
  2354. function updateAttributeFilter(attributeType, attributes, listId, filterId) {
  2355. const filter = document.getElementById(filterId);
  2356. const list = document.getElementById(listId);
  2357. const currentValue = currentFilters[attributeType] || '';
  2359. // Toujours afficher les filtres d'attributs
  2360. filter.style.display = 'block';
  2362. // Si pas d'attributs disponibles, afficher un message ou garder les attributs existants
  2363. if (! attributes || attributes.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  2364. if (list && list.children.length > 0) {
  2365. return; // Garder les attributs existants
  2366. }
  2367. // Sinon, afficher un message
  2368. list.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucun attribut disponible</span></li>';
  2369. return;
  2370. }
  2372. let html = '';
  2373. const isAllSelected = ! currentValue || currentValue === '';
  2374. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-\${attributeType}\" name=\"\${attributeType}\" \${
  2375. isAllSelected ? 'checked' : ''
  2376. }><label for=\"all-\${attributeType}\">Tous</label></li>`;
  2378. attributes.forEach(attr => {
  2379. const isSelected = currentValue === attr.value;
  2380. html += `<li class=\"filter-list\">
  2381.                 <input class=\"pixel-radio\" type=\"radio\" id=\"\${attributeType}-\${
  2382. attr.value
  2383. }\" name=\"\${attributeType}\" value=\"\${
  2384. attr.value
  2385. }\" \${
  2386. isSelected ? 'checked' : ''
  2387. }>
  2388.                 <label for=\"\${attributeType}-\${
  2389. attr.value
  2390. }\">\${
  2391. attr.value
  2392. }<span>(\${
  2393. attr.count
  2394. })</span></label>
  2395.             </li>`;
  2396. });
  2398. list.innerHTML = html;
  2400. // Mettre à jour aussi le modal (si l'élément existe)
  2401. const modalListId = 'modal' + listId.charAt(0).toUpperCase() + listId.slice(1); // modalColorList, modalSizeList, etc.
  2402. const modalList = document.getElementById(modalListId);
  2403. if (modalList) { // Adapter le HTML pour le modal (changer les IDs et names)
  2404. 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}-`);
  2405. modalList.innerHTML = modalHtml;
  2406. }
  2408. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  2409. list.querySelectorAll (`input[name=\"\${attributeType}\"]`).forEach(radio => {
  2410. radio.addEventListener('change', function () {
  2411. if (this.id === `all-\${attributeType}`) {
  2412. currentFilters[attributeType] = '';
  2413. } else {
  2414. currentFilters[attributeType] = this.value;
  2415. } currentFilters.page = 1;
  2416. applyFilters();
  2417. });
  2418. });
  2419. } else {
  2420. filter.style.display = 'none';
  2421. }
  2422. }
  2424. // Fonction pour mettre à jour l'URL
  2425. function updateURL () {
  2426. const url = new URL(window.location);
  2428. // Supprimer les anciens paramètres
  2429. const paramsToRemove = [
  2430. 'category',
  2431. 'brand',
  2432. 'sort',
  2433. 'price_min',
  2434. 'price_max',
  2435. 'page',
  2436. 'shop',
  2437. 'featured',
  2438. 'digital',
  2439. 'stock_status',
  2440. 'rating_min',
  2441. 'weight_min',
  2442. 'weight_max',
  2443. 'color',
  2444. 'size',
  2445. 'material',
  2446. 'condition',
  2447. 'availability'
  2448. ];
  2449. paramsToRemove.forEach(param => url.searchParams.delete(param));
  2451. // Ajouter les nouveaux paramètres
  2452. Object.keys(currentFilters).forEach(key => {
  2453. if (currentFilters[key]) {
  2454. url.searchParams.set(key, currentFilters[key]);
  2455. }
  2456. });
  2458. // Mettre à jour l'URL sans recharger la page
  2459. window.history.pushState({}, '', url);
  2460. }
  2462. // Fonction pour restaurer l'état des filtres statiques
  2463. function restoreStaticFiltersState (preservedFilters) { // Restaurer featured
  2464. if (preservedFilters.featured) {
  2465. const featuredInput = document.querySelector (`input[name=\"featured\"][value=\"\${
  2466. preservedFilters.featured
  2467. }\"]`);
  2468. if (featuredInput) {
  2469. featuredInput.checked = true;
  2470. } else {
  2471. const featuredAll = document.getElementById('featured-all');
  2472. if (featuredAll) 
  2473. featuredAll.checked = true;
  2475. }
  2476. } else {
  2477. const featuredAll = document.getElementById('featured-all');
  2478. if (featuredAll) 
  2479. featuredAll.checked = true;
  2481. }
  2483. // Restaurer digital
  2484. if (preservedFilters.digital) {
  2485. const digitalInput = document.querySelector (`input[name=\"digital\"][value=\"\${
  2486. preservedFilters.digital
  2487. }\"]`);
  2488. if (digitalInput) {
  2489. digitalInput.checked = true;
  2490. } else {
  2491. const digitalAll = document.getElementById('digital-all');
  2492. if (digitalAll) 
  2493. digitalAll.checked = true;
  2495. }
  2496. } else {
  2497. const digitalAll = document.getElementById('digital-all');
  2498. if (digitalAll) 
  2499. digitalAll.checked = true;
  2501. }
  2503. // Restaurer availability
  2504. if (preservedFilters.availability) {
  2505. const availabilityInput = document.querySelector (`input[name=\"availability\"][value=\"\${
  2506. preservedFilters.availability
  2507. }\"]`);
  2508. if (availabilityInput) {
  2509. availabilityInput.checked = true;
  2510. } else {
  2511. const availabilityAll = document.getElementById('availability-all');
  2512. if (availabilityAll) 
  2513. availabilityAll.checked = true;
  2515. }
  2516. } else {
  2517. const availabilityAll = document.getElementById('availability-all');
  2518. if (availabilityAll) 
  2519. availabilityAll.checked = true;
  2521. }
  2523. // Restaurer rating (mapping vers ratingMin)
  2524. if (preservedFilters.rating) {
  2525. const ratingInput = document.querySelector (`input[name=\"rating\"][value=\"\${
  2526. preservedFilters.rating
  2527. }\"]`);
  2528. if (ratingInput) {
  2529. ratingInput.checked = true;
  2530. } else {
  2531. const ratingAll = document.getElementById('rating-all');
  2532. if (ratingAll) 
  2533. ratingAll.checked = true;
  2535. }
  2536. } else {
  2537. const ratingAll = document.getElementById('rating-all');
  2538. if (ratingAll) 
  2539. ratingAll.checked = true;
  2541. }
  2542. }
  2544. // Fonction pour initialiser tous les filtres avec les valeurs de l'URL
  2545. function initializeFiltersFromURL () { // Initialiser les filtres statiques
  2546. const staticFilters = {
  2547. featured: currentFilters.featured || '',
  2548. digital: currentFilters.digital || '',
  2549. availability: currentFilters.availability || '',
  2550. rating: currentFilters.rating || currentFilters.ratingMin || ''
  2551. };
  2553. // Cocher les filtres statiques
  2554. Object.keys(staticFilters).forEach(filterName => {
  2555. const value = staticFilters[filterName];
  2556. if (value) {
  2557. const input = document.querySelector(`input[name=\"\${filterName}\"][value=\"\${value}\"]`);
  2558. if (input) {
  2559. input.checked = true;
  2560. } else { // Cocher \"all\" si la valeur n'existe pas
  2561. const allInput = document.getElementById (`\${filterName}-all`);
  2562. if (allInput) 
  2563. allInput.checked = true;
  2565. }
  2566. } else {
  2567. const allInput = document.getElementById (`\${filterName}-all`);
  2568. if (allInput) 
  2569. allInput.checked = true;
  2571. }
  2572. });
  2574. // Initialiser les filtres de poids
  2575. if (currentFilters.weightMin) {
  2576. const weightMinInput = document.getElementById('weightMin');
  2577. if (weightMinInput) 
  2578. weightMinInput.value = currentFilters.weightMin;
  2580. }
  2581. if (currentFilters.weightMax) {
  2582. const weightMaxInput = document.getElementById('weightMax');
  2583. if (weightMaxInput) 
  2584. weightMaxInput.value = currentFilters.weightMax;
  2586. }
  2588. // Initialiser les filtres de marque (si déjà chargés)
  2589. if (currentFilters.brand) {
  2590. const brandInput = document.querySelector (`input[name=\"brand\"][value=\"\${
  2591. currentFilters.brand
  2592. }\"]`);
  2593. if (brandInput) {
  2594. brandInput.checked = true;
  2595. } else {
  2596. const allBrands = document.getElementById('all-brands');
  2597. if (allBrands) 
  2598. allBrands.checked = true;
  2600. }
  2601. }
  2603. // Initialiser les filtres de boutique (si déjà chargés)
  2604. if (currentFilters.shop) {
  2605. const shopInput = document.querySelector (`input[name=\"shop\"][value=\"\${
  2606. currentFilters.shop
  2607. }\"]`);
  2608. if (shopInput) {
  2609. shopInput.checked = true;
  2610. } else {
  2611. const allShops = document.getElementById('all-shops');
  2612. if (allShops) 
  2613. allShops.checked = true;
  2615. }
  2616. }
  2618. // Initialiser les filtres d'attributs (si déjà chargés)
  2619. ['color', 'size', 'material', 'condition'].forEach(attrType => {
  2620. if (currentFilters[attrType]) {
  2621. const attrInput = document.querySelector(`input[name=\"\${attrType}\"][value=\"\${
  2622. currentFilters[attrType]
  2623. }\"]`);
  2624. if (attrInput) {
  2625. attrInput.checked = true;
  2626. } else {
  2627. const allAttr = document.getElementById (`all-\${attrType}`);
  2628. if (allAttr) 
  2629. allAttr.checked = true;
  2631. }
  2632. }
  2633. });
  2634. }
  2636. // Initialiser les filtres
  2637. document.addEventListener('DOMContentLoaded', function () { // Initialiser les filtres depuis l'URL
  2638. initializeFiltersFromURL();
  2640. // Event listeners pour les filtres statiques
  2641. const staticFilters = ['featured', 'digital', 'availability'];
  2643. staticFilters.forEach(filterName => {
  2644. const inputs = document.querySelectorAll (`input[name=\"\${filterName}\"]`);
  2645. inputs.forEach(input => {
  2646. input.addEventListener('change', function () {
  2647. if (this.id.includes('-all')) {
  2648. currentFilters[filterName] = '';
  2649. } else {
  2650. currentFilters[filterName] = this.value;
  2651. }
  2652. currentFilters.page = 1;
  2653. applyFilters();
  2654. });
  2655. });
  2656. });
  2658. // Event listener spécial pour rating (mapping vers ratingMin)
  2659. const ratingInputs = document.querySelectorAll('input[name=\"rating\"]');
  2660. ratingInputs.forEach(input => {
  2661. input.addEventListener('change', function () {
  2662. if (this.id === 'rating-all') {
  2663. currentFilters.ratingMin = '';
  2664. currentFilters.rating = '';
  2665. } else {
  2666. currentFilters.ratingMin = this.value;
  2667. currentFilters.rating = this.value;
  2668. }
  2669. currentFilters.page = 1;
  2670. applyFilters();
  2671. });
  2672. });
  2674. // Event listeners pour les filtres de poids
  2675. const weightInputs = ['weightMin', 'weightMax'];
  2676. weightInputs.forEach(inputId => {
  2677. const input = document.getElementById(inputId);
  2678. if (input) {
  2679. input.addEventListener('change', applyWeightFilter);
  2680. input.addEventListener('input', debounce(applyWeightFilter, 500));
  2681. }
  2682. });
  2684. // Event listeners pour les filtres de prix
  2685. const priceInputs = ['priceMin', 'priceMax'];
  2686. priceInputs.forEach(inputId => {
  2687. const input = document.getElementById(inputId);
  2688. if (input) {
  2689. input.addEventListener('change', applyPriceFilter);
  2690. input.addEventListener('input', debounce(applyPriceFilter, 500));
  2691. }
  2692. });
  2694. // Ajouter les event listeners pour les marques existantes
  2695. const brandList = document.getElementById('brandList');
  2696. if (brandList) {
  2697. brandList.querySelectorAll('input[name=\"brand\"]').forEach(radio => {
  2698. radio.addEventListener('change', function () {
  2699. if (this.id === 'all-brands') {
  2700. currentFilters.brand = '';
  2701. } else {
  2702. currentFilters.brand = this.value;
  2703. }
  2704. currentFilters.page = 1;
  2705. applyFilters();
  2706. });
  2707. });
  2708. }
  2710. // Appliquer les filtres initiaux si une catégorie est sélectionnée
  2711. if (currentFilters.category) {
  2712. applyFilters();
  2713. } else { // Initialiser l'affichage du bouton au chargement de la page
  2714. updateLoadMoreButton();
  2715. }
  2716. });
  2718. // Fonction de debounce pour éviter trop de requêtes
  2719. function debounce (func, wait) {
  2720. let timeout;
  2721. return function executedFunction(...args) {
  2722. const later = () => {
  2723. clearTimeout(timeout);
  2724. func(...args);
  2725. };
  2726. clearTimeout(timeout);
  2727. timeout = setTimeout(later, wait);
  2728. };
  2729. }
  2731. // Les fonctions toggleComparison, toggleWishlist, et showNotification sont définies globalement dans base_home.html.twig
  2732. // Pas besoin de les redéfinir ici
  2734. // Fonctions pour le dropshipping
  2735. function generateDropshipLink (productId) {
  2736. showEbayPromptModal('URL originale (optionnel):', '').then(originalUrl => {
  2737. if (originalUrl === null) 
  2738. return;
  2739.  // Utilisateur a annulé
  2741. const formData = new FormData();
  2742. formData.append('originalUrl', originalUrl || '');
  2744. fetch (`/api/dropship/generate/\${productId}`, {
  2745. method: 'POST',
  2746. body: formData
  2747. }).then(response => response.json()).then(data => {
  2748. if (data.success) { // Afficher le lien généré dans une modal
  2749. showDropshipLinkModal(data.data);
  2750. } else {
  2751. showNotification(data.message || 'Erreur lors de la génération du lien', 'error');
  2752. }
  2753. }).catch(error => {
  2754. console.error('Erreur:', error);
  2755. showNotification('Erreur lors de la génération du lien', 'error');
  2756. });
  2757. });
  2758. }
  2760. function showDropshipLinkModal (linkData) {
  2761. const modal = document.createElement('div');
  2762. modal.className = 'modal fade show';
  2763. modal.style.display = 'block';
  2764. modal.innerHTML = `
  2765.         <div class=\"modal-dialog\">
  2766.             <div class=\"modal-content\">
  2767.                 <div class=\"modal-header\">
  2768.                     <h5 class=\"modal-title\">
  2769.                         <i class=\"fa fa-share-alt\"></i> Lien de dropshipping généré
  2770.                     </h5>
  2771.                     <button type=\"button\" class=\"btn-close\" onclick=\"closeModal(this)\"></button>
  2772.                 </div>
  2773.                 <div class=\"modal-body\">
  2774.                     <div class=\"mb-3\">
  2775.                         <label class=\"form-label\">Lien de dropshipping :</label>
  2776.                         <div class=\"input-group\">
  2777.                             <input type=\"text\" class=\"form-control\" value=\"\${
  2778. linkData.dropshipUrl
  2779. }\" readonly id=\"dropshipUrl\">
  2780.                             <button class=\"btn btn-outline-secondary\" onclick=\"copyToClipboard('\${
  2781. linkData.dropshipUrl
  2782. }')\">
  2783.                                 <i class=\"fa fa-copy\"></i>
  2784.                             </button>
  2785.                         </div>
  2786.                     </div>
  2787.                     <div class=\"row\">
  2788.                         <div class=\"col-md-6\">
  2789.                             <div class=\"card\">
  2790.                                 <div class=\"card-body text-center\">
  2791.                                     <h6 class=\"card-title\">Taux de commission</h6>
  2792.                                     <h4 class=\"text-primary\">\${
  2793. linkData.commissionRate
  2794. }%</h4>
  2795.                                 </div>
  2796.                             </div>
  2797.                         </div>
  2798.                         <div class=\"col-md-6\">
  2799.                             <div class=\"card\">
  2800.                                 <div class=\"card-body text-center\">
  2801.                                     <h6 class=\"card-title\">Commission par vente</h6>
  2802.                                     <h4 class=\"text-success\">\${
  2803. linkData.commissionAmount
  2804. } HTG</h4>
  2805.                                 </div>
  2806.                             </div>
  2807.                         </div>
  2808.                     </div>
  2809.                     <div class=\"alert alert-info\">
  2810.                         <i class=\"fa fa-info-circle\"></i>
  2811.                         <strong>Note :</strong> Ce lien expire le \${
  2812. new Date(linkData.expiresAt).toLocaleDateString('fr-FR')
  2813. }.
  2814.                     </div>
  2815.                 </div>
  2816.                 <div class=\"modal-footer\">
  2817.                     <button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeModal(this)\">Fermer</button>
  2818.                     <a href=\"/dropship/dashboard\" class=\"btn btn-primary\">
  2819.                         <i class=\"fa fa-tachometer\"></i> Voir le dashboard
  2820.                     </a>
  2821.                 </div>
  2822.             </div>
  2823.         </div>
  2824.     `;
  2826. document.body.appendChild(modal);
  2828. // Ajouter le backdrop
  2829. const backdrop = document.createElement('div');
  2830. backdrop.className = 'modal-backdrop fade show';
  2831. document.body.appendChild(backdrop);
  2832. }
  2834. function closeModal (button) {
  2835. const modal = button.closest('.modal');
  2836. const backdrop = document.querySelector('.modal-backdrop');
  2838. if (modal) {
  2839. modal.remove();
  2840. }
  2841. if (backdrop) {
  2842. backdrop.remove();
  2843. }
  2844. }
  2846. function copyToClipboard (text) {
  2847. navigator.clipboard.writeText(text).then(function () {
  2848. showNotification('Lien copié dans le presse-papiers !', 'success');
  2849. }, function (err) {
  2850. console.error('Erreur lors de la copie:', err);
  2851. showNotification('Erreur lors de la copie du lien', 'error');
  2852. });
  2853. }
  2855. // Fonction pour initialiser le chargement infini
  2856. function initInfiniteScroll () {
  2857. const loader = document.getElementById('infiniteScrollLoader');
  2858. const noMoreProducts = document.getElementById('noMoreProducts');
  2860. // Afficher le loader si il y a plus de produits
  2861. if (hasMoreProducts && loader) {
  2862. loader.style.display = 'block';
  2863. } else if (!hasMoreProducts && noMoreProducts) {
  2864. noMoreProducts.style.display = 'block';
  2865. }
  2867. // Observer pour détecter quand l'utilisateur arrive en bas
  2868. const observer = new IntersectionObserver((entries) => {
  2869. entries.forEach(entry => {
  2870. if (entry.isIntersecting && !isLoading && hasMoreProducts) {
  2871. loadMoreProducts();
  2872. }
  2873. });
  2874. }, {
  2875. root: null,
  2876. rootMargin: '200px', // Démarrer le chargement 200px avant d'arriver en bas
  2877. threshold: 0.1
  2878. });
  2880. // Observer le loader
  2881. if (loader) {
  2882. observer.observe(loader);
  2883. }
  2884. }
  2886. // Fonction pour mettre à jour l'affichage du bouton
  2887. function updateLoadMoreButton () {
  2888. const loadMoreContainer = document.getElementById('loadMoreContainer');
  2889. const noMoreProducts = document.getElementById('noMoreProducts');
  2891. if (hasMoreProducts) {
  2892. if (loadMoreContainer) {
  2893. loadMoreContainer.style.display = 'block';
  2894. }
  2895. if (noMoreProducts) {
  2896. noMoreProducts.style.display = 'none';
  2897. }
  2898. } else {
  2899. if (loadMoreContainer) {
  2900. loadMoreContainer.style.display = 'none';
  2901. }
  2902. if (noMoreProducts) {
  2903. noMoreProducts.style.display = 'block';
  2904. }
  2905. }
  2906. }
  2908. // Fonction pour initialiser les images des nouveaux produits
  2909. function initializeProductImages (container) {
  2910. const productCards = container.querySelectorAll('.single-product');
  2911. productCards.forEach(card => {
  2912. const productId = card.querySelector('.add-to-cart') ?. getAttribute('data-product-id');
  2913. if (productId) { // Récupérer les images depuis les attributs data ou depuis le DOM
  2914. const imgElement = card.querySelector('.main-product-img');
  2915. if (imgElement && imgElement.dataset.images) {
  2916. const images = JSON.parse(imgElement.dataset.images);
  2917. productImages[productId] = images;
  2918. currentImageIndex[productId] = 0;
  2919. }
  2920. }
  2921. });
  2922. }
  2924. // Fonction pour initialiser les event listeners des nouveaux produits
  2925. function initializeProductEventListeners (container) { // Boutons d'ajout au panier
  2926. const cartButtons = container.querySelectorAll('.add-to-cart');
  2927. cartButtons.forEach(button => {
  2928. button.addEventListener('click', function () {
  2929. const productId = this.getAttribute('data-product-id');
  2930. const qty = this.getAttribute('data-qty');
  2932. fetch('";
  2933.         // line 2206
  2934.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_add");
  2935.         yield "', {
  2936. method: 'POST',
  2937. headers: {
  2938. 'Content-Type': 'application/x-www-form-urlencoded'
  2939. },
  2940. body: 'productId=' + productId + '&qty=' + qty
  2941. }).then(response => response.json()).then(data => {
  2942. if (data.ok) {
  2943. showEbayModal('Produit ajouté au panier !', 'success');
  2944. const cartBadge = document.querySelector('.cart-badge');
  2945. if (cartBadge) {
  2946. cartBadge.textContent = data.totalQty;
  2947. }
  2948. } else {
  2949. showEbayModal(data.message || 'Erreur lors de l\\'ajout au panier', 'error');
  2950. }
  2951. }).catch(error => {
  2952. console.error('Erreur:', error);
  2953. showEbayModal('Erreur lors de l\\'ajout au panier', 'error');
  2954. });
  2955. });
  2956. });
  2957. }
  2959. // La fonction showEbayModal est déjà définie plus haut
  2961. // Modal style eBay pour remplacer prompt()
  2962. function showEbayPromptModal (message, defaultValue = '') {
  2963. return new Promise((resolve) => {
  2964. const modalId = 'ebayPromptModal';
  2965. let existingModal = document.getElementById(modalId);
  2966. if (existingModal) {
  2967. existingModal.remove();
  2968. }
  2970. const modal = document.createElement('div');
  2971. modal.id = modalId;
  2972. modal.className = 'modal fade';
  2973. modal.setAttribute('tabindex', '-1');
  2974. modal.setAttribute('aria-labelledby', 'ebayPromptModalLabel');
  2975. modal.setAttribute('aria-hidden', 'true');
  2977. modal.innerHTML = `
  2978. <div class=\"modal-dialog modal-dialog-centered\">
  2979. <div class=\"modal-content\" style=\"border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);\">
  2980. <div class=\"modal-header\" style=\"border-bottom: 1px solid #e0e0e0; padding: 20px 24px;\">
  2981. <h5 class=\"modal-title\" id=\"ebayPromptModalLabel\" style=\"font-weight: 600; font-size: 18px; color: #333;\">
  2982. <i class=\"ti-pencil-alt\" style=\"color: #0064D2; margin-right: 8px;\"></i>Saisie
  2983. </h5>
  2984. <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" style=\"margin: 0;\"></button>
  2985. </div>
  2986. <div class=\"modal-body\" style=\"padding: 24px;\">
  2987. <p style=\"margin-bottom: 16px; font-size: 16px; color: #333;\">\${message}</p>
  2988. <input type=\"text\" class=\"form-control\" id=\"ebayPromptInput\" value=\"\${defaultValue}\" style=\"border-radius: 4px; border: 1px solid #ccc; padding: 10px; font-size: 14px;\" autofocus>
  2989. </div>
  2990. <div class=\"modal-footer\" style=\"border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: flex-end;\">
  2991. <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" style=\"min-width: 80px; border-radius: 4px; font-weight: 500; margin-right: 8px;\">
  2992. Annuler
  2993. </button>
  2994. <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;\">
  2995. OK
  2996. </button>
  2997. </div>
  2998. </div>
  2999. </div>
  3000. `;
  3002. document.body.appendChild(modal);
  3003. const bsModal = new bootstrap.Modal(modal);
  3004. const input = modal.querySelector('#ebayPromptInput');
  3005. const confirmBtn = modal.querySelector('#ebayPromptConfirm');
  3007. // Gérer la confirmation
  3008. confirmBtn.addEventListener('click', function () {
  3009. const value = input.value;
  3010. bsModal.hide();
  3011. resolve(value);
  3012. });
  3014. // Gérer l'annulation
  3015. modal.addEventListener('hidden.bs.modal', function () {
  3016. if (input.value === undefined || input.value === '') {
  3017. resolve(null);
  3018. }
  3019. modal.remove();
  3020. });
  3022. // Gérer la touche Entrée
  3023. input.addEventListener('keypress', function (e) {
  3024. if (e.key === 'Enter') {
  3025. confirmBtn.click();
  3026. }
  3027. });
  3029. bsModal.show();
  3030. input.focus();
  3031. input.select();
  3032. });
  3033. }
  3035. // Remplacer window.alert et window.prompt
  3036. window.alert = showEbayModal;
  3037. window.prompt = showEbayPromptModal;
  3039. </script>
  3041. <script>
  3042. \t// Gestion du toggle de la sidebar sur mobile
  3043. document.addEventListener('DOMContentLoaded', function () {
  3044. const sidebarToggle = document.querySelector('.listing-sidebar-toggle');
  3045. const sidebarCollapse = document.getElementById('listingSidebarCollapse');
  3047. if (sidebarToggle && sidebarCollapse) { // Bootstrap 5 utilise des événements natifs
  3048. sidebarCollapse.addEventListener('show.bs.collapse', function () {
  3049. sidebarToggle.classList.remove('collapsed');
  3050. sidebarToggle.setAttribute('aria-expanded', 'true');
  3051. });
  3053. sidebarCollapse.addEventListener('hide.bs.collapse', function () {
  3054. sidebarToggle.classList.add('collapsed');
  3055. sidebarToggle.setAttribute('aria-expanded', 'false');
  3056. });
  3058. sidebarCollapse.addEventListener('shown.bs.collapse', function () {
  3059. sidebarToggle.classList.remove('collapsed');
  3060. });
  3062. sidebarCollapse.addEventListener('hidden.bs.collapse', function () {
  3063. sidebarToggle.classList.add('collapsed');
  3064. });
  3066. // Vérifier l'état initial
  3067. if (sidebarCollapse.classList.contains('show')) {
  3068. sidebarToggle.classList.remove('collapsed');
  3069. sidebarToggle.setAttribute('aria-expanded', 'true');
  3070. } else {
  3071. sidebarToggle.classList.add('collapsed');
  3072. sidebarToggle.setAttribute('aria-expanded', 'false');
  3073. }
  3074. }
  3075. });
  3077. // Synchroniser la recherche avec la barre de recherche du header
  3078. const headerSearchInput = document.getElementById('search_input');
  3079. if (headerSearchInput && typeof currentFilters !== 'undefined') { // Mettre à jour la valeur de la barre de recherche du header
  3080. headerSearchInput.value = currentFilters.q || '';
  3082. // Afficher le bouton clear si nécessaire
  3083. const clearSearchBtn = document.getElementById('clear_search_btn');
  3084. if (clearSearchBtn) {
  3085. clearSearchBtn.style.display = currentFilters.q ? 'block' : 'none';
  3086. }
  3087. }
  3089. // Réinitialiser tous les filtres
  3090. const resetFiltersBtn = document.getElementById('resetFiltersBtn');
  3091. if (resetFiltersBtn) {
  3092. resetFiltersBtn.addEventListener('click', function () {
  3093. resetAllFilters();
  3094. });
  3095. }
  3097. // Fonction pour réinitialiser tous les filtres
  3098. function resetAllFilters () {
  3099. currentFilters = {
  3100. category: '',
  3101. brand: '',
  3102. sort: 'newest',
  3103. priceMin: '',
  3104. priceMax: '',
  3105. page: 1,
  3106. q: '',
  3107. shop: '',
  3108. featured: '',
  3109. digital: '',
  3110. stockStatus: '',
  3111. ratingMin: '',
  3112. rating: '',
  3113. weightMin: '',
  3114. weightMax: '',
  3115. color: '',
  3116. size: '',
  3117. material: '',
  3118. condition: '',
  3119. availability: ''
  3120. };
  3122. // Réinitialiser la barre de recherche du header
  3123. const headerSearchInput = document.getElementById('search_input');
  3124. if (headerSearchInput) {
  3125. headerSearchInput.value = '';
  3126. }
  3127. const clearSearchBtn = document.getElementById('clear_search_btn');
  3128. if (clearSearchBtn) {
  3129. clearSearchBtn.style.display = 'none';
  3130. }
  3132. // Réinitialiser les inputs
  3133. document.getElementById('sortSelect').value = 'newest';
  3135. // Réinitialiser les radios
  3136. document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {
  3137. 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')) {
  3138. radio.checked = true;
  3139. } else {
  3140. radio.checked = false;
  3141. }
  3142. });
  3144. // Réinitialiser les inputs de prix et poids
  3145. const weightMinInput = document.getElementById('weightMin');
  3146. const weightMaxInput = document.getElementById('weightMax');
  3148. if (weightMinInput) 
  3149. weightMinInput.value = '';
  3151. if (weightMaxInput) 
  3152. weightMaxInput.value = '';
  3155. applyFilters();
  3156. updateActiveFilters();
  3157. }
  3159. // Fonction pour mettre à jour l'affichage des filtres actifs
  3160. function updateActiveFilters () {
  3161. const activeFiltersDiv = document.getElementById('activeFilters');
  3162. const activeFiltersList = document.getElementById('activeFiltersList');
  3163. const filters = [];
  3165. if (currentFilters.q) {
  3166. filters.push (`<span class=\"badge bg-primary\">Recherche: \"\${
  3167. currentFilters.q
  3168. }\"</span>`);
  3169. }
  3170. if (currentFilters.category) {
  3171. filters.push(`<span class=\"badge bg-secondary\">Catégorie</span>`);
  3172. }
  3173. if (currentFilters.brand) {
  3174. filters.push(`<span class=\"badge bg-secondary\">Marque</span>`);
  3175. }
  3176. if (currentFilters.priceMin || currentFilters.priceMax) {
  3177. filters.push(`<span class=\"badge bg-info\">Prix</span>`);
  3178. }
  3179. if (currentFilters.featured === 'true') {
  3180. filters.push(`<span class=\"badge bg-warning\">Produits vedettes</span>`);
  3181. }
  3182. if (currentFilters.digital === 'true') {
  3183. filters.push(`<span class=\"badge bg-success\">Numériques</span>`);
  3184. }
  3185. if (currentFilters.digital === 'false') {
  3186. filters.push(`<span class=\"badge bg-success\">Physiques</span>`);
  3187. }
  3188. if (currentFilters.availability) {
  3189. filters.push(`<span class=\"badge bg-info\">Disponibilité</span>`);
  3190. }
  3191. if (currentFilters.ratingMin || currentFilters.rating) {
  3192. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  3193. filters.push (`<span class=\"badge bg-warning\">Note ≥ \${ratingValue}</span>`);
  3194. }
  3195. if (currentFilters.weightMin || currentFilters.weightMax) {
  3196. filters.push(`<span class=\"badge bg-secondary\">Poids</span>`);
  3197. }
  3199. if (filters.length > 0) {
  3200. activeFiltersList.innerHTML = filters.join(' ');
  3201. activeFiltersDiv.style.display = 'block';
  3202. } else {
  3203. activeFiltersDiv.style.display = 'none';
  3204. }
  3205. }
  3207. // Mettre à jour les filtres actifs au chargement et après chaque filtrage
  3208. document.addEventListener('DOMContentLoaded', function () {
  3209. updateActiveFilters();
  3210. });
  3212. // Mettre à jour les filtres actifs après chaque application de filtres
  3213. const originalApplyFilters = applyFilters;
  3214. applyFilters = function () {
  3215. originalApplyFilters();
  3216. setTimeout(updateActiveFilters, 100);
  3217. // Mettre à jour le compteur de filtres actifs
  3218. updateActiveFiltersCount();
  3219. };
  3221. // S'assurer que applyFilters est accessible globalement
  3222. window.applyFilters = applyFilters;
  3224. // Fonction pour mettre à jour le compteur de filtres actifs
  3225. function updateActiveFiltersCount () {
  3226. const count = Object.keys(currentFilters).filter(key => {
  3227. const value = currentFilters[key];
  3228. return value && value !== '' && key !== 'page' && key !== 'sort';
  3229. }).length;
  3231. const badge = document.getElementById('activeFiltersCount');
  3232. if (badge) {
  3233. if (count > 0) {
  3234. badge.textContent = count;
  3235. badge.style.display = 'inline-block';
  3236. } else {
  3237. badge.style.display = 'none';
  3238. }
  3239. }
  3240. }
  3242. // Initialiser le compteur au chargement
  3243. document.addEventListener('DOMContentLoaded', function () {
  3244. updateActiveFiltersCount();
  3245. });
  3246. </script>
  3248. <!-- Modal de filtres -->
  3249. <div class=\"modal fade\" id=\"filtersModal\" tabindex=\"-1\" aria-labelledby=\"filtersModalLabel\" aria-hidden=\"true\">
  3250. \t<div class=\"modal-dialog modal-lg\">
  3251. \t\t<div class=\"modal-content\" style=\"display: flex; flex-direction: column; max-height: 90vh;\">
  3252. \t\t\t<div class=\"modal-header\" style=\"flex-shrink: 0;\">
  3253. \t\t\t\t<h5 class=\"modal-title\" id=\"filtersModalLabel\">
  3254. \t\t\t\t\t<i class=\"lnr lnr-filter me-2\"></i>Filtres de recherche
  3255. \t\t\t\t</h5>
  3256. \t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  3257. \t\t\t</div>
  3258. \t\t\t<div class=\"modal-body\" style=\"overflow-y: auto; flex: 1; min-height: 0;\">
  3259. \t\t\t\t<div
  3260. \t\t\t\t\tclass=\"row\">
  3261. \t\t\t\t\t<!-- Colonne gauche -->
  3262. \t\t\t\t\t<div
  3263. \t\t\t\t\t\tclass=\"col-md-6\">
  3264. \t\t\t\t\t\t<!-- Marques -->
  3265. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3266. \t\t\t\t\t\t\t<div class=\"head\">Marques</div>
  3267. \t\t\t\t\t\t\t<ul class=\"brand-list\" id=\"modalBrandList\">
  3268. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3269. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-all-brands\" name=\"modal-brand\" checked>
  3270. \t\t\t\t\t\t\t\t\t<label for=\"modal-all-brands\">Toutes les marques</label>
  3271. \t\t\t\t\t\t\t\t</li>
  3272. \t\t\t\t\t\t\t\t";
  3273.         // line 2543
  3274.         $context['_parent'] = $context;
  3275.         $context['_seq'] = CoreExtension::ensureTraversable(($context["brands"] ?? null));
  3276.         foreach ($context['_seq'] as $context["_key"] => $context["brand"]) {
  3277.             // line 2544
  3278.             yield "\t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3279. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-brand-";
  3280.             // line 2545
  3281.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "id", [], "any", false, false, false, 2545), "html", null, true);
  3282.             yield "\" name=\"modal-brand\" value=\"";
  3283.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "slug", [], "any", false, false, false, 2545), "html", null, true);
  3284.             yield "\">
  3285. \t\t\t\t\t\t\t\t\t\t<label for=\"modal-brand-";
  3286.             // line 2546
  3287.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "id", [], "any", false, false, false, 2546), "html", null, true);
  3288.             yield "\">";
  3289.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "name", [], "any", false, false, false, 2546), "html", null, true);
  3290.             yield "<span>(";
  3291.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["brand"], "getActiveProductsCount", [], "method", false, false, false, 2546), "html", null, true);
  3292.             yield ")</span>
  3293. \t\t\t\t\t\t\t\t\t\t</label>
  3294. \t\t\t\t\t\t\t\t\t</li>
  3295. \t\t\t\t\t\t\t\t";
  3296.         }
  3297.         $_parent = $context['_parent'];
  3298.         unset($context['_seq'], $context['_key'], $context['brand'], $context['_parent']);
  3299.         $context = array_intersect_key($context, $_parent) + $_parent;
  3300.         // line 2550
  3301.         yield "\t\t\t\t\t\t\t</ul>
  3302. \t\t\t\t\t\t</div>
  3304. \t\t\t\t\t\t<!-- Conditions -->
  3305. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3306. \t\t\t\t\t\t\t<div class=\"head\">Condition</div>
  3307. \t\t\t\t\t\t\t<ul class=\"condition-list\" id=\"modalConditionList\">
  3308. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3309. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-all-conditions\" name=\"modal-condition\" checked>
  3310. \t\t\t\t\t\t\t\t\t<label for=\"modal-all-conditions\">Toutes les conditions</label>
  3311. \t\t\t\t\t\t\t\t</li>
  3312. \t\t\t\t\t\t\t\t";
  3313.         // line 2561
  3314.         $context['_parent'] = $context;
  3315.         $context['_seq'] = CoreExtension::ensureTraversable(($context["conditions"] ?? null));
  3316.         foreach ($context['_seq'] as $context["_key"] => $context["condition"]) {
  3317.             // line 2562
  3318.             yield "\t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3319. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-condition-";
  3320.             // line 2563
  3321.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "id", [], "any", false, false, false, 2563), "html", null, true);
  3322.             yield "\" name=\"modal-condition\" value=\"";
  3323.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "slug", [], "any", false, false, false, 2563), "html", null, true);
  3324.             yield "\">
  3325. \t\t\t\t\t\t\t\t\t\t<label for=\"modal-condition-";
  3326.             // line 2564
  3327.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "id", [], "any", false, false, false, 2564), "html", null, true);
  3328.             yield "\">";
  3329.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "name", [], "any", false, false, false, 2564), "html", null, true);
  3330.             yield "<span>(";
  3331.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["condition"], "getActiveProductsCount", [], "method", false, false, false, 2564), "html", null, true);
  3332.             yield ")</span>
  3333. \t\t\t\t\t\t\t\t\t\t</label>
  3334. \t\t\t\t\t\t\t\t\t</li>
  3335. \t\t\t\t\t\t\t\t";
  3336.         }
  3337.         $_parent = $context['_parent'];
  3338.         unset($context['_seq'], $context['_key'], $context['condition'], $context['_parent']);
  3339.         $context = array_intersect_key($context, $_parent) + $_parent;
  3340.         // line 2568
  3341.         yield "\t\t\t\t\t\t\t</ul>
  3342. \t\t\t\t\t\t</div>
  3344. \t\t\t\t\t\t<!-- Boutiques -->
  3345. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3346. \t\t\t\t\t\t\t<div class=\"head\">Boutiques</div>
  3347. \t\t\t\t\t\t\t<div id=\"modalShopsFilter\">
  3348. \t\t\t\t\t\t\t\t<ul
  3349. \t\t\t\t\t\t\t\t\tclass=\"shop-list\" id=\"modalShopList\"><!-- Les boutiques seront chargées dynamiquement -->
  3350. \t\t\t\t\t\t\t\t</ul>
  3351. \t\t\t\t\t\t\t</div>
  3352. \t\t\t\t\t\t</div>
  3354. \t\t\t\t\t\t<!-- Produits vedettes -->
  3355. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3356. \t\t\t\t\t\t\t<div class=\"head\">Produits vedettes</div>
  3357. \t\t\t\t\t\t\t<ul>
  3358. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3359. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-featured-all\" name=\"modal-featured\" checked>
  3360. \t\t\t\t\t\t\t\t\t<label for=\"modal-featured-all\">Tous les produits</label>
  3361. \t\t\t\t\t\t\t\t</li>
  3362. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3363. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-featured-only\" name=\"modal-featured\" value=\"true\">
  3364. \t\t\t\t\t\t\t\t\t<label for=\"modal-featured-only\">Produits vedettes uniquement</label>
  3365. \t\t\t\t\t\t\t\t</li>
  3366. \t\t\t\t\t\t\t</ul>
  3367. \t\t\t\t\t\t</div>
  3369. \t\t\t\t\t\t<!-- Type de produit -->
  3370. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3371. \t\t\t\t\t\t\t<div class=\"head\">Type de produit</div>
  3372. \t\t\t\t\t\t\t<ul>
  3373. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3374. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-all\" name=\"modal-digital\" checked>
  3375. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-all\">Tous les types</label>
  3376. \t\t\t\t\t\t\t\t</li>
  3377. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3378. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-physical\" name=\"modal-digital\" value=\"false\">
  3379. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-physical\">Produits physiques</label>
  3380. \t\t\t\t\t\t\t\t</li>
  3381. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3382. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-digital\" name=\"modal-digital\" value=\"true\">
  3383. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-digital\">Produits numériques</label>
  3384. \t\t\t\t\t\t\t\t</li>
  3385. \t\t\t\t\t\t\t</ul>
  3386. \t\t\t\t\t\t</div>
  3387. \t\t\t\t\t</div>
  3389. \t\t\t\t\t<!-- Colonne droite -->
  3390. \t\t\t\t\t<div
  3391. \t\t\t\t\t\tclass=\"col-md-6\">
  3392. \t\t\t\t\t\t<!-- Disponibilité -->
  3393. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3394. \t\t\t\t\t\t\t<div class=\"head\">Disponibilité</div>
  3395. \t\t\t\t\t\t\t<ul>
  3396. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3397. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-all\" name=\"modal-availability\" checked>
  3398. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-all\">Tous</label>
  3399. \t\t\t\t\t\t\t\t</li>
  3400. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3401. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-in-stock\" name=\"modal-availability\" value=\"in_stock\">
  3402. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-in-stock\">En stock</label>
  3403. \t\t\t\t\t\t\t\t</li>
  3404. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3405. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-low-stock\" name=\"modal-availability\" value=\"low_stock\">
  3406. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-low-stock\">Stock faible</label>
  3407. \t\t\t\t\t\t\t\t</li>
  3408. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3409. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-out-of-stock\" name=\"modal-availability\" value=\"out_of_stock\">
  3410. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-out-of-stock\">Rupture de stock</label>
  3411. \t\t\t\t\t\t\t\t</li>
  3412. \t\t\t\t\t\t\t</ul>
  3413. \t\t\t\t\t\t</div>
  3415. \t\t\t\t\t\t<!-- Note minimale -->
  3416. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3417. \t\t\t\t\t\t\t<div class=\"head\">Note minimale</div>
  3418. \t\t\t\t\t\t\t<ul>
  3419. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3420. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-all\" name=\"modal-rating\" checked>
  3421. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-all\">Toutes les notes</label>
  3422. \t\t\t\t\t\t\t\t</li>
  3423. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3424. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-4\" name=\"modal-rating\" value=\"4\">
  3425. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-4\">4 étoiles et plus</label>
  3426. \t\t\t\t\t\t\t\t</li>
  3427. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3428. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-3\" name=\"modal-rating\" value=\"3\">
  3429. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-3\">3 étoiles et plus</label>
  3430. \t\t\t\t\t\t\t\t</li>
  3431. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  3432. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-2\" name=\"modal-rating\" value=\"2\">
  3433. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-2\">2 étoiles et plus</label>
  3434. \t\t\t\t\t\t\t\t</li>
  3435. \t\t\t\t\t\t\t</ul>
  3436. \t\t\t\t\t\t</div>
  3438. \t\t\t\t\t\t<!-- Prix -->
  3439. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3440. \t\t\t\t\t\t\t<div class=\"head\">Prix (HTG)</div>
  3441. \t\t\t\t\t\t\t<div class=\"price-range-area\">
  3442. \t\t\t\t\t\t\t\t<div class=\"d-flex gap-3\">
  3443. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  3444. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Min</label>
  3445. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-priceMin\" placeholder=\"0\" min=\"0\" step=\"0.01\">
  3446. \t\t\t\t\t\t\t\t\t</div>
  3447. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  3448. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Max</label>
  3449. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-priceMax\" placeholder=\"999999\" min=\"0\" step=\"0.01\">
  3450. \t\t\t\t\t\t\t\t\t</div>
  3451. \t\t\t\t\t\t\t\t</div>
  3452. \t\t\t\t\t\t\t</div>
  3453. \t\t\t\t\t\t</div>
  3455. \t\t\t\t\t\t<!-- Poids -->
  3456. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3457. \t\t\t\t\t\t\t<div class=\"head\">Poids (kg)</div>
  3458. \t\t\t\t\t\t\t<div class=\"weight-range-area\">
  3459. \t\t\t\t\t\t\t\t<div class=\"d-flex gap-3\">
  3460. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  3461. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Min</label>
  3462. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-weightMin\" placeholder=\"0\" step=\"0.1\" min=\"0\">
  3463. \t\t\t\t\t\t\t\t\t</div>
  3464. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  3465. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Max</label>
  3466. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-weightMax\" placeholder=\"100\" step=\"0.1\" min=\"0\">
  3467. \t\t\t\t\t\t\t\t\t</div>
  3468. \t\t\t\t\t\t\t\t</div>
  3469. \t\t\t\t\t\t\t</div>
  3470. \t\t\t\t\t\t</div>
  3472. \t\t\t\t\t\t<!-- Couleur -->
  3473. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3474. \t\t\t\t\t\t\t<div class=\"head\">Couleur</div>
  3475. \t\t\t\t\t\t\t<div id=\"modalColorsFilter\">
  3476. \t\t\t\t\t\t\t\t<ul
  3477. \t\t\t\t\t\t\t\t\tclass=\"color-list\" id=\"modalColorList\"><!-- Les couleurs seront chargées dynamiquement -->
  3478. \t\t\t\t\t\t\t\t</ul>
  3479. \t\t\t\t\t\t\t</div>
  3480. \t\t\t\t\t\t</div>
  3482. \t\t\t\t\t\t<!-- Taille -->
  3483. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3484. \t\t\t\t\t\t\t<div class=\"head\">Taille</div>
  3485. \t\t\t\t\t\t\t<div id=\"modalSizesFilter\">
  3486. \t\t\t\t\t\t\t\t<ul
  3487. \t\t\t\t\t\t\t\t\tclass=\"size-list\" id=\"modalSizeList\"><!-- Les tailles seront chargées dynamiquement -->
  3488. \t\t\t\t\t\t\t\t</ul>
  3489. \t\t\t\t\t\t\t</div>
  3490. \t\t\t\t\t\t</div>
  3492. \t\t\t\t\t\t<!-- Matériau -->
  3493. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  3494. \t\t\t\t\t\t\t<div class=\"head\">Matériau</div>
  3495. \t\t\t\t\t\t\t<div id=\"modalMaterialsFilter\">
  3496. \t\t\t\t\t\t\t\t<ul
  3497. \t\t\t\t\t\t\t\t\tclass=\"material-list\" id=\"modalMaterialList\"><!-- Les matériaux seront chargés dynamiquement -->
  3498. \t\t\t\t\t\t\t\t</ul>
  3499. \t\t\t\t\t\t\t</div>
  3500. \t\t\t\t\t\t</div>
  3501. \t\t\t\t\t</div>
  3502. \t\t\t\t</div>
  3503. \t\t\t</div>
  3504. \t\t\t<div class=\"modal-footer\" style=\"flex-shrink: 0; border-top: 1px solid #dee2e6; padding: 1rem 1.5rem; background: #f8f9fa;\">
  3505. \t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">
  3506. \t\t\t\t\t<i class=\"lnr lnr-cross-circle me-1\"></i>Annuler
  3507. \t\t\t\t</button>
  3508. \t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\" id=\"modalResetFiltersBtn\">
  3509. \t\t\t\t\t<i class=\"lnr lnr-refresh me-1\"></i>Réinitialiser
  3510. \t\t\t\t</button>
  3511. \t\t\t\t<button type=\"button\" class=\"btn btn-primary\" id=\"modalApplyFiltersBtn\">
  3512. \t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i>Appliquer les filtres
  3513. \t\t\t\t</button>
  3514. \t\t\t</div>
  3515. \t\t</div>
  3516. \t</div>
  3517. </div>
  3519. <script>
  3520. \t// Synchroniser les filtres du modal avec currentFilters au chargement
  3521. document.addEventListener('DOMContentLoaded', function () {
  3522. console.log('[Modal] Initializing filter modal...');
  3524. // Fonction pour synchroniser les valeurs du modal avec currentFilters
  3525. function syncModalFilters() {
  3526. console.log('[Modal] Syncing filters with currentFilters:', currentFilters);
  3528. // Réinitialiser tous les radios \"Tous\" d'abord
  3529. document.querySelectorAll('#filtersModal input[type=\"radio\"][id*=\"-all\"]').forEach(radio => {
  3530. radio.checked = true;
  3531. });
  3533. // Marques
  3534. if (currentFilters.brand) {
  3535. const brandRadio = document.querySelector (`#modalBrandList input[value=\"\${
  3536. currentFilters.brand
  3537. }\"]`);
  3538. if (brandRadio) {
  3539. brandRadio.checked = true;
  3540. console.log('[Modal] Brand synced:', currentFilters.brand);
  3541. }
  3542. } else {
  3543. const allBrands = document.getElementById('modal-all-brands');
  3544. if (allBrands) 
  3545. allBrands.checked = true;
  3547. }
  3549. // Conditions
  3550. if (currentFilters.condition) {
  3551. const conditionRadio = document.querySelector (`#modalConditionList input[value=\"\${
  3552. currentFilters.condition
  3553. }\"]`);
  3554. if (conditionRadio) {
  3555. conditionRadio.checked = true;
  3556. console.log('[Modal] Condition synced:', currentFilters.condition);
  3557. }
  3558. } else {
  3559. const allConditions = document.getElementById('modal-all-conditions');
  3560. if (allConditions) 
  3561. allConditions.checked = true;
  3563. }
  3565. // Featured
  3566. if (currentFilters.featured === 'true') {
  3567. const featuredRadio = document.getElementById('modal-featured-only');
  3568. if (featuredRadio) {
  3569. featuredRadio.checked = true;
  3570. console.log('[Modal] Featured synced');
  3571. }
  3572. } else {
  3573. const allFeatured = document.getElementById('modal-featured-all');
  3574. if (allFeatured) 
  3575. allFeatured.checked = true;
  3577. }
  3579. // Digital
  3580. if (currentFilters.digital === 'true') {
  3581. const digitalRadio = document.getElementById('modal-digital-digital');
  3582. if (digitalRadio) 
  3583. digitalRadio.checked = true;
  3585. } else if (currentFilters.digital === 'false') {
  3586. const physicalRadio = document.getElementById('modal-digital-physical');
  3587. if (physicalRadio) 
  3588. physicalRadio.checked = true;
  3590. } else {
  3591. const allDigital = document.getElementById('modal-digital-all');
  3592. if (allDigital) 
  3593. allDigital.checked = true;
  3595. }
  3597. // Availability
  3598. if (currentFilters.availability) {
  3599. const availabilityId = `modal-availability-\${
  3600. currentFilters.availability.replace('_', '-')
  3601. }`;
  3602. const availabilityRadio = document.getElementById(availabilityId);
  3603. if (availabilityRadio) {
  3604. availabilityRadio.checked = true;
  3605. console.log('[Modal] Availability synced:', currentFilters.availability);
  3606. }
  3607. } else {
  3608. const allAvailability = document.getElementById('modal-availability-all');
  3609. if (allAvailability) 
  3610. allAvailability.checked = true;
  3612. }
  3614. // Rating
  3615. if (currentFilters.ratingMin || currentFilters.rating) {
  3616. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  3617. const ratingRadio = document.getElementById (`modal-rating-\${ratingValue}`);
  3618. if (ratingRadio) {
  3619. ratingRadio.checked = true;
  3620. console.log('[Modal] Rating synced:', ratingValue);
  3621. }
  3622. } else {
  3623. const allRating = document.getElementById('modal-rating-all');
  3624. if (allRating) 
  3625. allRating.checked = true;
  3627. }
  3629. // Prix
  3630. const priceMinInput = document.getElementById('modal-priceMin');
  3631. const priceMaxInput = document.getElementById('modal-priceMax');
  3632. if (priceMinInput) 
  3633. priceMinInput.value = currentFilters.priceMin || '';
  3635. if (priceMaxInput) 
  3636. priceMaxInput.value = currentFilters.priceMax || '';
  3639. // Poids
  3640. const weightMinInput = document.getElementById('modal-weightMin');
  3641. const weightMaxInput = document.getElementById('modal-weightMax');
  3642. if (weightMinInput) 
  3643. weightMinInput.value = currentFilters.weightMin || '';
  3645. if (weightMaxInput) 
  3646. weightMaxInput.value = currentFilters.weightMax || '';
  3649. console.log('[Modal] Filters synced successfully');
  3650. }
  3652. // Fonction pour charger les filtres dynamiques dans le modal
  3653. function loadDynamicFiltersToModal() {
  3654. console.log('[Modal] Loading dynamic filters...');
  3656. // Boutiques
  3657. const sidebarShopList = document.getElementById('shopList');
  3658. const modalShopList = document.getElementById('modalShopList');
  3659. if (modalShopList) { // Si la sidebar a déjà les boutiques, les copier
  3660. if (sidebarShopList && sidebarShopList.innerHTML.trim() && ! sidebarShopList.innerHTML.includes('Aucune boutique') && ! sidebarShopList.innerHTML.includes('seront chargées')) {
  3661. 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-');
  3662. modalShopList.innerHTML = shopHtml;
  3664. // Synchroniser la sélection
  3665. if (currentFilters.shop) {
  3666. const shopRadio = document.querySelector (`#modalShopList input[value=\"\${
  3667. currentFilters.shop
  3668. }\"]`);
  3669. if (shopRadio) 
  3670. shopRadio.checked = true;
  3672. } else {
  3673. const allShops = document.getElementById('modal-all-shops');
  3674. if (allShops) 
  3675. allShops.checked = true;
  3677. }
  3678. console.log('[Modal] Shops loaded from sidebar');
  3679. } else { // Si pas encore chargés, afficher un message ou laisser vide
  3680. if (! modalShopList.innerHTML.trim() || modalShopList.innerHTML.includes('seront chargées')) {
  3681. modalShopList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Les boutiques seront chargées lors de l\\'application des filtres</span></li>';
  3682. }
  3683. }
  3684. }
  3686. // Couleurs
  3687. const sidebarColorList = document.getElementById('colorList');
  3688. const modalColorList = document.getElementById('modalColorList');
  3689. if (sidebarColorList && modalColorList) {
  3690. if (sidebarColorList.innerHTML.trim() && ! sidebarColorList.innerHTML.includes('Aucun')) {
  3691. 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-');
  3692. modalColorList.innerHTML = colorHtml;
  3694. // Synchroniser la sélection
  3695. if (currentFilters.color) {
  3696. const colorRadio = document.querySelector (`#modalColorList input[value=\"\${
  3697. currentFilters.color
  3698. }\"]`);
  3699. if (colorRadio) 
  3700. colorRadio.checked = true;
  3702. } else {
  3703. const allColor = document.getElementById('modal-all-color');
  3704. if (allColor) 
  3705. allColor.checked = true;
  3707. }
  3708. console.log('[Modal] Colors loaded');
  3709. }
  3710. }
  3712. // Tailles
  3713. const sidebarSizeList = document.getElementById('sizeList');
  3714. const modalSizeList = document.getElementById('modalSizeList');
  3715. if (sidebarSizeList && modalSizeList) {
  3716. if (sidebarSizeList.innerHTML.trim() && ! sidebarSizeList.innerHTML.includes('Aucun')) {
  3717. 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-');
  3718. modalSizeList.innerHTML = sizeHtml;
  3720. // Synchroniser la sélection
  3721. if (currentFilters.size) {
  3722. const sizeRadio = document.querySelector (`#modalSizeList input[value=\"\${
  3723. currentFilters.size
  3724. }\"]`);
  3725. if (sizeRadio) 
  3726. sizeRadio.checked = true;
  3728. } else {
  3729. const allSize = document.getElementById('modal-all-size');
  3730. if (allSize) 
  3731. allSize.checked = true;
  3733. }
  3734. console.log('[Modal] Sizes loaded');
  3735. }
  3736. }
  3738. // Matériaux
  3739. const sidebarMaterialList = document.getElementById('materialList');
  3740. const modalMaterialList = document.getElementById('modalMaterialList');
  3741. if (sidebarMaterialList && modalMaterialList) {
  3742. if (sidebarMaterialList.innerHTML.trim() && ! sidebarMaterialList.innerHTML.includes('Aucun')) {
  3743. 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-');
  3744. modalMaterialList.innerHTML = materialHtml;
  3746. // Synchroniser la sélection
  3747. if (currentFilters.material) {
  3748. const materialRadio = document.querySelector (`#modalMaterialList input[value=\"\${
  3749. currentFilters.material
  3750. }\"]`);
  3751. if (materialRadio) 
  3752. materialRadio.checked = true;
  3754. } else {
  3755. const allMaterial = document.getElementById('modal-all-material');
  3756. if (allMaterial) 
  3757. allMaterial.checked = true;
  3759. }
  3760. console.log('[Modal] Materials loaded');
  3761. }
  3762. }
  3763. }
  3765. // Synchroniser à l'ouverture du modal
  3766. const filtersModal = document.getElementById('filtersModal');
  3767. if (filtersModal) {
  3768. filtersModal.addEventListener('show.bs.modal', function () {
  3769. console.log('[Modal] Modal opening, syncing filters...');
  3771. // Charger les filtres dynamiques d'abord si pas encore chargés
  3772. loadDynamicFiltersToModal();
  3774. // Puis synchroniser les valeurs
  3775. setTimeout(() => {
  3776. syncModalFilters();
  3777. }, 100);
  3778. });
  3779. }
  3781. // Charger les filtres dynamiques au chargement initial si la sidebar les a déjà
  3782. loadDynamicFiltersToModal();
  3784. // Bouton Appliquer les filtres
  3785. const applyBtn = document.getElementById('modalApplyFiltersBtn');
  3786. if (applyBtn) {
  3787. applyBtn.addEventListener('click', function (e) {
  3788. e.preventDefault();
  3789. console.log('[Modal] Apply button clicked, collecting filter values...');
  3791. // Collecter les valeurs du modal
  3792. const brandRadio = document.querySelector('#modalBrandList input[name=\"modal-brand\"]:checked');
  3793. if (brandRadio) {
  3794. currentFilters.brand = brandRadio.id !== 'modal-all-brands' ? brandRadio.value : '';
  3795. console.log('[Modal] Brand:', currentFilters.brand);
  3796. } else {
  3797. currentFilters.brand = '';
  3798. console.log('[Modal] Brand: No selection found');
  3799. }
  3801. // Conditions
  3802. const conditionRadio = document.querySelector('#modalConditionList input[name=\"modal-condition\"]:checked');
  3803. if (conditionRadio) {
  3804. currentFilters.condition = conditionRadio.id !== 'modal-all-conditions' ? conditionRadio.value : '';
  3805. console.log('[Modal] Condition:', currentFilters.condition);
  3806. } else {
  3807. currentFilters.condition = '';
  3808. }
  3810. // Featured
  3811. const featuredRadio = document.querySelector('#filtersModal input[name=\"modal-featured\"]:checked');
  3812. if (featuredRadio) {
  3813. currentFilters.featured = featuredRadio.id !== 'modal-featured-all' ? featuredRadio.value : '';
  3814. console.log('[Modal] Featured:', currentFilters.featured);
  3815. } else {
  3816. currentFilters.featured = '';
  3817. }
  3819. // Digital
  3820. const digitalRadio = document.querySelector('#filtersModal input[name=\"modal-digital\"]:checked');
  3821. if (digitalRadio) {
  3822. currentFilters.digital = digitalRadio.id !== 'modal-digital-all' ? digitalRadio.value : '';
  3823. console.log('[Modal] Digital:', currentFilters.digital);
  3824. } else {
  3825. currentFilters.digital = '';
  3826. }
  3828. // Availability
  3829. const availabilityRadio = document.querySelector('#filtersModal input[name=\"modal-availability\"]:checked');
  3830. if (availabilityRadio) {
  3831. currentFilters.availability = availabilityRadio.id !== 'modal-availability-all' ? availabilityRadio.value : '';
  3832. console.log('[Modal] Availability:', currentFilters.availability);
  3833. } else {
  3834. currentFilters.availability = '';
  3835. }
  3837. // Rating
  3838. const ratingRadio = document.querySelector('#filtersModal input[name=\"modal-rating\"]:checked');
  3839. if (ratingRadio && ratingRadio.id !== 'modal-rating-all') {
  3840. currentFilters.ratingMin = ratingRadio.value;
  3841. currentFilters.rating = ratingRadio.value;
  3842. console.log('[Modal] Rating:', currentFilters.ratingMin);
  3843. } else {
  3844. currentFilters.ratingMin = '';
  3845. currentFilters.rating = '';
  3846. }
  3848. // Prix
  3849. const priceMinInput = document.getElementById('modal-priceMin');
  3850. const priceMaxInput = document.getElementById('modal-priceMax');
  3851. currentFilters.priceMin = priceMinInput ? priceMinInput.value.trim() : '';
  3852. currentFilters.priceMax = priceMaxInput ? priceMaxInput.value.trim() : '';
  3853. console.log('[Modal] Price:', currentFilters.priceMin, '-', currentFilters.priceMax);
  3855. // Poids
  3856. const weightMinInput = document.getElementById('modal-weightMin');
  3857. const weightMaxInput = document.getElementById('modal-weightMax');
  3858. currentFilters.weightMin = weightMinInput ? weightMinInput.value.trim() : '';
  3859. currentFilters.weightMax = weightMaxInput ? weightMaxInput.value.trim() : '';
  3860. console.log('[Modal] Weight:', currentFilters.weightMin, '-', currentFilters.weightMax);
  3862. // Couleur
  3863. const colorRadio = document.querySelector('#modalColorList input[name=\"modal-color\"]:checked');
  3864. if (colorRadio) {
  3865. currentFilters.color = colorRadio.id !== 'modal-all-color' ? colorRadio.value : '';
  3866. console.log('[Modal] Color:', currentFilters.color);
  3867. } else {
  3868. currentFilters.color = '';
  3869. }
  3871. // Taille
  3872. const sizeRadio = document.querySelector('#modalSizeList input[name=\"modal-size\"]:checked');
  3873. if (sizeRadio) {
  3874. currentFilters.size = sizeRadio.id !== 'modal-all-size' ? sizeRadio.value : '';
  3875. console.log('[Modal] Size:', currentFilters.size);
  3876. } else {
  3877. currentFilters.size = '';
  3878. }
  3880. // Matériau
  3881. const materialRadio = document.querySelector('#modalMaterialList input[name=\"modal-material\"]:checked');
  3882. if (materialRadio) {
  3883. currentFilters.material = materialRadio.id !== 'modal-all-material' ? materialRadio.value : '';
  3884. console.log('[Modal] Material:', currentFilters.material);
  3885. } else {
  3886. currentFilters.material = '';
  3887. }
  3889. // Boutiques
  3890. const shopRadio = document.querySelector('#modalShopList input[name=\"modal-shop\"]:checked');
  3891. if (shopRadio) {
  3892. currentFilters.shop = shopRadio.id !== 'modal-all-shops' ? shopRadio.value : '';
  3893. console.log('[Modal] Shop:', currentFilters.shop);
  3894. } else {
  3895. currentFilters.shop = '';
  3896. }
  3898. currentFilters.page = 1;
  3900. console.log('[Modal] All filters collected:', currentFilters);
  3902. // Fermer le modal d'abord
  3903. const modalElement = document.getElementById('filtersModal');
  3904. const modal = bootstrap.Modal.getInstance(modalElement);
  3905. if (modal) {
  3906. modal.hide();
  3907. console.log('[Modal] Modal closed');
  3908. }
  3910. // Appliquer les filtres après un court délai pour laisser le modal se fermer
  3911. setTimeout(() => { // Vérifier que applyFilters existe
  3912. if (typeof window.applyFilters === 'function') {
  3913. console.log('[Modal] Calling applyFilters()...');
  3914. window.applyFilters();
  3915. // Mettre à jour le compteur de filtres actifs
  3916. setTimeout(() => {
  3917. if (typeof updateActiveFiltersCount === 'function') {
  3918. updateActiveFiltersCount();
  3919. }
  3920. }, 100);
  3921. } else {
  3922. console.error('[Modal] applyFilters is not available!', typeof window.applyFilters);
  3923. // Essayer de recharger la page avec les nouveaux paramètres
  3924. const url = new URL(window.location.href);
  3925. Object.keys(currentFilters).forEach(key => {
  3926. if (currentFilters[key] && currentFilters[key] !== '') {
  3927. let apiKey = key;
  3928. if (key === 'priceMin') {
  3929. apiKey = 'price_min';
  3930. } else if (key === 'priceMax') {
  3931. apiKey = 'price_max';
  3932. } else if (key === 'ratingMin') {
  3933. apiKey = 'rating_min';
  3934. } else if (key === 'weightMin') {
  3935. apiKey = 'weight_min';
  3936. } else if (key === 'weightMax') {
  3937. apiKey = 'weight_max';
  3938. } else if (key === 'stockStatus') {
  3939. apiKey = 'stock_status';
  3940. }
  3942. url.searchParams.set(apiKey, currentFilters[key]);
  3943. } else {
  3944. let apiKey = key;
  3945. if (key === 'priceMin') {
  3946. apiKey = 'price_min';
  3947. } else if (key === 'priceMax') {
  3948. apiKey = 'price_max';
  3949. } else if (key === 'ratingMin') {
  3950. apiKey = 'rating_min';
  3951. } else if (key === 'weightMin') {
  3952. apiKey = 'weight_min';
  3953. } else if (key === 'weightMax') {
  3954. apiKey = 'weight_max';
  3955. } else if (key === 'stockStatus') {
  3956. apiKey = 'stock_status';
  3957. }
  3959. url.searchParams.delete(apiKey);
  3960. }
  3961. });
  3962. window.location.href = url.toString();
  3963. }
  3964. }, 300);
  3965. });
  3966. } else {
  3967. console.error('[Modal] Apply button not found!');
  3968. }
  3970. // Bouton Réinitialiser
  3971. const resetBtn = document.getElementById('modalResetFiltersBtn');
  3972. if (resetBtn) {
  3973. resetBtn.addEventListener('click', function () {
  3974. console.log('[Modal] Reset button clicked');
  3976. // Réinitialiser tous les filtres du modal
  3977. document.querySelectorAll('#filtersModal input[type=\"radio\"]').forEach(radio => {
  3978. if (radio.id && radio.id.includes('-all')) {
  3979. radio.checked = true;
  3980. } else {
  3981. radio.checked = false;
  3982. }
  3983. });
  3985. const priceMinInput = document.getElementById('modal-priceMin');
  3986. const priceMaxInput = document.getElementById('modal-priceMax');
  3987. const weightMinInput = document.getElementById('modal-weightMin');
  3988. const weightMaxInput = document.getElementById('modal-weightMax');
  3990. if (priceMinInput) 
  3991. priceMinInput.value = '';
  3993. if (priceMaxInput) 
  3994. priceMaxInput.value = '';
  3996. if (weightMinInput) 
  3997. weightMinInput.value = '';
  3999. if (weightMaxInput) 
  4000. weightMaxInput.value = '';
  4003. // Réinitialiser currentFilters (garder category et sort)
  4004. const category = currentFilters.category || '';
  4005. const sort = currentFilters.sort || 'newest';
  4006. currentFilters = {
  4007. category: category,
  4008. sort: sort,
  4009. page: 1,
  4010. brand: '',
  4011. condition: '',
  4012. featured: '',
  4013. digital: '',
  4014. availability: '',
  4015. ratingMin: '',
  4016. rating: '',
  4017. priceMin: '',
  4018. priceMax: '',
  4019. weightMin: '',
  4020. weightMax: '',
  4021. color: '',
  4022. size: '',
  4023. material: '',
  4024. shop: ''
  4025. };
  4027. console.log('[Modal] Filters reset, currentFilters:', currentFilters);
  4029. // Fermer le modal d'abord
  4030. const modalElement = document.getElementById('filtersModal');
  4031. const modal = bootstrap.Modal.getInstance(modalElement);
  4032. if (modal) {
  4033. modal.hide();
  4034. console.log('[Modal] Modal closed after reset');
  4035. }
  4037. // Appliquer les filtres après un court délai
  4038. setTimeout(() => {
  4039. if (typeof window.applyFilters === 'function') {
  4040. window.applyFilters();
  4041. } else {
  4042. console.error('[Modal] applyFilters not available, reloading page...');
  4043. // Recharger la page avec les filtres réinitialisés
  4044. const url = new URL(window.location.href);
  4045. url.searchParams.delete('price_min');
  4046. url.searchParams.delete('price_max');
  4047. url.searchParams.delete('rating_min');
  4048. url.searchParams.delete('weight_min');
  4049. url.searchParams.delete('weight_max');
  4050. url.searchParams.delete('brand');
  4051. url.searchParams.delete('condition');
  4052. url.searchParams.delete('featured');
  4053. url.searchParams.delete('digital');
  4054. url.searchParams.delete('availability');
  4055. url.searchParams.delete('color');
  4056. url.searchParams.delete('size');
  4057. url.searchParams.delete('material');
  4058. url.searchParams.delete('shop');
  4059. window.location.href = url.toString();
  4060. }
  4061. }, 300);
  4062. });
  4063. } else {
  4064. console.error('[Modal] Reset button not found!');
  4065. }
  4067. // S'assurer que les filtres dynamiques sont chargés au premier chargement si disponibles
  4068. setTimeout(() => {
  4069. loadDynamicFiltersToModal();
  4070. }, 500);
  4071. });
  4072. </script>";
  4073.         
  4074.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  4076.         
  4077.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  4079.         yield from [];
  4080.     }
  4082.     /**
  4083.      * @codeCoverageIgnore
  4084.      */
  4085.     public function getTemplateName(): string
  4086.     {
  4087.         return "home/listing.html.twig";
  4088.     }
  4090.     /**
  4091.      * @codeCoverageIgnore
  4092.      */
  4093.     public function isTraitable(): bool
  4094.     {
  4095.         return false;
  4096.     }
  4098.     /**
  4099.      * @codeCoverageIgnore
  4100.      */
  4101.     public function getDebugInfo(): array
  4102.     {
  4103.         return array (  3341 => 2568,  3327 => 2564,  3321 => 2563,  3318 => 2562,  3314 => 2561,  3301 => 2550,  3287 => 2546,  3281 => 2545,  3278 => 2544,  3274 => 2543,  2934 => 2206,  2013 => 1288,  2004 => 1282,  2000 => 1281,  1996 => 1280,  1992 => 1279,  1988 => 1278,  1984 => 1277,  1980 => 1276,  1976 => 1275,  1972 => 1274,  1968 => 1273,  1964 => 1272,  1960 => 1271,  1956 => 1270,  1951 => 1268,  1947 => 1267,  1943 => 1266,  1939 => 1265,  1935 => 1264,  1931 => 1263,  1927 => 1262,  1923 => 1261,  1916 => 1257,  1910 => 1254,  1904 => 1251,  1898 => 1248,  1892 => 1245,  1886 => 1242,  1880 => 1239,  1874 => 1236,  1868 => 1233,  1862 => 1230,  1856 => 1227,  1850 => 1224,  1844 => 1221,  1838 => 1218,  1834 => 1217,  1830 => 1216,  1826 => 1215,  1822 => 1214,  1818 => 1213,  1814 => 1212,  1810 => 1211,  1614 => 1018,  1604 => 1010,  1594 => 1009,  1590 => 1008,  1549 => 1007,  1542 => 1005,  1539 => 1004,  1533 => 1003,  1530 => 1002,  1525 => 1001,  1522 => 1000,  1517 => 999,  1515 => 998,  1513 => 997,  1509 => 996,  1429 => 919,  1425 => 918,  1421 => 917,  1417 => 916,  1413 => 915,  1338 => 843,  1334 => 842,  1330 => 840,  1317 => 839,  882 => 415,  847 => 414,  825 => 403,  817 => 397,  815 => 396,  810 => 393,  801 => 389,  799 => 388,  786 => 380,  771 => 376,  756 => 372,  749 => 368,  745 => 366,  738 => 363,  736 => 362,  731 => 360,  725 => 356,  721 => 354,  715 => 351,  710 => 350,  708 => 349,  697 => 341,  693 => 340,  688 => 337,  684 => 335,  661 => 333,  644 => 332,  640 => 331,  630 => 326,  621 => 323,  618 => 322,  615 => 321,  609 => 320,  606 => 319,  600 => 318,  597 => 317,  592 => 316,  589 => 315,  584 => 314,  581 => 313,  579 => 312,  574 => 309,  564 => 307,  554 => 305,  551 => 304,  548 => 303,  542 => 302,  539 => 301,  533 => 300,  530 => 299,  525 => 298,  522 => 297,  517 => 296,  514 => 295,  512 => 294,  508 => 293,  502 => 292,  498 => 290,  493 => 289,  480 => 281,  474 => 280,  468 => 279,  462 => 278,  456 => 277,  450 => 276,  277 => 105,  268 => 101,  266 => 100,  254 => 97,  248 => 96,  245 => 95,  240 => 94,  231 => 88,  214 => 73,  200 => 69,  194 => 68,  191 => 67,  187 => 66,  174 => 55,  165 => 51,  163 => 50,  155 => 47,  151 => 46,  140 => 44,  137 => 43,  132 => 42,  126 => 39,  117 => 37,  89 => 12,  79 => 4,  66 => 3,  43 => 1,);
  4104.     }
  4106.     public function getSourceContext(): Source
  4107.     {
  4108.         return new Source("{% extends 'base_home.html.twig' %}
  4110. {% block body %}
  4112. \t<!-- Start Banner Area -->
  4113. \t<section class=\"banner-area organic-breadcrumb\">
  4114. \t\t<div class=\"container\">
  4115. \t\t\t<div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  4116. \t\t\t\t<div class=\"col-first\">
  4117. \t\t\t\t\t<h1>Page de listage de produit</h1>
  4118. \t\t\t\t\t<nav class=\"d-flex align-items-center\">
  4119. \t\t\t\t\t\t<a href=\"{{ path('ui_home') }}\">Accueil<span class=\"lnr lnr-arrow-right\"></span>
  4120. \t\t\t\t\t\t</a>
  4121. \t\t\t\t\t\t<a href=\"javascript:void(0);\">Liste des produits</a>
  4122. \t\t\t\t\t</nav>
  4123. \t\t\t\t</div>
  4124. \t\t\t</div>
  4125. \t\t</div>
  4126. \t</section>
  4127. \t<!-- End Banner Area -->
  4129. \t<div class=\"container\">
  4130. \t\t<div class=\"row\">
  4131. \t\t\t<div class=\"col-xl-3 col-lg-4 col-md-5\">
  4132. \t\t\t\t<!-- Bouton toggle sidebar mobile -->
  4133. \t\t\t\t<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\">
  4134. \t\t\t\t\t<i class=\"lnr lnr-menu me-2\"></i>Filtres et catégories
  4135. \t\t\t\t\t<i class=\"lnr lnr-chevron-down ms-2 toggle-icon\"></i>
  4136. \t\t\t\t</button>
  4138. \t\t\t\t<!-- Sidebar avec collapse -->
  4139. \t\t\t\t<div class=\"collapse d-md-block\" id=\"listingSidebarCollapse\">
  4140. \t\t\t\t\t<div class=\"sidebar-categories\">
  4141. \t\t\t\t\t\t<div class=\"head\">Catégories</div>
  4142. \t\t\t\t\t\t<ul class=\"main-categories\">
  4143. \t\t\t\t\t\t\t<li class=\"main-nav-list\">
  4144. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing') }}\" class=\"category-link {% if not currentCategory %}active{% endif %}\">
  4145. \t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-tag\"></span>Toutes les catégories
  4146. \t\t\t\t\t\t\t\t\t<span class=\"number\">({{ totalProducts }})</span>
  4147. \t\t\t\t\t\t\t\t</a>
  4148. \t\t\t\t\t\t\t</li>
  4149. \t\t\t\t\t\t\t{% for category in categories %}
  4150. \t\t\t\t\t\t\t\t<li class=\"main-nav-list\">
  4151. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_listing', {'category': category.slug}) }}\" class=\"category-link {% if currentCategory == category.slug %}active{% endif %}\" data-category=\"{{ category.slug }}\">
  4152. \t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-tag\"></span>
  4153. \t\t\t\t\t\t\t\t\t\t{{ category.name }}
  4154. \t\t\t\t\t\t\t\t\t\t<span class=\"number\">({{ category.products|length }})</span>
  4155. \t\t\t\t\t\t\t\t\t</a>
  4156. \t\t\t\t\t\t\t\t</li>
  4157. \t\t\t\t\t\t\t{% else %}
  4158. \t\t\t\t\t\t\t\t<li class=\"main-nav-list\">
  4159. \t\t\t\t\t\t\t\t\t<span>Aucune catégorie</span>
  4160. \t\t\t\t\t\t\t\t</li>
  4161. \t\t\t\t\t\t\t{% endfor %}
  4162. \t\t\t\t\t\t</ul>
  4163. \t\t\t\t\t</div>
  4164. \t\t\t\t\t<div class=\"sidebar-filter mt-50\" id=\"brandsFilter\">
  4165. \t\t\t\t\t\t<div class=\"top-filter-head\">Filtres</div>
  4166. \t\t\t\t\t\t<div class=\"common-filter\">
  4167. \t\t\t\t\t\t\t<div class=\"head\">Marques</div>
  4168. \t\t\t\t\t\t\t<ul class=\"brand-list\" id=\"brandList\">
  4169. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4170. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"all-brands\" name=\"brand\" checked>
  4171. \t\t\t\t\t\t\t\t\t<label for=\"all-brands\">Toutes les marques</label>
  4172. \t\t\t\t\t\t\t\t</li>
  4173. \t\t\t\t\t\t\t\t{% for brand in brands %}
  4174. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4175. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"brand-{{ brand.id }}\" name=\"brand\" value=\"{{ brand.slug }}\">
  4176. \t\t\t\t\t\t\t\t\t\t<label for=\"brand-{{ brand.id }}\">{{ brand.name }}<span>({{ brand.getActiveProductsCount() }})</span>
  4177. \t\t\t\t\t\t\t\t\t\t</label>
  4178. \t\t\t\t\t\t\t\t\t</li>
  4179. \t\t\t\t\t\t\t\t{% endfor %}
  4180. \t\t\t\t\t\t\t</ul>
  4181. \t\t\t\t\t\t</div>
  4182. \t\t\t\t\t\t<!-- Filtres avancés -->
  4183. \t\t\t\t\t\t<div class=\"common-filter\">
  4184. \t\t\t\t\t\t\t<div class=\"head\">Boutiques</div>
  4185. \t\t\t\t\t\t\t<div id=\"shopsFilter\">
  4186. \t\t\t\t\t\t\t\t<form action=\"#\">
  4187. \t\t\t\t\t\t\t\t\t<ul
  4188. \t\t\t\t\t\t\t\t\t\tclass=\"shop-list\" id=\"shopList\"><!-- Les boutiques seront chargées dynamiquement -->
  4189. \t\t\t\t\t\t\t\t\t</ul>
  4190. \t\t\t\t\t\t\t\t</form>
  4191. \t\t\t\t\t\t\t</div>
  4192. \t\t\t\t\t\t</div>
  4194. \t\t\t\t\t\t<div class=\"common-filter\">
  4195. \t\t\t\t\t\t\t<div class=\"head\">Condition ({{ conditions|length }})</div>
  4196. \t\t\t\t\t\t\t<ul class=\"condition-list\" id=\"conditionList\">
  4197. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4198. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"all-conditions\" name=\"condition\" checked>
  4199. \t\t\t\t\t\t\t\t\t<label for=\"all-conditions\">Toutes les conditions</label>
  4200. \t\t\t\t\t\t\t\t</li>
  4201. \t\t\t\t\t\t\t\t{% for condition in conditions %}
  4202. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4203. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"condition-{{ condition.id }}\" name=\"condition\" value=\"{{ condition.slug }}\">
  4204. \t\t\t\t\t\t\t\t\t\t<label for=\"condition-{{ condition.id }}\">{{ condition.name }}<span>({{ condition.getActiveProductsCount() }})</span>
  4205. \t\t\t\t\t\t\t\t\t\t</label>
  4206. \t\t\t\t\t\t\t\t\t</li>
  4207. \t\t\t\t\t\t\t\t{% else %}
  4208. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4209. \t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Aucune condition disponible</span>
  4210. \t\t\t\t\t\t\t\t\t</li>
  4211. \t\t\t\t\t\t\t\t{% endfor %}
  4212. \t\t\t\t\t\t\t</ul>
  4213. \t\t\t\t\t\t</div>
  4215. \t\t\t\t\t\t<div class=\"common-filter\">
  4216. \t\t\t\t\t\t\t<div class=\"head\">Produits vedettes</div>
  4217. \t\t\t\t\t\t\t<form action=\"#\">
  4218. \t\t\t\t\t\t\t\t<ul>
  4219. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4220. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"featured-all\" name=\"featured\" checked>
  4221. \t\t\t\t\t\t\t\t\t\t<label for=\"featured-all\">Tous les produits</label>
  4222. \t\t\t\t\t\t\t\t\t</li>
  4223. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4224. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"featured-only\" name=\"featured\" value=\"true\">
  4225. \t\t\t\t\t\t\t\t\t\t<label for=\"featured-only\">Produits vedettes uniquement</label>
  4226. \t\t\t\t\t\t\t\t\t</li>
  4227. \t\t\t\t\t\t\t\t</ul>
  4228. \t\t\t\t\t\t\t</form>
  4229. \t\t\t\t\t\t</div>
  4231. \t\t\t\t\t\t<div class=\"common-filter\">
  4232. \t\t\t\t\t\t\t<div class=\"head\">Type de produit</div>
  4233. \t\t\t\t\t\t\t<form action=\"#\">
  4234. \t\t\t\t\t\t\t\t<ul>
  4235. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4236. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-all\" name=\"digital\" checked>
  4237. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-all\">Tous les types</label>
  4238. \t\t\t\t\t\t\t\t\t</li>
  4239. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4240. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-physical\" name=\"digital\" value=\"false\">
  4241. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-physical\">Produits physiques</label>
  4242. \t\t\t\t\t\t\t\t\t</li>
  4243. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4244. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"digital-digital\" name=\"digital\" value=\"true\">
  4245. \t\t\t\t\t\t\t\t\t\t<label for=\"digital-digital\">Produits numériques</label>
  4246. \t\t\t\t\t\t\t\t\t</li>
  4247. \t\t\t\t\t\t\t\t</ul>
  4248. \t\t\t\t\t\t\t</form>
  4249. \t\t\t\t\t\t</div>
  4251. \t\t\t\t\t\t<div class=\"common-filter\">
  4252. \t\t\t\t\t\t\t<div class=\"head\">Disponibilité</div>
  4253. \t\t\t\t\t\t\t<form action=\"#\">
  4254. \t\t\t\t\t\t\t\t<ul>
  4255. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4256. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-all\" name=\"availability\" checked>
  4257. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-all\">Tous</label>
  4258. \t\t\t\t\t\t\t\t\t</li>
  4259. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4260. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-in-stock\" name=\"availability\" value=\"in_stock\">
  4261. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-in-stock\">En stock</label>
  4262. \t\t\t\t\t\t\t\t\t</li>
  4263. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4264. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-low-stock\" name=\"availability\" value=\"low_stock\">
  4265. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-low-stock\">Stock faible</label>
  4266. \t\t\t\t\t\t\t\t\t</li>
  4267. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4268. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"availability-out-of-stock\" name=\"availability\" value=\"out_of_stock\">
  4269. \t\t\t\t\t\t\t\t\t\t<label for=\"availability-out-of-stock\">Rupture de stock</label>
  4270. \t\t\t\t\t\t\t\t\t</li>
  4271. \t\t\t\t\t\t\t\t</ul>
  4272. \t\t\t\t\t\t\t</form>
  4273. \t\t\t\t\t\t</div>
  4275. \t\t\t\t\t\t<div class=\"common-filter\">
  4276. \t\t\t\t\t\t\t<div class=\"head\">Note minimale</div>
  4277. \t\t\t\t\t\t\t<form action=\"#\">
  4278. \t\t\t\t\t\t\t\t<ul>
  4279. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4280. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-all\" name=\"rating\" checked>
  4281. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-all\">Toutes les notes</label>
  4282. \t\t\t\t\t\t\t\t\t</li>
  4283. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4284. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-4\" name=\"rating\" value=\"4\">
  4285. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-4\">4 étoiles et plus</label>
  4286. \t\t\t\t\t\t\t\t\t</li>
  4287. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4288. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-3\" name=\"rating\" value=\"3\">
  4289. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-3\">3 étoiles et plus</label>
  4290. \t\t\t\t\t\t\t\t\t</li>
  4291. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  4292. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"rating-2\" name=\"rating\" value=\"2\">
  4293. \t\t\t\t\t\t\t\t\t\t<label for=\"rating-2\">2 étoiles et plus</label>
  4294. \t\t\t\t\t\t\t\t\t</li>
  4295. \t\t\t\t\t\t\t\t</ul>
  4296. \t\t\t\t\t\t\t</form>
  4297. \t\t\t\t\t\t</div>
  4299. \t\t\t\t\t\t<div class=\"common-filter\">
  4300. \t\t\t\t\t\t\t<div class=\"head\">Poids</div>
  4301. \t\t\t\t\t\t\t<div class=\"weight-range-area\">
  4302. \t\t\t\t\t\t\t\t<div class=\"weight-inputs d-flex\">
  4303. \t\t\t\t\t\t\t\t\t<div class=\"weight-input\">
  4304. \t\t\t\t\t\t\t\t\t\t<label>Min (kg):</label>
  4305. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" id=\"weightMin\" placeholder=\"0\" step=\"0.1\" min=\"0\">
  4306. \t\t\t\t\t\t\t\t\t</div>
  4307. \t\t\t\t\t\t\t\t\t<div class=\"weight-input\">
  4308. \t\t\t\t\t\t\t\t\t\t<label>Max (kg):</label>
  4309. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" id=\"weightMax\" placeholder=\"100\" step=\"0.1\" min=\"0\">
  4310. \t\t\t\t\t\t\t\t\t</div>
  4311. \t\t\t\t\t\t\t\t</div>
  4312. \t\t\t\t\t\t\t</div>
  4313. \t\t\t\t\t\t</div>
  4315. \t\t\t\t\t\t<div class=\"common-filter\">
  4316. \t\t\t\t\t\t\t<div class=\"head\">Couleur</div>
  4317. \t\t\t\t\t\t\t<div id=\"colorsFilter\">
  4318. \t\t\t\t\t\t\t\t<form action=\"#\">
  4319. \t\t\t\t\t\t\t\t\t<ul
  4320. \t\t\t\t\t\t\t\t\t\tclass=\"color-list\" id=\"colorList\"><!-- Les couleurs seront chargées dynamiquement -->
  4321. \t\t\t\t\t\t\t\t\t</ul>
  4322. \t\t\t\t\t\t\t\t</form>
  4323. \t\t\t\t\t\t\t</div>
  4324. \t\t\t\t\t\t</div>
  4326. \t\t\t\t\t\t<div class=\"common-filter\">
  4327. \t\t\t\t\t\t\t<div class=\"head\">Taille</div>
  4328. \t\t\t\t\t\t\t<div id=\"sizesFilter\">
  4329. \t\t\t\t\t\t\t\t<form action=\"#\">
  4330. \t\t\t\t\t\t\t\t\t<ul
  4331. \t\t\t\t\t\t\t\t\t\tclass=\"size-list\" id=\"sizeList\"><!-- Les tailles seront chargées dynamiquement -->
  4332. \t\t\t\t\t\t\t\t\t</ul>
  4333. \t\t\t\t\t\t\t\t</form>
  4334. \t\t\t\t\t\t\t</div>
  4335. \t\t\t\t\t\t</div>
  4337. \t\t\t\t\t\t<div class=\"common-filter\">
  4338. \t\t\t\t\t\t\t<div class=\"head\">Matériau</div>
  4339. \t\t\t\t\t\t\t<div id=\"materialsFilter\">
  4340. \t\t\t\t\t\t\t\t<form action=\"#\">
  4341. \t\t\t\t\t\t\t\t\t<ul
  4342. \t\t\t\t\t\t\t\t\t\tclass=\"material-list\" id=\"materialList\"><!-- Les matériaux seront chargés dynamiquement -->
  4343. \t\t\t\t\t\t\t\t\t</ul>
  4344. \t\t\t\t\t\t\t\t</form>
  4345. \t\t\t\t\t\t\t</div>
  4346. \t\t\t\t\t\t</div>
  4349. \t\t\t\t\t\t<div class=\"common-filter\">
  4350. \t\t\t\t\t\t\t<div class=\"head\">Prix</div>
  4351. \t\t\t\t\t\t\t<div class=\"price-range-area\">
  4352. \t\t\t\t\t\t\t\t<div id=\"price-range\"></div>
  4353. \t\t\t\t\t\t\t\t<div class=\"value-wrapper d-flex\">
  4354. \t\t\t\t\t\t\t\t\t<div class=\"price\">Prix:</div>
  4355. \t\t\t\t\t\t\t\t\t<span>\$</span>
  4356. \t\t\t\t\t\t\t\t\t<div id=\"lower-value\"></div>
  4357. \t\t\t\t\t\t\t\t\t<div class=\"to\">to</div>
  4358. \t\t\t\t\t\t\t\t\t<span>\$</span>
  4359. \t\t\t\t\t\t\t\t\t<div id=\"upper-value\"></div>
  4360. \t\t\t\t\t\t\t\t</div>
  4361. \t\t\t\t\t\t\t</div>
  4362. \t\t\t\t\t\t</div>
  4363. \t\t\t\t\t</div>
  4364. \t\t\t\t</div>
  4365. \t\t\t\t<!-- Fin du collapse sidebar -->
  4366. \t\t\t</div>
  4367. \t\t\t<div class=\"col-xl-9 col-lg-8 col-md-7\">
  4368. \t\t\t<!-- Barre de tri et bouton de filtres -->
  4369. \t\t\t<div class=\"row mb-4\">
  4370. \t\t\t\t<div
  4371. \t\t\t\t\tclass=\"col-md-6 mb-3 mb-md-0\">
  4372. \t\t\t\t\t<!-- Bouton pour ouvrir le modal de filtres -->
  4373. \t\t\t\t\t<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;\">
  4374. \t\t\t\t\t\t<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);\">
  4375. \t\t\t\t\t\t\t<i class=\"lnr lnr-filter\" style=\"font-size: 1.3rem; color: white; font-weight: bold;\"></i>
  4376. \t\t\t\t\t\t</div>
  4377. \t\t\t\t\t\t<span style=\"font-size: 1.1rem; font-weight: 600; color: #333;\">Filtres</span>
  4378. \t\t\t\t\t\t<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>
  4379. \t\t\t\t\t</button>
  4380. \t\t\t\t</div>
  4381. \t\t\t\t<div class=\"col-md-6\">
  4382. \t\t\t\t\t<select class=\"form-select\" id=\"sortSelect\" onchange=\"applySorting()\">
  4383. \t\t\t\t\t\t<option value=\"newest\" {% if currentSort == 'newest' %} selected {% endif %}>Plus récents</option>
  4384. \t\t\t\t\t\t<option value=\"price_asc\" {% if currentSort == 'price_asc' %} selected {% endif %}>Prix croissant</option>
  4385. \t\t\t\t\t\t<option value=\"price_desc\" {% if currentSort == 'price_desc' %} selected {% endif %}>Prix décroissant</option>
  4386. \t\t\t\t\t\t<option value=\"name_asc\" {% if currentSort == 'name_asc' %} selected {% endif %}>Nom A-Z</option>
  4387. \t\t\t\t\t\t<option value=\"name_desc\" {% if currentSort == 'name_desc' %} selected {% endif %}>Nom Z-A</option>
  4388. \t\t\t\t\t\t<option value=\"popular\" {% if currentSort == 'popular' %} selected {% endif %}>Plus populaires</option>
  4389. \t\t\t\t\t</select>
  4390. \t\t\t\t</div>
  4391. \t\t\t</div>
  4393. \t\t\t<!-- Start Best Seller -->
  4394. \t\t\t<section class=\"lattest-product-area pb-40 category-list\">
  4395. \t\t\t\t<div class=\"row\" id=\"productsContainer\">
  4396. \t\t\t\t\t{% for product in products %}
  4397. \t\t\t\t\t\t<div class=\"col-lg-4 col-md-6\">
  4398. \t\t\t\t\t\t\t<div class=\"single-product\">
  4399. \t\t\t\t\t\t\t\t<div class=\"product-image-container mb-2\" onmouseenter=\"showImageNav({{ product.id }})\" onmouseleave=\"hideImageNav({{ product.id }})\">
  4400. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  4401. \t\t\t\t\t\t\t\t\t\t{% set allImages = product.images|default([]) %}
  4402. \t\t\t\t\t\t\t\t\t\t{% if product.variants is defined %}
  4403. \t\t\t\t\t\t\t\t\t\t\t{% for variant in product.variants %}
  4404. \t\t\t\t\t\t\t\t\t\t\t\t{% if variant.isActive and variant.images is defined %}
  4405. \t\t\t\t\t\t\t\t\t\t\t\t\t{% for variantImg in variant.images %}
  4406. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% set allImages = allImages|merge([variantImg]) %}
  4407. \t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4408. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4409. \t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4410. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4411. \t\t\t\t\t\t\t\t\t\t{% if allImages|length > 0 %}
  4412. \t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-{{ product.id }}\" src=\"{{ asset(allImages[0]) }}\" alt=\"{{ product.name }}\">
  4413. \t\t\t\t\t\t\t\t\t\t{% else %}
  4414. \t\t\t\t\t\t\t\t\t\t\t<img class=\"img-fluid main-product-img\" id=\"main-img-{{ product.id }}\" src=\"{{ asset('ui/img/product/p1.jpg') }}\" alt=\"{{ product.name }}\">
  4415. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4416. \t\t\t\t\t\t\t\t\t</a>
  4418. \t\t\t\t\t\t\t\t\t<!-- Boutons de navigation (visibles au survol) -->
  4419. \t\t\t\t\t\t\t\t\t{% set allImages = product.images|default([]) %}
  4420. \t\t\t\t\t\t\t\t\t{% if product.variants is defined %}
  4421. \t\t\t\t\t\t\t\t\t\t{% for variant in product.variants %}
  4422. \t\t\t\t\t\t\t\t\t\t\t{% if variant.isActive and variant.images is defined %}
  4423. \t\t\t\t\t\t\t\t\t\t\t\t{% for variantImg in variant.images %}
  4424. \t\t\t\t\t\t\t\t\t\t\t\t\t{% set allImages = allImages|merge([variantImg]) %}
  4425. \t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4426. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4427. \t\t\t\t\t\t\t\t\t\t{% endfor %}
  4428. \t\t\t\t\t\t\t\t\t{% endif %}
  4429. \t\t\t\t\t\t\t\t\t{% if allImages|length > 1 %}
  4430. \t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-left\" id=\"img-left-{{ product.id }}\" onclick=\"prevImage({{ product.id }})\" style=\"display: none;\">
  4431. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-left\"></span>
  4432. \t\t\t\t\t\t\t\t\t\t</button>
  4433. \t\t\t\t\t\t\t\t\t\t<button class=\"img-nav-btn img-nav-right\" id=\"img-right-{{ product.id }}\" onclick=\"nextImage({{ product.id }})\" style=\"display: none;\">
  4434. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-chevron-right\"></span>
  4435. \t\t\t\t\t\t\t\t\t\t</button>
  4437. \t\t\t\t\t\t\t\t\t\t<!-- Indicateurs de position -->
  4438. \t\t\t\t\t\t\t\t\t\t<div class=\"img-indicators\" id=\"img-indicators-{{ product.id }}\" style=\"display: none;\">
  4439. \t\t\t\t\t\t\t\t\t\t\t{% for img in allImages %}
  4440. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"indicator\" id=\"indicator-{{ product.id }}-{{ loop.index0 }}\" onclick=\"showImage({{ product.id }}, {{ loop.index0 }})\"></span>
  4441. \t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4442. \t\t\t\t\t\t\t\t\t\t</div>
  4443. \t\t\t\t\t\t\t\t\t{% endif %}
  4444. \t\t\t\t\t\t\t\t</div>
  4446. \t\t\t\t\t\t\t\t<div class=\"product-details\">
  4447. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\">
  4448. \t\t\t\t\t\t\t\t\t\t<h6>{{ product.name }}</h6>
  4449. \t\t\t\t\t\t\t\t\t</a>
  4451. \t\t\t\t\t\t\t\t\t<!-- Affichage de la boutique -->
  4452. \t\t\t\t\t\t\t\t\t<div class=\"shop-info\">
  4453. \t\t\t\t\t\t\t\t\t\t<small class=\"text-muted\">
  4454. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  4455. \t\t\t\t\t\t\t\t\t\t\tVendu par :
  4456. \t\t\t\t\t\t\t\t\t\t\t{% if product.shop is defined and product.shop %}
  4457. \t\t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\" class=\"shop-link\">
  4458. \t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.shop.name }}
  4459. \t\t\t\t\t\t\t\t\t\t\t\t</a>
  4460. \t\t\t\t\t\t\t\t\t\t\t{% else %}
  4461. \t\t\t\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  4462. \t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4463. \t\t\t\t\t\t\t\t\t\t</small>
  4464. \t\t\t\t\t\t\t\t\t</div>
  4466. \t\t\t\t\t\t\t\t\t<div class=\"price\">
  4467. \t\t\t\t\t\t\t\t\t\t<h6>{{ product.price|number_format(2, '.', ' ') }}
  4468. \t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  4469. \t\t\t\t\t\t\t\t\t\t{% if product.compareAtPrice %}
  4470. \t\t\t\t\t\t\t\t\t\t\t<h6 class=\"l-through\">{{ product.compareAtPrice|number_format(2, '.', ' ') }}
  4471. \t\t\t\t\t\t\t\t\t\t\t\tHTG</h6>
  4472. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4473. \t\t\t\t\t\t\t\t\t</div>
  4474. \t\t\t\t\t\t\t\t\t<div class=\"prd-bottom\">
  4475. \t\t\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" class=\"social-info add-to-cart\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  4476. \t\t\t\t\t\t\t\t\t\t\t<span class=\"ti-bag\"></span>
  4477. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">+ panier</p>
  4478. \t\t\t\t\t\t\t\t\t\t</a>
  4479. \t\t\t\t\t\t\t\t\t\t<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 %}>
  4480. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-heart\"></span>
  4481. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Favoris</p>
  4482. \t\t\t\t\t\t\t\t\t\t</a>
  4483. \t\t\t\t\t\t\t\t\t\t<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 %}>
  4484. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-sync\"></span>
  4485. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Comparer</p>
  4486. \t\t\t\t\t\t\t\t\t\t</a>
  4487. \t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_product_show', { slug: product.slug }) }}\" class=\"social-info\">
  4488. \t\t\t\t\t\t\t\t\t\t\t<span class=\"lnr lnr-move\"></span>
  4489. \t\t\t\t\t\t\t\t\t\t\t<p class=\"hover-text\">Voir plus</p>
  4490. \t\t\t\t\t\t\t\t\t\t</a>
  4491. \t\t\t\t\t\t\t\t\t</div>
  4492. \t\t\t\t\t\t\t\t</div>
  4493. \t\t\t\t\t\t\t</div>
  4494. \t\t\t\t\t\t</div>
  4495. \t\t\t\t\t{% else %}
  4496. \t\t\t\t\t\t<div class=\"col-12\">
  4497. \t\t\t\t\t\t\t<p>Aucun produit disponible.</p>
  4498. \t\t\t\t\t\t</div>
  4499. \t\t\t\t\t{% endfor %}
  4500. \t\t\t\t</div>
  4502. \t\t\t\t<!-- Bouton Charger plus de produits -->
  4503. \t\t\t\t{% if totalPages > currentPage %}
  4504. \t\t\t\t\t<div class=\"text-center mt-4 mb-4\" id=\"loadMoreContainer\">
  4505. \t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"loadMoreBtn\" onclick=\"loadMoreProducts()\">
  4506. \t\t\t\t\t\t\t<i class=\"lnr lnr-plus-circle me-2\"></i>Charger plus de produits
  4507. \t\t\t\t\t\t</button>
  4508. \t\t\t\t\t</div>
  4509. \t\t\t\t{% endif %}
  4511. \t\t\t\t<!-- Message de fin -->
  4512. \t\t\t\t<div id=\"noMoreProducts\" class=\"text-center py-4\" style=\"display: none;\">
  4513. \t\t\t\t\t<p class=\"text-muted\">
  4514. \t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  4515. \t\t\t\t\t\tTous les produits ont été chargés</p>
  4516. \t\t\t\t</div>
  4517. \t\t\t</section>
  4518. \t\t\t<!-- End Best Seller -->
  4519. \t\t</div>
  4520. \t</div>
  4521. </div>{% endblock %}{% block title %}Liste des produits | MaketOu{% endblock %}{% block stylesheets %}
  4522. <style>
  4523. \t/* Styles pour la navigation des images */
  4524. \t.product-image-container {
  4525. \t\tposition: relative;
  4526. \t\toverflow: hidden;
  4527. \t\tborder-radius: 8px;
  4528. \t}
  4530. \t.img-nav-btn {
  4531. \t\tposition: absolute;
  4532. \t\ttop: 50%;
  4533. \t\ttransform: translateY(-50%);
  4534. \t\tbackground: rgba(0, 0, 0, 0.6);
  4535. \t\tcolor: white;
  4536. \t\tborder: none;
  4537. \t\twidth: 35px;
  4538. \t\theight: 35px;
  4539. \t\tborder-radius: 50%;
  4540. \t\tdisplay: flex;
  4541. \t\talign-items: center;
  4542. \t\tjustify-content: center;
  4543. \t\tcursor: pointer;
  4544. \t\ttransition: all 0.3s ease;
  4545. \t\tz-index: 10;
  4546. \t}
  4548. \t.img-nav-btn:hover {
  4549. \t\tbackground: #095ad3;
  4550. \t\ttransform: translateY(-50%) scale(1.1);
  4551. \t}
  4553. \t.img-nav-left {
  4554. \t\tleft: 10px;
  4555. \t}
  4557. \t.img-nav-right {
  4558. \t\tright: 10px;
  4559. \t}
  4561. \t.img-indicators {
  4562. \t\tposition: absolute;
  4563. \t\tbottom: 10px;
  4564. \t\tleft: 50%;
  4565. \t\ttransform: translateX(-50%);
  4566. \t\tdisplay: flex;
  4567. \t\tgap: 5px;
  4568. \t\tz-index: 10;
  4569. \t}
  4571. \t.indicator {
  4572. \t\twidth: 8px;
  4573. \t\theight: 8px;
  4574. \t\tborder-radius: 50%;
  4575. \t\tbackground: rgba(255, 255, 255, 0.5);
  4576. \t\tcursor: pointer;
  4577. \t\tmargin-bottom: 10px;
  4578. \t\ttransition: all 0.3s ease;
  4579. \t\tborder: 1px solid rgba(255, 255, 255, 0.3);
  4580. \t}
  4582. \t.indicator.active {
  4583. \t\tbackground: #ffa200;
  4584. \t\tborder-color: #ffa200;
  4585. \t\ttransform: scale(1.2);
  4586. \t}
  4588. \t.indicator:hover {
  4589. \t\tbackground: rgba(255, 255, 255, 0.8);
  4590. \t}
  4592. \t/* Styles pour l'affichage de la boutique */
  4593. \t.shop-info {
  4594. \t\tmargin: 8px 0;
  4595. \t\tpadding: 5px 0;
  4596. \t\tborder-bottom: 1px solid #f0f0f0;
  4597. \t}
  4599. \t.shop-link {
  4600. \t\tcolor: #007bff;
  4601. \t\ttext-decoration: none;
  4602. \t\tfont-weight: 500;
  4603. \t}
  4605. \t.shop-link:hover {
  4606. \t\tcolor: #ffa200;
  4607. \t\ttext-decoration: underline;
  4608. \t}
  4610. \t/* Animation pour le survol */
  4611. \t.product-image-container:hover .main-product-img {
  4612. \t\ttransform: scale(1.05);
  4613. \t\ttransition: transform 0.3s ease;
  4614. \t}
  4616. \t.main-product-img {
  4617. \t\ttransition: transform 0.3s ease;
  4618. \t\twidth: 100%;
  4619. \t\theight: 100%;
  4620. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  4621. \t\tobject-position: center; /* Centre l'image */
  4622. \t\tdisplay: block;
  4623. \t}
  4625. \t/* Styles pour les images des produits associés (Deals de la semaine) */
  4626. \t.related-product-img-container {
  4627. \t\tposition: relative;
  4628. \t\toverflow: hidden;
  4629. \t\tborder-radius: 8px;
  4630. \t\twidth: 100%;
  4631. \t\theight: 200px; /* Hauteur fixe pour les produits associés */
  4632. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  4633. \t}
  4635. \t.related-product-img {
  4636. \t\twidth: 100%;
  4637. \t\theight: 100%;
  4638. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  4639. \t\tobject-position: center; /* Centre l'image */
  4640. \t\tdisplay: block;
  4641. \t\ttransition: transform 0.3s ease;
  4642. \t}
  4644. \t.related-product-img-container:hover .related-product-img {
  4645. \t\ttransform: scale(1.05);
  4646. \t}
  4648. \t/* Styles pour l'image de catégorie dans les deals */
  4649. \t.category-banner-container {
  4650. \t\tdisplay: block;
  4651. \t\tposition: relative;
  4652. \t\toverflow: hidden;
  4653. \t\tborder-radius: 8px;
  4654. \t\twidth: 100%;
  4655. \t\theight: 400px; /* Hauteur fixe pour la bannière de catégorie */
  4656. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  4657. \t}
  4659. \t.category-banner-img {
  4660. \t\twidth: 100%;
  4661. \t\theight: 100%;
  4662. \t\tobject-fit: cover; /* Recadre l'image pour remplir le conteneur */
  4663. \t\tobject-position: center; /* Centre l'image */
  4664. \t\tdisplay: block;
  4665. \t\ttransition: transform 0.3s ease;
  4666. \t}
  4668. \t.category-banner-container:hover .category-banner-img {
  4669. \t\ttransform: scale(1.05);
  4670. \t}
  4672. \t/* Styles pour les images de la modal Quick Product View */
  4673. \t.quick-view-carousel .item {
  4674. \t\twidth: 100%;
  4675. \t\theight: 400px; /* Hauteur fixe pour les images du carousel */
  4676. \t\tbackground-size: cover;
  4677. \t\tbackground-position: center;
  4678. \t\tbackground-repeat: no-repeat;
  4679. \t\tborder-radius: 8px;
  4680. \t}
  4682. \t/* Contraindre le conteneur d'image pour maintenir les proportions */
  4683. \t.product-image-container {
  4684. \t\tposition: relative;
  4685. \t\toverflow: hidden;
  4686. \t\tborder-radius: 8px;
  4687. \t\twidth: 200px;
  4688. \t\taspect-ratio: 1 / 1; /* Conteneur carré */
  4689. \t\tbackground: #f8f9fa; /* Fond au cas où l'image ne charge pas */
  4690. \t}
  4692. \t/* Styles pour le bouton de filtre amélioré */
  4693. \t.filter-icon-circle {
  4694. \t\ttransition: all 0.3s ease;
  4695. \t}
  4697. \tbutton[data-bs-target=\"#filtersModal\"]:hover .filter-icon-circle {
  4698. \t\tbackground: linear-gradient(135deg, #ff8c00 0%, #ff7700 100%) !important;
  4699. \t\ttransform: rotate(15deg) scale(1.1);
  4700. \t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.5);
  4701. \t}
  4703. \tbutton[data-bs-target=\"#filtersModal\"]:hover {
  4704. \t\ttransform: translateY(-2px);
  4705. \t}
  4707. \tbutton[data-bs-target=\"#filtersModal\"]:active {
  4708. \t\ttransform: translateY(0);
  4709. \t}
  4711. \tbutton[data-bs-target=\"#filtersModal\"]:hover span {
  4712. \t\tcolor: #ffa200 !important;
  4713. \t}
  4715. \t/* Styles pour le modal de filtres */
  4716. \t#filtersModal .modal-body {
  4717. \t\tpadding: 1.5rem;
  4718. \t}
  4720. \t#filtersModal .modal-body::-webkit-scrollbar {
  4721. \t\twidth: 8px;
  4722. \t}
  4724. \t#filtersModal .modal-body::-webkit-scrollbar-track {
  4725. \t\tbackground: #f1f1f1;
  4726. \t\tborder-radius: 4px;
  4727. \t}
  4729. \t#filtersModal .modal-body::-webkit-scrollbar-thumb {
  4730. \t\tbackground: #ffa200;
  4731. \t\tborder-radius: 4px;
  4732. \t}
  4734. \t#filtersModal .modal-body::-webkit-scrollbar-thumb:hover {
  4735. \t\tbackground: #e69100;
  4736. \t}
  4738. \t#filtersModal .modal-footer {
  4739. \t\tbox-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  4740. \t}
  4742. \t/* Styles pour les filtres avancés */
  4743. \t.weight-range-area {
  4744. \t\tpadding: 15px 0;
  4745. \t}
  4747. \t.weight-inputs {
  4748. \t\tgap: 15px;
  4749. \t\talign-items: center;
  4750. \t}
  4752. \t.weight-input {
  4753. \t\tflex: 1;
  4754. \t}
  4756. \t.weight-input label {
  4757. \t\tdisplay: block;
  4758. \t\tmargin-bottom: 5px;
  4759. \t\tfont-weight: 500;
  4760. \t\tcolor: #333;
  4761. \t}
  4763. \t.weight-input input {
  4764. \t\twidth: 100%;
  4765. \t\tpadding: 8px 12px;
  4766. \t\tborder: 1px solid #ddd;
  4767. \t\tborder-radius: 4px;
  4768. \t\tfont-size: 14px;
  4769. \t}
  4771. \t.weight-input input:focus {
  4772. \t\toutline: none;
  4773. \t\tborder-color: #ffa200;
  4774. \t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  4775. \t}
  4777. \t/* Styles pour les filtres dynamiques */
  4778. \t.shop-list,
  4779. \t.color-list,
  4780. \t.size-list,
  4781. \t.material-list,
  4782. \t.condition-list {
  4783. \t\tmax-height: 200px;
  4784. \t\toverflow-y: auto;
  4785. \t\tpadding-right: 5px;
  4786. \t}
  4788. \t.shop-list::-webkit-scrollbar,
  4789. \t.color-list::-webkit-scrollbar,
  4790. \t.size-list::-webkit-scrollbar,
  4791. \t.material-list::-webkit-scrollbar,
  4792. \t.condition-list::-webkit-scrollbar {
  4793. \t\twidth: 6px;
  4794. \t}
  4796. \t.shop-list::-webkit-scrollbar-track,
  4797. \t.color-list::-webkit-scrollbar-track,
  4798. \t.size-list::-webkit-scrollbar-track,
  4799. \t.material-list::-webkit-scrollbar-track,
  4800. \t.condition-list::-webkit-scrollbar-track {
  4801. \t\tbackground: #f1f1f1;
  4802. \t\tborder-radius: 3px;
  4803. \t}
  4805. \t.shop-list::-webkit-scrollbar-thumb,
  4806. \t.color-list::-webkit-scrollbar-thumb,
  4807. \t.size-list::-webkit-scrollbar-thumb,
  4808. \t.material-list::-webkit-scrollbar-thumb,
  4809. \t.condition-list::-webkit-scrollbar-thumb {
  4810. \t\tbackground: #ffa200;
  4811. \t\tborder-radius: 3px;
  4812. \t}
  4814. \t.shop-list::-webkit-scrollbar-thumb:hover,
  4815. \t.color-list::-webkit-scrollbar-thumb:hover,
  4816. \t.size-list::-webkit-scrollbar-thumb:hover,
  4817. \t.material-list::-webkit-scrollbar-thumb:hover,
  4818. \t.condition-list::-webkit-scrollbar-thumb:hover {
  4819. \t\tbackground: #e69100;
  4820. \t}
  4822. \t/* Animation pour les filtres qui apparaissent */
  4823. \t.common-filter {
  4824. \t\ttransition: all 0.3s ease;
  4825. \t}
  4827. \t.common-filter[style*=\"display: none\"] {
  4828. \t\topacity: 0;
  4829. \t\ttransform: translateY(-10px);
  4830. \t}
  4832. \t.common-filter[style*=\"display: block\"] {
  4833. \t\topacity: 1;
  4834. \t\ttransform: translateY(0);
  4835. \t}
  4837. \t/* Styles pour les indicateurs de chargement */
  4838. \t.loading-indicator {
  4839. \t\tdisplay: inline-block;
  4840. \t\twidth: 20px;
  4841. \t\theight: 20px;
  4842. \t\tborder: 3px solid #f3f3f3;
  4843. \t\tborder-top: 3px solid #ffa200;
  4844. \t\tborder-radius: 50%;
  4845. \t\tanimation: spin 1s linear infinite;
  4846. \t}
  4848. \t@keyframes spin {
  4849. \t\t0% {
  4850. \t\t\ttransform: rotate(0deg);
  4851. \t\t}
  4852. \t\t100% {
  4853. \t\t\ttransform: rotate(360deg);
  4854. \t\t}
  4855. \t}
  4857. \t/* Styles pour le loader de chargement infini */
  4858. \t.infinite-loader {
  4859. \t\tdisplay: flex;
  4860. \t\tflex-direction: column;
  4861. \t\talign-items: center;
  4862. \t\tjustify-content: center;
  4863. \t\tpadding: 20px;
  4864. \t}
  4866. \t.loader-spinner {
  4867. \t\twidth: 50px;
  4868. \t\theight: 50px;
  4869. \t\tborder: 4px solid #f3f3f3;
  4870. \t\tborder-top: 4px solid #ffa200;
  4871. \t\tborder-radius: 50%;
  4872. \t\tanimation: spin 1s linear infinite;
  4873. \t}
  4875. \t#infiniteScrollLoader {
  4876. \t\tmin-height: 100px;
  4877. \t}
  4879. \t#noMoreProducts {
  4880. \t\tmin-height: 60px;
  4881. \t\tcolor: #6c757d;
  4882. \t}
  4884. \t#noMoreProducts i {
  4885. \t\tfont-size: 24px;
  4886. \t\tcolor: #28a745;
  4887. \t\tmargin-right: 8px;
  4888. \t}
  4890. \t/* Responsive pour les filtres */
  4891. \t@media(max-width: 768px) {
  4892. \t\t.weight-inputs {
  4893. \t\t\tflex-direction: column;
  4894. \t\t\tgap: 10px;
  4895. \t\t}
  4897. \t\t.weight-input {
  4898. \t\t\twidth: 100%;
  4899. \t\t}
  4901. \t\t.common-filter {
  4902. \t\t\tmargin-bottom: 20px;
  4903. \t\t}
  4905. \t\t.shop-list,
  4906. \t\t.color-list,
  4907. \t\t.size-list,
  4908. \t\t.material-list,
  4909. \t\t.condition-list {
  4910. \t\t\tmax-height: 150px;
  4911. \t\t}
  4912. \t}
  4913. \t/* Bouton toggle sidebar mobile */
  4914. \t.listing-sidebar-toggle {
  4915. \t\tborder-radius: 0.5rem;
  4916. \t\tpadding: 0.75rem;
  4917. \t\tfont-weight: 500;
  4918. \t\tdisplay: flex;
  4919. \t\talign-items: center;
  4920. \t\tjustify-content: center;
  4921. \t}
  4923. \t.listing-sidebar-toggle .toggle-icon {
  4924. \t\ttransition: transform 0.3s ease;
  4925. \t\tdisplay: inline-block;
  4926. \t}
  4928. \t/* État fermé (par défaut) */
  4929. \t.listing-sidebar-toggle[aria-expanded=\"false\"] .toggle-icon,
  4930. \t.listing-sidebar-toggle.collapsed .toggle-icon {
  4931. \t\ttransform: rotate(0deg);
  4932. \t}
  4934. \t/* État ouvert */
  4935. \t.listing-sidebar-toggle[aria-expanded=\"true\"] .toggle-icon,
  4936. \t.listing-sidebar-toggle:not(.collapsed) .toggle-icon {
  4937. \t\ttransform: rotate(180deg);
  4938. \t}
  4940. \t/* Sidebar mobile */
  4941. \t@media(max-width: 767.98px) {
  4942. \t\t#listingSidebarCollapse {
  4943. \t\t\tmargin-bottom: 1rem;
  4944. \t\t}
  4945. \t}
  4946. </style>{% endblock %}{% block javascripts %}
  4947. <script>
  4948. // === Script isolé : chargement de plus de produits (comme les boutiques) ===
  4949. var currentPage = {{ currentPage }};
  4950. var totalPages = {{ totalPages }};
  4951. var isLoading = false;
  4953. function loadMoreProducts() {
  4954.     if (isLoading || currentPage >= totalPages) return;
  4956.     isLoading = true;
  4957.     var btn = document.getElementById('loadMoreBtn');
  4958.     var productsContainer = document.getElementById('productsContainer');
  4960.     if (!btn || !productsContainer) {
  4961.         isLoading = false;
  4962.         return;
  4963.     }
  4965.     var originalText = btn.innerHTML;
  4966.     btn.disabled = true;
  4967.     btn.innerHTML = '<span class=\"spinner-border spinner-border-sm me-2\"></span>Chargement...';
  4969.     currentPage++;
  4970.     var url = new URL(window.location.href);
  4971.     url.searchParams.set('page', currentPage);
  4973.     fetch(url.toString(), {
  4974.         headers: { 'X-Requested-With': 'XMLHttpRequest' }
  4975.     })
  4976.     .then(function(response) { return response.json(); })
  4977.     .then(function(data) {
  4978.         if (data.success && data.products) {
  4979.             var tempDiv = document.createElement('div');
  4980.             tempDiv.innerHTML = data.products;
  4982.             var newProducts = tempDiv.querySelectorAll('.col-lg-4, .col-lg-3, [class*=\"col-lg\"]');
  4983.             newProducts.forEach(function(product) {
  4984.                 productsContainer.appendChild(product);
  4985.             });
  4987.             currentPage = data.pagination.currentPage;
  4988.             totalPages = data.pagination.totalPages;
  4990.             // Initialiser les images et events pour les nouveaux produits
  4991.             if (typeof initializeProductImages === 'function') initializeProductImages(tempDiv);
  4992.             if (typeof initializeProductEventListeners === 'function') initializeProductEventListeners(tempDiv);
  4994.             if (currentPage >= totalPages) {
  4995.                 document.getElementById('loadMoreContainer').style.display = 'none';
  4996.             } else {
  4997.                 btn.disabled = false;
  4998.                 btn.innerHTML = originalText;
  4999.             }
  5000.         } else {
  5001.             document.getElementById('loadMoreContainer').style.display = 'none';
  5002.         }
  5003.         isLoading = false;
  5004.     })
  5005.     .catch(function(error) {
  5006.         btn.disabled = false;
  5007.         btn.innerHTML = originalText;
  5008.         isLoading = false;
  5009.     });
  5010. }
  5011. </script>
  5013. <script>
  5014. \t// Variables globales pour la navigation des images
  5015. const productImages = {};
  5016. const currentImageIndex = {};
  5018. // Variables pour le chargement infini (utilise les var globales définies au-dessus)
  5019. let hasMoreProducts = totalPages > currentPage;
  5021. let currentFilters = {
  5022. category: '{{ currentCategory ?? '' }}',
  5023. brand: '{{ currentBrand ?? '' }}',
  5024. sort: '{{ currentSort ?? 'newest' }}',
  5025. priceMin: '{{ priceMin ?? '' }}',
  5026. priceMax: '{{ priceMax ?? '' }}'
  5027. };
  5029. // Modal style eBay pour remplacer les alertes - Définir AVANT son utilisation
  5030. function showEbayModal(message, type = 'info') {
  5031. const modalId = 'ebayAlertModal';
  5032. let existingModal = document.getElementById(modalId);
  5033. if (existingModal) {
  5034. existingModal.remove();
  5035. }
  5037. const modal = document.createElement('div');
  5038. modal.id = modalId;
  5039. modal.className = 'modal fade';
  5040. modal.setAttribute('tabindex', '-1');
  5041. modal.setAttribute('aria-labelledby', 'ebayAlertModalLabel');
  5042. modal.setAttribute('aria-hidden', 'true');
  5044. // Définir les couleurs et icônes selon le type
  5045. let iconClass = 'ti-info-alt';
  5046. let iconColor = '#0064D2';
  5047. let title = 'Information';
  5049. switch (type) {
  5050. case 'success': iconClass = 'ti-check-box';
  5051. iconColor = '#0A7C42';
  5052. title = 'Succès';
  5053. break;
  5054. case 'error':
  5055. case 'danger': iconClass = 'ti-alert';
  5056. iconColor = '#D32F2F';
  5057. title = 'Erreur';
  5058. break;
  5059. case 'warning': iconClass = 'ti-alert-triangle';
  5060. iconColor = '#F57C00';
  5061. title = 'Attention';
  5062. break;
  5063. default: iconClass = 'ti-info-alt';
  5064. iconColor = '#0064D2';
  5065. title = 'Information';
  5066. }
  5068. modal.innerHTML = `
  5069. <div class=\"modal-dialog modal-dialog-centered\">
  5070. <div class=\"modal-content\" style=\"border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);\">
  5071. <div class=\"modal-header\" style=\"border-bottom: 1px solid #e0e0e0; padding: 20px 24px;\">
  5072. <h5 class=\"modal-title\" id=\"ebayAlertModalLabel\" style=\"font-weight: 600; font-size: 18px; color: #333;\">
  5073. <i class=\"\${iconClass}\" style=\"color: \${iconColor}; margin-right: 8px;\"></i>\${title}
  5074. </h5>
  5075. <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" style=\"margin: 0;\"></button>
  5076. </div>
  5077. <div class=\"modal-body\" style=\"padding: 24px; text-align: center;\">
  5078. <p style=\"margin: 0; font-size: 16px; color: #333; line-height: 1.5;\">\${message}</p>
  5079. </div>
  5080. <div class=\"modal-footer\" style=\"border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: center;\">
  5081. <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;\">
  5082. OK
  5083. </button>
  5084. </div>
  5085. </div>
  5086. </div>
  5087. `;
  5089. document.body.appendChild(modal);
  5090. const bsModal = new bootstrap.Modal(modal);
  5091. bsModal.show();
  5093. // Supprimer le modal du DOM après fermeture
  5094. modal.addEventListener('hidden.bs.modal', function () {
  5095. modal.remove();
  5096. });
  5097. }
  5099. // Rendre la fonction globale
  5100. window.showEbayModal = showEbayModal;
  5102. document.addEventListener('DOMContentLoaded', function () { // Initialisation des données d'images pour chaque produit
  5103. {% for product in products %}
  5104. {% set allImages = product.images|default([]) %}
  5105. {% if product.variants is defined %}
  5106. \t{% for variant in product.variants %}
  5107. \t\t{% if variant.isActive and variant.images is defined %}
  5108. \t\t\t{% for variantImg in variant.images %}
  5109. \t\t\t\t{% set allImages = allImages|merge([variantImg]) %}
  5110. \t\t\t{% endfor %}
  5111. \t\t{% endif %}
  5112. \t{% endfor %}
  5113. {% endif %}
  5114. {% if allImages|length > 0 %}productImages[{{ product.id }}] = [{% for img in allImages %}'{{ asset(img) }}'{% if not loop.last %},{% endif %}{% endfor %}];
  5115. currentImageIndex[{{ product.id }}] = 0;
  5116. console.log('Initialized product {{ product.id }} with images:', productImages[{{ product.id }}]);{% endif %}{% endfor %}
  5118. // Gestion du panier
  5119. const cartButtons = document.querySelectorAll('.add-to-cart');
  5120. cartButtons.forEach(button => {
  5121. button.addEventListener('click', function () {
  5122. const productId = this.getAttribute('data-product-id');
  5123. const qty = this.getAttribute('data-qty');
  5125. fetch('{{ path(\"ui_cart_add\") }}', {
  5126. method: 'POST',
  5127. headers: {
  5128. 'Content-Type': 'application/x-www-form-urlencoded'
  5129. },
  5130. body: 'productId=' + productId + '&qty=' + qty
  5131. }).then(response => response.json()).then(data => {
  5132. if (data.ok) {
  5133. showEbayModal('Produit ajouté au panier !', 'success');
  5134. // Mettre à jour le compteur du panier si présent
  5135. const cartBadge = document.querySelector('.cart-badge');
  5136. if (cartBadge) {
  5137. cartBadge.textContent = data.totalQty;
  5138. }
  5139. } else {
  5140. showEbayModal(data.message || 'Erreur lors de l\\'ajout au panier', 'error');
  5141. }
  5142. }).catch(error => {
  5143. console.error('Erreur:', error);
  5144. showEbayModal('Erreur lors de l\\'ajout au panier', 'error');
  5145. });
  5146. });
  5147. });
  5148. });
  5150. // Fonctions pour la navigation des images
  5151. window.showImageNav = function(productId) {
  5152. const leftBtn = document.getElementById('img-left-' + productId);
  5153. const rightBtn = document.getElementById('img-right-' + productId);
  5154. const indicators = document.getElementById('img-indicators-' + productId);
  5156. if (leftBtn) {
  5157. leftBtn.style.display = 'flex';
  5158. }
  5160. if (rightBtn) {
  5161. rightBtn.style.display = 'flex';
  5162. }
  5164. if (indicators) {
  5165. indicators.style.display = 'flex';
  5166. }
  5167. };
  5169. window.hideImageNav = function(productId) {
  5170. const leftBtn = document.getElementById('img-left-' + productId);
  5171. const rightBtn = document.getElementById('img-right-' + productId);
  5172. const indicators = document.getElementById('img-indicators-' + productId);
  5174. if (leftBtn) {
  5175. leftBtn.style.display = 'none';
  5176. }
  5178. if (rightBtn) {
  5179. rightBtn.style.display = 'none';
  5180. }
  5182. if (indicators) {
  5183. indicators.style.display = 'none';
  5184. }
  5185. };
  5187. window.showImage = function(productId, imageIndex) {
  5188. if (! productImages[productId] || ! productImages[productId][imageIndex]) {
  5189. console.log('Image not found for product', productId, 'index', imageIndex);
  5190. return;
  5191. }
  5193. const img = document.getElementById('main-img-' + productId);
  5194. if (img) {
  5195. console.log('Changing image to:', productImages[productId][imageIndex]);
  5197. // Force le rechargement de l'image
  5198. img.style.opacity = '0.5';
  5199. setTimeout(() => {
  5200. img.src = productImages[productId][imageIndex];
  5201. img.style.opacity = '1';
  5202. currentImageIndex[productId] = imageIndex;
  5203. updateIndicators(productId);
  5204. }, 100);
  5205. } else {
  5206. console.log('Image element not found:', 'main-img-' + productId);
  5207. }
  5208. };
  5210. window.nextImage = function(productId) {
  5211. if (! productImages[productId]) {
  5212. console.log('No images for product', productId);
  5213. return;
  5214. }
  5216. const nextIndex = (currentImageIndex[productId] + 1) % productImages[productId].length;
  5217. showImage(productId, nextIndex);
  5218. };
  5220. window.prevImage = function(productId) {
  5221. if (! productImages[productId]) {
  5222. console.log('No images for product', productId);
  5223. return;
  5224. }
  5226. const prevIndex = currentImageIndex[productId] === 0 ? productImages[productId].length - 1 : currentImageIndex[productId] - 1;
  5227. showImage(productId, prevIndex);
  5228. };
  5230. function updateIndicators(productId) {
  5231. const indicators = document.querySelectorAll('#img-indicators-' + productId + ' .indicator');
  5232. indicators.forEach((indicator, index) => {
  5233. indicator.classList.toggle('active', index === currentImageIndex[productId]);
  5234. });
  5235. }
  5237. // Fonction pour tracker la vue d'un produit
  5238. function trackProductView(productId) {
  5239. fetch (`/api/track-product-view/\${productId}`, {
  5240. method: 'POST',
  5241. headers: {
  5242. 'Content-Type': 'application/json',
  5243. 'X-Requested-With': 'XMLHttpRequest'
  5244. }
  5245. }).then(response => response.json()).then(data => {
  5246. if (data.success) {
  5247. console.log (`Vue enregistrée pour le produit \${productId}:`, data.viewCount);
  5248. }
  5249. }).catch(error => {
  5250. console.error('Erreur lors du tracking:', error);
  5251. });
  5252. }
  5254. // Fonction pour tracker la vue d'une boutique
  5255. function trackShopView(shopId) {
  5256. fetch (`/api/track-shop-view/\${shopId}`, {
  5257. method: 'POST',
  5258. headers: {
  5259. 'Content-Type': 'application/json',
  5260. 'X-Requested-With': 'XMLHttpRequest'
  5261. }
  5262. }).then(response => response.json()).then(data => {
  5263. if (data.success) {
  5264. console.log (`Vue enregistrée pour la boutique \${shopId}:`, data.viewCount);
  5265. }
  5266. }).catch(error => {
  5267. console.error('Erreur lors du tracking:', error);
  5268. });
  5269. }
  5271. // Ajouter le tracking aux événements existants
  5272. document.addEventListener('DOMContentLoaded', function () { // Tracking au survol des produits (avec délai)
  5273. const productCards = document.querySelectorAll('.single_product_item');
  5275. productCards.forEach(card => {
  5276. const productId = card.dataset.productId;
  5277. const shopId = card.dataset.shopId;
  5279. if (productId) {
  5280. let hoverTimeout;
  5282. card.addEventListener('mouseenter', () => { // Tracker la vue du produit après 2 secondes de survol
  5283. hoverTimeout = setTimeout(() => {
  5284. trackProductView(productId);
  5285. }, 2000);
  5286. });
  5288. card.addEventListener('mouseleave', () => {
  5289. clearTimeout(hoverTimeout);
  5290. });
  5292. // Tracking au clic sur le lien du produit
  5293. const productLink = card.querySelector('.product_img a');
  5294. if (productLink) {
  5295. productLink.addEventListener('click', () => {
  5296. trackProductView(productId);
  5297. });
  5298. }
  5299. }
  5301. // Tracking au clic sur le lien de la boutique
  5302. if (shopId) {
  5303. const shopLink = card.querySelector('.shop-link');
  5304. if (shopLink) {
  5305. shopLink.addEventListener('click', () => {
  5306. trackShopView(shopId);
  5307. });
  5308. }
  5309. }
  5310. });
  5311. });
  5312. </script>
  5314. <script>
  5315. \t// Système de filtrage AJAX avancé
  5316. // currentFilters est déjà déclaré plus haut, on met juste à jour les valeurs
  5317. if (typeof currentFilters !== 'undefined') { // Mettre à jour les valeurs existantes
  5318. currentFilters.category = '{{ currentCategory }}';
  5319. currentFilters.brand = '{{ currentBrand }}';
  5320. currentFilters.condition = '{{ currentCondition }}';
  5321. currentFilters.sort = '{{ currentSort }}';
  5322. currentFilters.priceMin = '{{ priceMin }}';
  5323. currentFilters.priceMax = '{{ priceMax }}';
  5324. currentFilters.page = {{ currentPage }};
  5325. currentFilters.q = currentFilters.q || '{{ app.request.query.get('q', '') }}';
  5326. // Ajouter les nouveaux filtres depuis l'URL s'ils n'existent pas
  5327. if (! currentFilters.shop) 
  5328. currentFilters.shop = '{{ app.request.query.get('shop', '') }}';
  5330. if (! currentFilters.featured) 
  5331. currentFilters.featured = '{{ app.request.query.get('featured', '') }}';
  5333. if (! currentFilters.digital) 
  5334. currentFilters.digital = '{{ app.request.query.get('digital', '') }}';
  5336. if (! currentFilters.stockStatus) 
  5337. currentFilters.stockStatus = '{{ app.request.query.get('stock_status', '') }}';
  5339. if (! currentFilters.ratingMin) 
  5340. currentFilters.ratingMin = '{{ app.request.query.get('rating_min', '') }}';
  5342. if (! currentFilters.rating) 
  5343. currentFilters.rating = '{{ app.request.query.get('rating_min', '') }}';
  5345. if (! currentFilters.weightMin) 
  5346. currentFilters.weightMin = '{{ app.request.query.get('weight_min', '') }}';
  5348. if (! currentFilters.weightMax) 
  5349. currentFilters.weightMax = '{{ app.request.query.get('weight_max', '') }}';
  5351. if (! currentFilters.color) 
  5352. currentFilters.color = '{{ app.request.query.get('color', '') }}';
  5354. if (! currentFilters.size) 
  5355. currentFilters.size = '{{ app.request.query.get('size', '') }}';
  5357. if (! currentFilters.material) 
  5358. currentFilters.material = '{{ app.request.query.get('material', '') }}';
  5360. if (! currentFilters.condition) 
  5361. currentFilters.condition = '{{ app.request.query.get('condition', '') }}';
  5363. if (! currentFilters.availability) 
  5364. currentFilters.availability = '{{ app.request.query.get('availability', '') }}';
  5366. } else { // Si currentFilters n'existe pas, le créer avec les valeurs de l'URL
  5367. let currentFilters = {
  5368. category: '{{ currentCategory ?? '' }}',
  5369. brand: '{{ currentBrand ?? '' }}',
  5370. condition: '{{ currentCondition ?? '' }}',
  5371. sort: '{{ currentSort ?? 'newest' }}',
  5372. priceMin: '{{ app.request.query.get('price_min', '') }}',
  5373. priceMax: '{{ app.request.query.get('price_max', '') }}',
  5374. page: {{ currentPage }},
  5375. q: '{{ app.request.query.get('q', '') }}',
  5376. // Nouveaux filtres depuis l'URL
  5377. shop: '{{ app.request.query.get('shop', '') }}',
  5378. featured: '{{ app.request.query.get('featured', '') }}',
  5379. digital: '{{ app.request.query.get('digital', '') }}',
  5380. stockStatus: '{{ app.request.query.get('stock_status', '') }}',
  5381. ratingMin: '{{ app.request.query.get('rating_min', '') }}',
  5382. rating: '{{ app.request.query.get('rating_min', '') }}',
  5383. weightMin: '{{ app.request.query.get('weight_min', '') }}',
  5384. weightMax: '{{ app.request.query.get('weight_max', '') }}',
  5385. color: '{{ app.request.query.get('color', '') }}',
  5386. size: '{{ app.request.query.get('size', '') }}',
  5387. material: '{{ app.request.query.get('material', '') }}',
  5388. condition: '{{ app.request.query.get('condition', '') }}',
  5389. availability: '{{ app.request.query.get('availability', '') }}'
  5390. };
  5391. }
  5393. // Fonction pour appliquer les filtres
  5394. function applyFilters() {
  5395. const url = new URL('{{ path('ui_api_products_filter') }}', window.location.origin);
  5397. // Ajouter les paramètres
  5398. Object.keys(currentFilters).forEach(key => {
  5399. if (currentFilters[key] && currentFilters[key] !== '') { // Mapper les clés pour l'API
  5400. let apiKey = key;
  5401. if (key === 'priceMin') {
  5402. apiKey = 'price_min';
  5403. } else if (key === 'priceMax') {
  5404. apiKey = 'price_max';
  5405. } else if (key === 'ratingMin') {
  5406. apiKey = 'rating_min';
  5407. } else if (key === 'weightMin') {
  5408. apiKey = 'weight_min';
  5409. } else if (key === 'weightMax') {
  5410. apiKey = 'weight_max';
  5411. } else if (key === 'stockStatus') {
  5412. apiKey = 'stock_status';
  5413. }
  5415. url.searchParams.set(apiKey, currentFilters[key]);
  5416. }
  5417. });
  5419. // Afficher le loader
  5420. document.getElementById('productsContainer').innerHTML = '<div class=\"col-12 text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Chargement...</div>';
  5422. // Faire la requête AJAX
  5423. fetch(url).then(response => response.json()).then(data => {
  5424. if (data.success) { // Mettre à jour les produits
  5425. document.getElementById('productsContainer').innerHTML = data.products;
  5427. // Mettre à jour la pagination
  5428. currentPage = data.pagination.currentPage;
  5429. totalPages = data.pagination.totalPages;
  5430. hasMoreProducts = currentPage < totalPages;
  5432. // Préserver l'état des filtres statiques avant la mise à jour
  5433. const preservedFilters = {
  5434. featured: currentFilters.featured,
  5435. digital: currentFilters.digital,
  5436. availability: currentFilters.availability,
  5437. rating: currentFilters.rating || currentFilters.ratingMin
  5438. };
  5440. // Mettre à jour les marques disponibles (toujours afficher toutes)
  5441. updateAvailableBrands(data.availableBrands || []);
  5443. // Mettre à jour les conditions disponibles (toujours afficher toutes)
  5444. updateAvailableConditions(data.availableConditions || []);
  5446. // Mettre à jour les boutiques disponibles (toujours afficher toutes)
  5447. updateAvailableShops(data.availableShops || []);
  5449. // Mettre à jour les attributs disponibles (toujours afficher tous)
  5450. updateAvailableAttributes(data.availableAttributes || {});
  5452. // Restaurer l'état des filtres statiques après la mise à jour
  5453. restoreStaticFiltersState(preservedFilters);
  5455. // Réinitialiser les filtres depuis currentFilters pour s'assurer qu'ils sont tous cochés
  5456. if (typeof initializeFiltersFromURL === 'function') {
  5457. initializeFiltersFromURL();
  5458. }
  5460. // Mettre à jour l'URL
  5461. updateURL();
  5463. // Mettre à jour l'affichage du bouton
  5464. updateLoadMoreButton();
  5466. // Réinitialiser les event listeners pour les nouveaux produits
  5467. const tempDiv = document.createElement('div');
  5468. tempDiv.innerHTML = data.products;
  5469. initializeProductEventListeners(tempDiv);
  5470. initializeProductImages(tempDiv);
  5472. // Mettre à jour les filtres actifs
  5473. if (typeof updateActiveFilters === 'function') {
  5474. updateActiveFilters();
  5475. }
  5476. }
  5477. }).catch(error => {
  5478. console.error('Erreur lors du filtrage:', error);
  5479. document.getElementById('productsContainer').innerHTML = '<div class=\"col-12 text-center text-danger\">Erreur lors du chargement des produits</div>';
  5480. });
  5481. }
  5483. // Exposer la fonction globalement
  5484. window.applyFilters = applyFilters;
  5486. // Fonction pour appliquer le tri
  5487. function applySorting() {
  5488. currentFilters.sort = document.getElementById('sortSelect').value;
  5489. currentFilters.page = 1;
  5490. applyFilters();
  5491. }
  5493. // Fonction pour appliquer le filtre de prix
  5494. function applyPriceFilter() {
  5495. currentFilters.priceMin = document.getElementById('priceMin').value;
  5496. currentFilters.priceMax = document.getElementById('priceMax').value;
  5497. currentFilters.page = 1;
  5498. applyFilters();
  5499. }
  5501. // Fonction pour appliquer le filtre de poids
  5502. function applyWeightFilter() {
  5503. currentFilters.weightMin = document.getElementById('weightMin').value;
  5504. currentFilters.weightMax = document.getElementById('weightMax').value;
  5505. currentFilters.page = 1;
  5506. applyFilters();
  5507. }
  5509. // Fonction pour changer de page
  5510. function changePage(page) {
  5511. currentFilters.page = page;
  5512. applyFilters();
  5513. }
  5515. // Fonction pour mettre à jour les marques disponibles
  5516. function updateAvailableBrands(brands) {
  5517. const brandsFilter = document.getElementById('brandsFilter');
  5518. const brandList = document.getElementById('brandList');
  5519. const currentBrandValue = currentFilters.brand || '';
  5521. // Toujours afficher le filtre des marques
  5522. brandsFilter.style.display = 'block';
  5524. // Si pas de marques disponibles, garder les marques existantes ou afficher un message
  5525. if (brands.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  5526. if (brandList && brandList.children.length > 0) { // Juste mettre à jour les états cochés
  5527. const existingRadios = brandList.querySelectorAll('input[name=\"brand\"]');
  5528. existingRadios.forEach(radio => {
  5529. if (currentBrandValue && radio.value === currentBrandValue) {
  5530. radio.checked = true;
  5531. } else if (! currentBrandValue && radio.id === 'all-brands') {
  5532. radio.checked = true;
  5533. } else {
  5534. radio.checked = false;
  5535. }
  5536. });
  5537. return; // Garder les marques existantes
  5538. }
  5539. // Sinon, afficher un message
  5540. brandList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune marque disponible</span></li>';
  5541. return;
  5542. }
  5544. let html = '';
  5545. const isAllSelected = ! currentBrandValue || currentBrandValue === '';
  5546. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-brands\" name=\"brand\" \${
  5547. isAllSelected ? 'checked' : ''
  5548. }><label for=\"all-brands\">Toutes les marques</label></li>`;
  5550. brands.forEach(brand => {
  5551. const isSelected = currentBrandValue === brand.slug;
  5552. html += `<li class=\"filter-list\">
  5553.                 <input class=\"pixel-radio\" type=\"radio\" id=\"brand-\${
  5554. brand.id
  5555. }\" name=\"brand\" value=\"\${
  5556. brand.slug
  5557. }\" \${
  5558. isSelected ? 'checked' : ''
  5559. }>
  5560.                 <label for=\"brand-\${
  5561. brand.id
  5562. }\">\${
  5563. brand.name
  5564. }<span>(\${
  5565. brand.productCount
  5566. })</span></label>
  5567.             </li>`;
  5568. });
  5570. brandList.innerHTML = html;
  5572. // Ajouter les event listeners
  5573. brandList.querySelectorAll('input[name=\"brand\"]').forEach(radio => {
  5574. radio.addEventListener('change', function () {
  5575. if (this.id === 'all-brands') {
  5576. currentFilters.brand = '';
  5577. } else {
  5578. currentFilters.brand = this.value;
  5579. } currentFilters.page = 1;
  5580. applyFilters();
  5581. });
  5582. });
  5583. }
  5585. // Fonction pour mettre à jour les conditions disponibles
  5586. function updateAvailableConditions(conditions) {
  5587. const conditionList = document.getElementById('conditionList');
  5588. const currentConditionValue = currentFilters.condition || '';
  5590. // Toujours garder le contenu statique et juste mettre à jour les états cochés
  5591. if (conditionList && conditionList.children.length > 0) {
  5592. const existingRadios = conditionList.querySelectorAll('input[name=\"condition\"]');
  5593. existingRadios.forEach(radio => {
  5594. if (currentConditionValue && radio.value === currentConditionValue) {
  5595. radio.checked = true;
  5596. } else if (! currentConditionValue && radio.id === 'all-conditions') {
  5597. radio.checked = true;
  5598. } else {
  5599. radio.checked = false;
  5600. }
  5601. });
  5602. return; // Garder les conditions existantes
  5603. }
  5605. // Si pas de contenu statique, générer dynamiquement
  5606. if (conditions.length === 0) {
  5607. conditionList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune condition disponible</span></li>';
  5608. return;
  5609. }
  5611. let html = '';
  5612. const isAllSelected = ! currentConditionValue || currentConditionValue === '';
  5613. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-conditions\" name=\"condition\" \${
  5614. isAllSelected ? 'checked' : ''
  5615. }><label for=\"all-conditions\">Toutes les conditions</label></li>`;
  5617. conditions.forEach(condition => {
  5618. const isSelected = currentConditionValue === condition.slug;
  5619. html += `<li class=\"filter-list\">
  5620.                 <input class=\"pixel-radio\" type=\"radio\" id=\"condition-\${
  5621. condition.id
  5622. }\" name=\"condition\" value=\"\${
  5623. condition.slug
  5624. }\" \${
  5625. isSelected ? 'checked' : ''
  5626. }>
  5627.                 <label for=\"condition-\${
  5628. condition.id
  5629. }\">\${
  5630. condition.name
  5631. }<span>(\${
  5632. condition.productCount
  5633. })</span></label>
  5634.             </li>`;
  5635. });
  5637. conditionList.innerHTML = html;
  5639. // Ajouter les event listeners
  5640. conditionList.querySelectorAll('input[name=\"condition\"]').forEach(radio => {
  5641. radio.addEventListener('change', function () {
  5642. if (this.id === 'all-conditions') {
  5643. currentFilters.condition = '';
  5644. } else {
  5645. currentFilters.condition = this.value;
  5646. } currentFilters.page = 1;
  5647. applyFilters();
  5648. });
  5649. });
  5650. }
  5652. // Fonction pour mettre à jour les boutiques disponibles
  5653. function updateAvailableShops(shops) {
  5654. const shopsFilter = document.getElementById('shopsFilter');
  5655. const shopList = document.getElementById('shopList');
  5656. const currentShopValue = currentFilters.shop || '';
  5658. // Toujours afficher le filtre des boutiques
  5659. shopsFilter.style.display = 'block';
  5661. // Si pas de boutiques disponibles, afficher un message ou garder les boutiques existantes
  5662. if (shops.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  5663. if (shopList && shopList.children.length > 0) {
  5664. return; // Garder les boutiques existantes
  5665. }
  5666. // Sinon, afficher un message
  5667. shopList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucune boutique disponible</span></li>';
  5668. return;
  5669. }
  5671. let html = '';
  5672. const isAllSelected = ! currentShopValue || currentShopValue === '';
  5673. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-shops\" name=\"shop\" \${
  5674. isAllSelected ? 'checked' : ''
  5675. }><label for=\"all-shops\">Toutes les boutiques</label></li>`;
  5677. shops.forEach(shop => {
  5678. const isSelected = currentShopValue === shop.slug;
  5679. html += `<li class=\"filter-list\">
  5680.                 <input class=\"pixel-radio\" type=\"radio\" id=\"shop-\${
  5681. shop.id
  5682. }\" name=\"shop\" value=\"\${
  5683. shop.slug
  5684. }\" \${
  5685. isSelected ? 'checked' : ''
  5686. }>
  5687.                 <label for=\"shop-\${
  5688. shop.id
  5689. }\">\${
  5690. shop.name
  5691. }<span>(\${
  5692. shop.productCount
  5693. })</span></label>
  5694.             </li>`;
  5695. });
  5697. shopList.innerHTML = html;
  5699. // Mettre à jour aussi le modal
  5700. const modalShopList = document.getElementById('modalShopList');
  5701. if (modalShopList) {
  5702. 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-');
  5703. }
  5705. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  5706. shopList.querySelectorAll('input[name=\"shop\"]').forEach(radio => {
  5707. radio.addEventListener('change', function () {
  5708. if (this.id === 'all-shops') {
  5709. currentFilters.shop = '';
  5710. } else {
  5711. currentFilters.shop = this.value;
  5712. } currentFilters.page = 1;
  5713. applyFilters();
  5714. });
  5715. });
  5716. }
  5718. // Fonction pour mettre à jour les attributs disponibles
  5719. function updateAvailableAttributes(attributes) {
  5720. // Toujours afficher tous les filtres d'attributs, même s'ils ne sont pas pertinents
  5721. // Couleurs
  5722. updateAttributeFilter('colors', attributes.colors, 'colorList', 'colorsFilter');
  5724. // Tailles
  5725. updateAttributeFilter('sizes', attributes.sizes, 'sizeList', 'sizesFilter');
  5727. // Matériaux
  5728. updateAttributeFilter('materials', attributes.materials, 'materialList', 'materialsFilter');
  5730. // Conditions
  5731. updateAttributeFilter('conditions', attributes.conditions, 'conditionList', 'conditionsFilter');
  5732. }
  5734. // Fonction générique pour mettre à jour les filtres d'attributs
  5735. function updateAttributeFilter(attributeType, attributes, listId, filterId) {
  5736. const filter = document.getElementById(filterId);
  5737. const list = document.getElementById(listId);
  5738. const currentValue = currentFilters[attributeType] || '';
  5740. // Toujours afficher les filtres d'attributs
  5741. filter.style.display = 'block';
  5743. // Si pas d'attributs disponibles, afficher un message ou garder les attributs existants
  5744. if (! attributes || attributes.length === 0) { // Ne pas réinitialiser si la liste existe déjà et a du contenu
  5745. if (list && list.children.length > 0) {
  5746. return; // Garder les attributs existants
  5747. }
  5748. // Sinon, afficher un message
  5749. list.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Aucun attribut disponible</span></li>';
  5750. return;
  5751. }
  5753. let html = '';
  5754. const isAllSelected = ! currentValue || currentValue === '';
  5755. html += `<li class=\"filter-list\"><input class=\"pixel-radio\" type=\"radio\" id=\"all-\${attributeType}\" name=\"\${attributeType}\" \${
  5756. isAllSelected ? 'checked' : ''
  5757. }><label for=\"all-\${attributeType}\">Tous</label></li>`;
  5759. attributes.forEach(attr => {
  5760. const isSelected = currentValue === attr.value;
  5761. html += `<li class=\"filter-list\">
  5762.                 <input class=\"pixel-radio\" type=\"radio\" id=\"\${attributeType}-\${
  5763. attr.value
  5764. }\" name=\"\${attributeType}\" value=\"\${
  5765. attr.value
  5766. }\" \${
  5767. isSelected ? 'checked' : ''
  5768. }>
  5769.                 <label for=\"\${attributeType}-\${
  5770. attr.value
  5771. }\">\${
  5772. attr.value
  5773. }<span>(\${
  5774. attr.count
  5775. })</span></label>
  5776.             </li>`;
  5777. });
  5779. list.innerHTML = html;
  5781. // Mettre à jour aussi le modal (si l'élément existe)
  5782. const modalListId = 'modal' + listId.charAt(0).toUpperCase() + listId.slice(1); // modalColorList, modalSizeList, etc.
  5783. const modalList = document.getElementById(modalListId);
  5784. if (modalList) { // Adapter le HTML pour le modal (changer les IDs et names)
  5785. 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}-`);
  5786. modalList.innerHTML = modalHtml;
  5787. }
  5789. // Ajouter les event listeners (seulement pour la sidebar, le modal gère ses propres listeners)
  5790. list.querySelectorAll (`input[name=\"\${attributeType}\"]`).forEach(radio => {
  5791. radio.addEventListener('change', function () {
  5792. if (this.id === `all-\${attributeType}`) {
  5793. currentFilters[attributeType] = '';
  5794. } else {
  5795. currentFilters[attributeType] = this.value;
  5796. } currentFilters.page = 1;
  5797. applyFilters();
  5798. });
  5799. });
  5800. } else {
  5801. filter.style.display = 'none';
  5802. }
  5803. }
  5805. // Fonction pour mettre à jour l'URL
  5806. function updateURL () {
  5807. const url = new URL(window.location);
  5809. // Supprimer les anciens paramètres
  5810. const paramsToRemove = [
  5811. 'category',
  5812. 'brand',
  5813. 'sort',
  5814. 'price_min',
  5815. 'price_max',
  5816. 'page',
  5817. 'shop',
  5818. 'featured',
  5819. 'digital',
  5820. 'stock_status',
  5821. 'rating_min',
  5822. 'weight_min',
  5823. 'weight_max',
  5824. 'color',
  5825. 'size',
  5826. 'material',
  5827. 'condition',
  5828. 'availability'
  5829. ];
  5830. paramsToRemove.forEach(param => url.searchParams.delete(param));
  5832. // Ajouter les nouveaux paramètres
  5833. Object.keys(currentFilters).forEach(key => {
  5834. if (currentFilters[key]) {
  5835. url.searchParams.set(key, currentFilters[key]);
  5836. }
  5837. });
  5839. // Mettre à jour l'URL sans recharger la page
  5840. window.history.pushState({}, '', url);
  5841. }
  5843. // Fonction pour restaurer l'état des filtres statiques
  5844. function restoreStaticFiltersState (preservedFilters) { // Restaurer featured
  5845. if (preservedFilters.featured) {
  5846. const featuredInput = document.querySelector (`input[name=\"featured\"][value=\"\${
  5847. preservedFilters.featured
  5848. }\"]`);
  5849. if (featuredInput) {
  5850. featuredInput.checked = true;
  5851. } else {
  5852. const featuredAll = document.getElementById('featured-all');
  5853. if (featuredAll) 
  5854. featuredAll.checked = true;
  5856. }
  5857. } else {
  5858. const featuredAll = document.getElementById('featured-all');
  5859. if (featuredAll) 
  5860. featuredAll.checked = true;
  5862. }
  5864. // Restaurer digital
  5865. if (preservedFilters.digital) {
  5866. const digitalInput = document.querySelector (`input[name=\"digital\"][value=\"\${
  5867. preservedFilters.digital
  5868. }\"]`);
  5869. if (digitalInput) {
  5870. digitalInput.checked = true;
  5871. } else {
  5872. const digitalAll = document.getElementById('digital-all');
  5873. if (digitalAll) 
  5874. digitalAll.checked = true;
  5876. }
  5877. } else {
  5878. const digitalAll = document.getElementById('digital-all');
  5879. if (digitalAll) 
  5880. digitalAll.checked = true;
  5882. }
  5884. // Restaurer availability
  5885. if (preservedFilters.availability) {
  5886. const availabilityInput = document.querySelector (`input[name=\"availability\"][value=\"\${
  5887. preservedFilters.availability
  5888. }\"]`);
  5889. if (availabilityInput) {
  5890. availabilityInput.checked = true;
  5891. } else {
  5892. const availabilityAll = document.getElementById('availability-all');
  5893. if (availabilityAll) 
  5894. availabilityAll.checked = true;
  5896. }
  5897. } else {
  5898. const availabilityAll = document.getElementById('availability-all');
  5899. if (availabilityAll) 
  5900. availabilityAll.checked = true;
  5902. }
  5904. // Restaurer rating (mapping vers ratingMin)
  5905. if (preservedFilters.rating) {
  5906. const ratingInput = document.querySelector (`input[name=\"rating\"][value=\"\${
  5907. preservedFilters.rating
  5908. }\"]`);
  5909. if (ratingInput) {
  5910. ratingInput.checked = true;
  5911. } else {
  5912. const ratingAll = document.getElementById('rating-all');
  5913. if (ratingAll) 
  5914. ratingAll.checked = true;
  5916. }
  5917. } else {
  5918. const ratingAll = document.getElementById('rating-all');
  5919. if (ratingAll) 
  5920. ratingAll.checked = true;
  5922. }
  5923. }
  5925. // Fonction pour initialiser tous les filtres avec les valeurs de l'URL
  5926. function initializeFiltersFromURL () { // Initialiser les filtres statiques
  5927. const staticFilters = {
  5928. featured: currentFilters.featured || '',
  5929. digital: currentFilters.digital || '',
  5930. availability: currentFilters.availability || '',
  5931. rating: currentFilters.rating || currentFilters.ratingMin || ''
  5932. };
  5934. // Cocher les filtres statiques
  5935. Object.keys(staticFilters).forEach(filterName => {
  5936. const value = staticFilters[filterName];
  5937. if (value) {
  5938. const input = document.querySelector(`input[name=\"\${filterName}\"][value=\"\${value}\"]`);
  5939. if (input) {
  5940. input.checked = true;
  5941. } else { // Cocher \"all\" si la valeur n'existe pas
  5942. const allInput = document.getElementById (`\${filterName}-all`);
  5943. if (allInput) 
  5944. allInput.checked = true;
  5946. }
  5947. } else {
  5948. const allInput = document.getElementById (`\${filterName}-all`);
  5949. if (allInput) 
  5950. allInput.checked = true;
  5952. }
  5953. });
  5955. // Initialiser les filtres de poids
  5956. if (currentFilters.weightMin) {
  5957. const weightMinInput = document.getElementById('weightMin');
  5958. if (weightMinInput) 
  5959. weightMinInput.value = currentFilters.weightMin;
  5961. }
  5962. if (currentFilters.weightMax) {
  5963. const weightMaxInput = document.getElementById('weightMax');
  5964. if (weightMaxInput) 
  5965. weightMaxInput.value = currentFilters.weightMax;
  5967. }
  5969. // Initialiser les filtres de marque (si déjà chargés)
  5970. if (currentFilters.brand) {
  5971. const brandInput = document.querySelector (`input[name=\"brand\"][value=\"\${
  5972. currentFilters.brand
  5973. }\"]`);
  5974. if (brandInput) {
  5975. brandInput.checked = true;
  5976. } else {
  5977. const allBrands = document.getElementById('all-brands');
  5978. if (allBrands) 
  5979. allBrands.checked = true;
  5981. }
  5982. }
  5984. // Initialiser les filtres de boutique (si déjà chargés)
  5985. if (currentFilters.shop) {
  5986. const shopInput = document.querySelector (`input[name=\"shop\"][value=\"\${
  5987. currentFilters.shop
  5988. }\"]`);
  5989. if (shopInput) {
  5990. shopInput.checked = true;
  5991. } else {
  5992. const allShops = document.getElementById('all-shops');
  5993. if (allShops) 
  5994. allShops.checked = true;
  5996. }
  5997. }
  5999. // Initialiser les filtres d'attributs (si déjà chargés)
  6000. ['color', 'size', 'material', 'condition'].forEach(attrType => {
  6001. if (currentFilters[attrType]) {
  6002. const attrInput = document.querySelector(`input[name=\"\${attrType}\"][value=\"\${
  6003. currentFilters[attrType]
  6004. }\"]`);
  6005. if (attrInput) {
  6006. attrInput.checked = true;
  6007. } else {
  6008. const allAttr = document.getElementById (`all-\${attrType}`);
  6009. if (allAttr) 
  6010. allAttr.checked = true;
  6012. }
  6013. }
  6014. });
  6015. }
  6017. // Initialiser les filtres
  6018. document.addEventListener('DOMContentLoaded', function () { // Initialiser les filtres depuis l'URL
  6019. initializeFiltersFromURL();
  6021. // Event listeners pour les filtres statiques
  6022. const staticFilters = ['featured', 'digital', 'availability'];
  6024. staticFilters.forEach(filterName => {
  6025. const inputs = document.querySelectorAll (`input[name=\"\${filterName}\"]`);
  6026. inputs.forEach(input => {
  6027. input.addEventListener('change', function () {
  6028. if (this.id.includes('-all')) {
  6029. currentFilters[filterName] = '';
  6030. } else {
  6031. currentFilters[filterName] = this.value;
  6032. }
  6033. currentFilters.page = 1;
  6034. applyFilters();
  6035. });
  6036. });
  6037. });
  6039. // Event listener spécial pour rating (mapping vers ratingMin)
  6040. const ratingInputs = document.querySelectorAll('input[name=\"rating\"]');
  6041. ratingInputs.forEach(input => {
  6042. input.addEventListener('change', function () {
  6043. if (this.id === 'rating-all') {
  6044. currentFilters.ratingMin = '';
  6045. currentFilters.rating = '';
  6046. } else {
  6047. currentFilters.ratingMin = this.value;
  6048. currentFilters.rating = this.value;
  6049. }
  6050. currentFilters.page = 1;
  6051. applyFilters();
  6052. });
  6053. });
  6055. // Event listeners pour les filtres de poids
  6056. const weightInputs = ['weightMin', 'weightMax'];
  6057. weightInputs.forEach(inputId => {
  6058. const input = document.getElementById(inputId);
  6059. if (input) {
  6060. input.addEventListener('change', applyWeightFilter);
  6061. input.addEventListener('input', debounce(applyWeightFilter, 500));
  6062. }
  6063. });
  6065. // Event listeners pour les filtres de prix
  6066. const priceInputs = ['priceMin', 'priceMax'];
  6067. priceInputs.forEach(inputId => {
  6068. const input = document.getElementById(inputId);
  6069. if (input) {
  6070. input.addEventListener('change', applyPriceFilter);
  6071. input.addEventListener('input', debounce(applyPriceFilter, 500));
  6072. }
  6073. });
  6075. // Ajouter les event listeners pour les marques existantes
  6076. const brandList = document.getElementById('brandList');
  6077. if (brandList) {
  6078. brandList.querySelectorAll('input[name=\"brand\"]').forEach(radio => {
  6079. radio.addEventListener('change', function () {
  6080. if (this.id === 'all-brands') {
  6081. currentFilters.brand = '';
  6082. } else {
  6083. currentFilters.brand = this.value;
  6084. }
  6085. currentFilters.page = 1;
  6086. applyFilters();
  6087. });
  6088. });
  6089. }
  6091. // Appliquer les filtres initiaux si une catégorie est sélectionnée
  6092. if (currentFilters.category) {
  6093. applyFilters();
  6094. } else { // Initialiser l'affichage du bouton au chargement de la page
  6095. updateLoadMoreButton();
  6096. }
  6097. });
  6099. // Fonction de debounce pour éviter trop de requêtes
  6100. function debounce (func, wait) {
  6101. let timeout;
  6102. return function executedFunction(...args) {
  6103. const later = () => {
  6104. clearTimeout(timeout);
  6105. func(...args);
  6106. };
  6107. clearTimeout(timeout);
  6108. timeout = setTimeout(later, wait);
  6109. };
  6110. }
  6112. // Les fonctions toggleComparison, toggleWishlist, et showNotification sont définies globalement dans base_home.html.twig
  6113. // Pas besoin de les redéfinir ici
  6115. // Fonctions pour le dropshipping
  6116. function generateDropshipLink (productId) {
  6117. showEbayPromptModal('URL originale (optionnel):', '').then(originalUrl => {
  6118. if (originalUrl === null) 
  6119. return;
  6120.  // Utilisateur a annulé
  6122. const formData = new FormData();
  6123. formData.append('originalUrl', originalUrl || '');
  6125. fetch (`/api/dropship/generate/\${productId}`, {
  6126. method: 'POST',
  6127. body: formData
  6128. }).then(response => response.json()).then(data => {
  6129. if (data.success) { // Afficher le lien généré dans une modal
  6130. showDropshipLinkModal(data.data);
  6131. } else {
  6132. showNotification(data.message || 'Erreur lors de la génération du lien', 'error');
  6133. }
  6134. }).catch(error => {
  6135. console.error('Erreur:', error);
  6136. showNotification('Erreur lors de la génération du lien', 'error');
  6137. });
  6138. });
  6139. }
  6141. function showDropshipLinkModal (linkData) {
  6142. const modal = document.createElement('div');
  6143. modal.className = 'modal fade show';
  6144. modal.style.display = 'block';
  6145. modal.innerHTML = `
  6146.         <div class=\"modal-dialog\">
  6147.             <div class=\"modal-content\">
  6148.                 <div class=\"modal-header\">
  6149.                     <h5 class=\"modal-title\">
  6150.                         <i class=\"fa fa-share-alt\"></i> Lien de dropshipping généré
  6151.                     </h5>
  6152.                     <button type=\"button\" class=\"btn-close\" onclick=\"closeModal(this)\"></button>
  6153.                 </div>
  6154.                 <div class=\"modal-body\">
  6155.                     <div class=\"mb-3\">
  6156.                         <label class=\"form-label\">Lien de dropshipping :</label>
  6157.                         <div class=\"input-group\">
  6158.                             <input type=\"text\" class=\"form-control\" value=\"\${
  6159. linkData.dropshipUrl
  6160. }\" readonly id=\"dropshipUrl\">
  6161.                             <button class=\"btn btn-outline-secondary\" onclick=\"copyToClipboard('\${
  6162. linkData.dropshipUrl
  6163. }')\">
  6164.                                 <i class=\"fa fa-copy\"></i>
  6165.                             </button>
  6166.                         </div>
  6167.                     </div>
  6168.                     <div class=\"row\">
  6169.                         <div class=\"col-md-6\">
  6170.                             <div class=\"card\">
  6171.                                 <div class=\"card-body text-center\">
  6172.                                     <h6 class=\"card-title\">Taux de commission</h6>
  6173.                                     <h4 class=\"text-primary\">\${
  6174. linkData.commissionRate
  6175. }%</h4>
  6176.                                 </div>
  6177.                             </div>
  6178.                         </div>
  6179.                         <div class=\"col-md-6\">
  6180.                             <div class=\"card\">
  6181.                                 <div class=\"card-body text-center\">
  6182.                                     <h6 class=\"card-title\">Commission par vente</h6>
  6183.                                     <h4 class=\"text-success\">\${
  6184. linkData.commissionAmount
  6185. } HTG</h4>
  6186.                                 </div>
  6187.                             </div>
  6188.                         </div>
  6189.                     </div>
  6190.                     <div class=\"alert alert-info\">
  6191.                         <i class=\"fa fa-info-circle\"></i>
  6192.                         <strong>Note :</strong> Ce lien expire le \${
  6193. new Date(linkData.expiresAt).toLocaleDateString('fr-FR')
  6194. }.
  6195.                     </div>
  6196.                 </div>
  6197.                 <div class=\"modal-footer\">
  6198.                     <button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeModal(this)\">Fermer</button>
  6199.                     <a href=\"/dropship/dashboard\" class=\"btn btn-primary\">
  6200.                         <i class=\"fa fa-tachometer\"></i> Voir le dashboard
  6201.                     </a>
  6202.                 </div>
  6203.             </div>
  6204.         </div>
  6205.     `;
  6207. document.body.appendChild(modal);
  6209. // Ajouter le backdrop
  6210. const backdrop = document.createElement('div');
  6211. backdrop.className = 'modal-backdrop fade show';
  6212. document.body.appendChild(backdrop);
  6213. }
  6215. function closeModal (button) {
  6216. const modal = button.closest('.modal');
  6217. const backdrop = document.querySelector('.modal-backdrop');
  6219. if (modal) {
  6220. modal.remove();
  6221. }
  6222. if (backdrop) {
  6223. backdrop.remove();
  6224. }
  6225. }
  6227. function copyToClipboard (text) {
  6228. navigator.clipboard.writeText(text).then(function () {
  6229. showNotification('Lien copié dans le presse-papiers !', 'success');
  6230. }, function (err) {
  6231. console.error('Erreur lors de la copie:', err);
  6232. showNotification('Erreur lors de la copie du lien', 'error');
  6233. });
  6234. }
  6236. // Fonction pour initialiser le chargement infini
  6237. function initInfiniteScroll () {
  6238. const loader = document.getElementById('infiniteScrollLoader');
  6239. const noMoreProducts = document.getElementById('noMoreProducts');
  6241. // Afficher le loader si il y a plus de produits
  6242. if (hasMoreProducts && loader) {
  6243. loader.style.display = 'block';
  6244. } else if (!hasMoreProducts && noMoreProducts) {
  6245. noMoreProducts.style.display = 'block';
  6246. }
  6248. // Observer pour détecter quand l'utilisateur arrive en bas
  6249. const observer = new IntersectionObserver((entries) => {
  6250. entries.forEach(entry => {
  6251. if (entry.isIntersecting && !isLoading && hasMoreProducts) {
  6252. loadMoreProducts();
  6253. }
  6254. });
  6255. }, {
  6256. root: null,
  6257. rootMargin: '200px', // Démarrer le chargement 200px avant d'arriver en bas
  6258. threshold: 0.1
  6259. });
  6261. // Observer le loader
  6262. if (loader) {
  6263. observer.observe(loader);
  6264. }
  6265. }
  6267. // Fonction pour mettre à jour l'affichage du bouton
  6268. function updateLoadMoreButton () {
  6269. const loadMoreContainer = document.getElementById('loadMoreContainer');
  6270. const noMoreProducts = document.getElementById('noMoreProducts');
  6272. if (hasMoreProducts) {
  6273. if (loadMoreContainer) {
  6274. loadMoreContainer.style.display = 'block';
  6275. }
  6276. if (noMoreProducts) {
  6277. noMoreProducts.style.display = 'none';
  6278. }
  6279. } else {
  6280. if (loadMoreContainer) {
  6281. loadMoreContainer.style.display = 'none';
  6282. }
  6283. if (noMoreProducts) {
  6284. noMoreProducts.style.display = 'block';
  6285. }
  6286. }
  6287. }
  6289. // Fonction pour initialiser les images des nouveaux produits
  6290. function initializeProductImages (container) {
  6291. const productCards = container.querySelectorAll('.single-product');
  6292. productCards.forEach(card => {
  6293. const productId = card.querySelector('.add-to-cart') ?. getAttribute('data-product-id');
  6294. if (productId) { // Récupérer les images depuis les attributs data ou depuis le DOM
  6295. const imgElement = card.querySelector('.main-product-img');
  6296. if (imgElement && imgElement.dataset.images) {
  6297. const images = JSON.parse(imgElement.dataset.images);
  6298. productImages[productId] = images;
  6299. currentImageIndex[productId] = 0;
  6300. }
  6301. }
  6302. });
  6303. }
  6305. // Fonction pour initialiser les event listeners des nouveaux produits
  6306. function initializeProductEventListeners (container) { // Boutons d'ajout au panier
  6307. const cartButtons = container.querySelectorAll('.add-to-cart');
  6308. cartButtons.forEach(button => {
  6309. button.addEventListener('click', function () {
  6310. const productId = this.getAttribute('data-product-id');
  6311. const qty = this.getAttribute('data-qty');
  6313. fetch('{{ path(\"ui_cart_add\") }}', {
  6314. method: 'POST',
  6315. headers: {
  6316. 'Content-Type': 'application/x-www-form-urlencoded'
  6317. },
  6318. body: 'productId=' + productId + '&qty=' + qty
  6319. }).then(response => response.json()).then(data => {
  6320. if (data.ok) {
  6321. showEbayModal('Produit ajouté au panier !', 'success');
  6322. const cartBadge = document.querySelector('.cart-badge');
  6323. if (cartBadge) {
  6324. cartBadge.textContent = data.totalQty;
  6325. }
  6326. } else {
  6327. showEbayModal(data.message || 'Erreur lors de l\\'ajout au panier', 'error');
  6328. }
  6329. }).catch(error => {
  6330. console.error('Erreur:', error);
  6331. showEbayModal('Erreur lors de l\\'ajout au panier', 'error');
  6332. });
  6333. });
  6334. });
  6335. }
  6337. // La fonction showEbayModal est déjà définie plus haut
  6339. // Modal style eBay pour remplacer prompt()
  6340. function showEbayPromptModal (message, defaultValue = '') {
  6341. return new Promise((resolve) => {
  6342. const modalId = 'ebayPromptModal';
  6343. let existingModal = document.getElementById(modalId);
  6344. if (existingModal) {
  6345. existingModal.remove();
  6346. }
  6348. const modal = document.createElement('div');
  6349. modal.id = modalId;
  6350. modal.className = 'modal fade';
  6351. modal.setAttribute('tabindex', '-1');
  6352. modal.setAttribute('aria-labelledby', 'ebayPromptModalLabel');
  6353. modal.setAttribute('aria-hidden', 'true');
  6355. modal.innerHTML = `
  6356. <div class=\"modal-dialog modal-dialog-centered\">
  6357. <div class=\"modal-content\" style=\"border-radius: 8px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15);\">
  6358. <div class=\"modal-header\" style=\"border-bottom: 1px solid #e0e0e0; padding: 20px 24px;\">
  6359. <h5 class=\"modal-title\" id=\"ebayPromptModalLabel\" style=\"font-weight: 600; font-size: 18px; color: #333;\">
  6360. <i class=\"ti-pencil-alt\" style=\"color: #0064D2; margin-right: 8px;\"></i>Saisie
  6361. </h5>
  6362. <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" style=\"margin: 0;\"></button>
  6363. </div>
  6364. <div class=\"modal-body\" style=\"padding: 24px;\">
  6365. <p style=\"margin-bottom: 16px; font-size: 16px; color: #333;\">\${message}</p>
  6366. <input type=\"text\" class=\"form-control\" id=\"ebayPromptInput\" value=\"\${defaultValue}\" style=\"border-radius: 4px; border: 1px solid #ccc; padding: 10px; font-size: 14px;\" autofocus>
  6367. </div>
  6368. <div class=\"modal-footer\" style=\"border-top: 1px solid #e0e0e0; padding: 16px 24px; justify-content: flex-end;\">
  6369. <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" style=\"min-width: 80px; border-radius: 4px; font-weight: 500; margin-right: 8px;\">
  6370. Annuler
  6371. </button>
  6372. <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;\">
  6373. OK
  6374. </button>
  6375. </div>
  6376. </div>
  6377. </div>
  6378. `;
  6380. document.body.appendChild(modal);
  6381. const bsModal = new bootstrap.Modal(modal);
  6382. const input = modal.querySelector('#ebayPromptInput');
  6383. const confirmBtn = modal.querySelector('#ebayPromptConfirm');
  6385. // Gérer la confirmation
  6386. confirmBtn.addEventListener('click', function () {
  6387. const value = input.value;
  6388. bsModal.hide();
  6389. resolve(value);
  6390. });
  6392. // Gérer l'annulation
  6393. modal.addEventListener('hidden.bs.modal', function () {
  6394. if (input.value === undefined || input.value === '') {
  6395. resolve(null);
  6396. }
  6397. modal.remove();
  6398. });
  6400. // Gérer la touche Entrée
  6401. input.addEventListener('keypress', function (e) {
  6402. if (e.key === 'Enter') {
  6403. confirmBtn.click();
  6404. }
  6405. });
  6407. bsModal.show();
  6408. input.focus();
  6409. input.select();
  6410. });
  6411. }
  6413. // Remplacer window.alert et window.prompt
  6414. window.alert = showEbayModal;
  6415. window.prompt = showEbayPromptModal;
  6417. </script>
  6419. <script>
  6420. \t// Gestion du toggle de la sidebar sur mobile
  6421. document.addEventListener('DOMContentLoaded', function () {
  6422. const sidebarToggle = document.querySelector('.listing-sidebar-toggle');
  6423. const sidebarCollapse = document.getElementById('listingSidebarCollapse');
  6425. if (sidebarToggle && sidebarCollapse) { // Bootstrap 5 utilise des événements natifs
  6426. sidebarCollapse.addEventListener('show.bs.collapse', function () {
  6427. sidebarToggle.classList.remove('collapsed');
  6428. sidebarToggle.setAttribute('aria-expanded', 'true');
  6429. });
  6431. sidebarCollapse.addEventListener('hide.bs.collapse', function () {
  6432. sidebarToggle.classList.add('collapsed');
  6433. sidebarToggle.setAttribute('aria-expanded', 'false');
  6434. });
  6436. sidebarCollapse.addEventListener('shown.bs.collapse', function () {
  6437. sidebarToggle.classList.remove('collapsed');
  6438. });
  6440. sidebarCollapse.addEventListener('hidden.bs.collapse', function () {
  6441. sidebarToggle.classList.add('collapsed');
  6442. });
  6444. // Vérifier l'état initial
  6445. if (sidebarCollapse.classList.contains('show')) {
  6446. sidebarToggle.classList.remove('collapsed');
  6447. sidebarToggle.setAttribute('aria-expanded', 'true');
  6448. } else {
  6449. sidebarToggle.classList.add('collapsed');
  6450. sidebarToggle.setAttribute('aria-expanded', 'false');
  6451. }
  6452. }
  6453. });
  6455. // Synchroniser la recherche avec la barre de recherche du header
  6456. const headerSearchInput = document.getElementById('search_input');
  6457. if (headerSearchInput && typeof currentFilters !== 'undefined') { // Mettre à jour la valeur de la barre de recherche du header
  6458. headerSearchInput.value = currentFilters.q || '';
  6460. // Afficher le bouton clear si nécessaire
  6461. const clearSearchBtn = document.getElementById('clear_search_btn');
  6462. if (clearSearchBtn) {
  6463. clearSearchBtn.style.display = currentFilters.q ? 'block' : 'none';
  6464. }
  6465. }
  6467. // Réinitialiser tous les filtres
  6468. const resetFiltersBtn = document.getElementById('resetFiltersBtn');
  6469. if (resetFiltersBtn) {
  6470. resetFiltersBtn.addEventListener('click', function () {
  6471. resetAllFilters();
  6472. });
  6473. }
  6475. // Fonction pour réinitialiser tous les filtres
  6476. function resetAllFilters () {
  6477. currentFilters = {
  6478. category: '',
  6479. brand: '',
  6480. sort: 'newest',
  6481. priceMin: '',
  6482. priceMax: '',
  6483. page: 1,
  6484. q: '',
  6485. shop: '',
  6486. featured: '',
  6487. digital: '',
  6488. stockStatus: '',
  6489. ratingMin: '',
  6490. rating: '',
  6491. weightMin: '',
  6492. weightMax: '',
  6493. color: '',
  6494. size: '',
  6495. material: '',
  6496. condition: '',
  6497. availability: ''
  6498. };
  6500. // Réinitialiser la barre de recherche du header
  6501. const headerSearchInput = document.getElementById('search_input');
  6502. if (headerSearchInput) {
  6503. headerSearchInput.value = '';
  6504. }
  6505. const clearSearchBtn = document.getElementById('clear_search_btn');
  6506. if (clearSearchBtn) {
  6507. clearSearchBtn.style.display = 'none';
  6508. }
  6510. // Réinitialiser les inputs
  6511. document.getElementById('sortSelect').value = 'newest';
  6513. // Réinitialiser les radios
  6514. document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {
  6515. 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')) {
  6516. radio.checked = true;
  6517. } else {
  6518. radio.checked = false;
  6519. }
  6520. });
  6522. // Réinitialiser les inputs de prix et poids
  6523. const weightMinInput = document.getElementById('weightMin');
  6524. const weightMaxInput = document.getElementById('weightMax');
  6526. if (weightMinInput) 
  6527. weightMinInput.value = '';
  6529. if (weightMaxInput) 
  6530. weightMaxInput.value = '';
  6533. applyFilters();
  6534. updateActiveFilters();
  6535. }
  6537. // Fonction pour mettre à jour l'affichage des filtres actifs
  6538. function updateActiveFilters () {
  6539. const activeFiltersDiv = document.getElementById('activeFilters');
  6540. const activeFiltersList = document.getElementById('activeFiltersList');
  6541. const filters = [];
  6543. if (currentFilters.q) {
  6544. filters.push (`<span class=\"badge bg-primary\">Recherche: \"\${
  6545. currentFilters.q
  6546. }\"</span>`);
  6547. }
  6548. if (currentFilters.category) {
  6549. filters.push(`<span class=\"badge bg-secondary\">Catégorie</span>`);
  6550. }
  6551. if (currentFilters.brand) {
  6552. filters.push(`<span class=\"badge bg-secondary\">Marque</span>`);
  6553. }
  6554. if (currentFilters.priceMin || currentFilters.priceMax) {
  6555. filters.push(`<span class=\"badge bg-info\">Prix</span>`);
  6556. }
  6557. if (currentFilters.featured === 'true') {
  6558. filters.push(`<span class=\"badge bg-warning\">Produits vedettes</span>`);
  6559. }
  6560. if (currentFilters.digital === 'true') {
  6561. filters.push(`<span class=\"badge bg-success\">Numériques</span>`);
  6562. }
  6563. if (currentFilters.digital === 'false') {
  6564. filters.push(`<span class=\"badge bg-success\">Physiques</span>`);
  6565. }
  6566. if (currentFilters.availability) {
  6567. filters.push(`<span class=\"badge bg-info\">Disponibilité</span>`);
  6568. }
  6569. if (currentFilters.ratingMin || currentFilters.rating) {
  6570. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  6571. filters.push (`<span class=\"badge bg-warning\">Note ≥ \${ratingValue}</span>`);
  6572. }
  6573. if (currentFilters.weightMin || currentFilters.weightMax) {
  6574. filters.push(`<span class=\"badge bg-secondary\">Poids</span>`);
  6575. }
  6577. if (filters.length > 0) {
  6578. activeFiltersList.innerHTML = filters.join(' ');
  6579. activeFiltersDiv.style.display = 'block';
  6580. } else {
  6581. activeFiltersDiv.style.display = 'none';
  6582. }
  6583. }
  6585. // Mettre à jour les filtres actifs au chargement et après chaque filtrage
  6586. document.addEventListener('DOMContentLoaded', function () {
  6587. updateActiveFilters();
  6588. });
  6590. // Mettre à jour les filtres actifs après chaque application de filtres
  6591. const originalApplyFilters = applyFilters;
  6592. applyFilters = function () {
  6593. originalApplyFilters();
  6594. setTimeout(updateActiveFilters, 100);
  6595. // Mettre à jour le compteur de filtres actifs
  6596. updateActiveFiltersCount();
  6597. };
  6599. // S'assurer que applyFilters est accessible globalement
  6600. window.applyFilters = applyFilters;
  6602. // Fonction pour mettre à jour le compteur de filtres actifs
  6603. function updateActiveFiltersCount () {
  6604. const count = Object.keys(currentFilters).filter(key => {
  6605. const value = currentFilters[key];
  6606. return value && value !== '' && key !== 'page' && key !== 'sort';
  6607. }).length;
  6609. const badge = document.getElementById('activeFiltersCount');
  6610. if (badge) {
  6611. if (count > 0) {
  6612. badge.textContent = count;
  6613. badge.style.display = 'inline-block';
  6614. } else {
  6615. badge.style.display = 'none';
  6616. }
  6617. }
  6618. }
  6620. // Initialiser le compteur au chargement
  6621. document.addEventListener('DOMContentLoaded', function () {
  6622. updateActiveFiltersCount();
  6623. });
  6624. </script>
  6626. <!-- Modal de filtres -->
  6627. <div class=\"modal fade\" id=\"filtersModal\" tabindex=\"-1\" aria-labelledby=\"filtersModalLabel\" aria-hidden=\"true\">
  6628. \t<div class=\"modal-dialog modal-lg\">
  6629. \t\t<div class=\"modal-content\" style=\"display: flex; flex-direction: column; max-height: 90vh;\">
  6630. \t\t\t<div class=\"modal-header\" style=\"flex-shrink: 0;\">
  6631. \t\t\t\t<h5 class=\"modal-title\" id=\"filtersModalLabel\">
  6632. \t\t\t\t\t<i class=\"lnr lnr-filter me-2\"></i>Filtres de recherche
  6633. \t\t\t\t</h5>
  6634. \t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
  6635. \t\t\t</div>
  6636. \t\t\t<div class=\"modal-body\" style=\"overflow-y: auto; flex: 1; min-height: 0;\">
  6637. \t\t\t\t<div
  6638. \t\t\t\t\tclass=\"row\">
  6639. \t\t\t\t\t<!-- Colonne gauche -->
  6640. \t\t\t\t\t<div
  6641. \t\t\t\t\t\tclass=\"col-md-6\">
  6642. \t\t\t\t\t\t<!-- Marques -->
  6643. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6644. \t\t\t\t\t\t\t<div class=\"head\">Marques</div>
  6645. \t\t\t\t\t\t\t<ul class=\"brand-list\" id=\"modalBrandList\">
  6646. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6647. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-all-brands\" name=\"modal-brand\" checked>
  6648. \t\t\t\t\t\t\t\t\t<label for=\"modal-all-brands\">Toutes les marques</label>
  6649. \t\t\t\t\t\t\t\t</li>
  6650. \t\t\t\t\t\t\t\t{% for brand in brands %}
  6651. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6652. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-brand-{{ brand.id }}\" name=\"modal-brand\" value=\"{{ brand.slug }}\">
  6653. \t\t\t\t\t\t\t\t\t\t<label for=\"modal-brand-{{ brand.id }}\">{{ brand.name }}<span>({{ brand.getActiveProductsCount() }})</span>
  6654. \t\t\t\t\t\t\t\t\t\t</label>
  6655. \t\t\t\t\t\t\t\t\t</li>
  6656. \t\t\t\t\t\t\t\t{% endfor %}
  6657. \t\t\t\t\t\t\t</ul>
  6658. \t\t\t\t\t\t</div>
  6660. \t\t\t\t\t\t<!-- Conditions -->
  6661. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6662. \t\t\t\t\t\t\t<div class=\"head\">Condition</div>
  6663. \t\t\t\t\t\t\t<ul class=\"condition-list\" id=\"modalConditionList\">
  6664. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6665. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-all-conditions\" name=\"modal-condition\" checked>
  6666. \t\t\t\t\t\t\t\t\t<label for=\"modal-all-conditions\">Toutes les conditions</label>
  6667. \t\t\t\t\t\t\t\t</li>
  6668. \t\t\t\t\t\t\t\t{% for condition in conditions %}
  6669. \t\t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6670. \t\t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-condition-{{ condition.id }}\" name=\"modal-condition\" value=\"{{ condition.slug }}\">
  6671. \t\t\t\t\t\t\t\t\t\t<label for=\"modal-condition-{{ condition.id }}\">{{ condition.name }}<span>({{ condition.getActiveProductsCount() }})</span>
  6672. \t\t\t\t\t\t\t\t\t\t</label>
  6673. \t\t\t\t\t\t\t\t\t</li>
  6674. \t\t\t\t\t\t\t\t{% endfor %}
  6675. \t\t\t\t\t\t\t</ul>
  6676. \t\t\t\t\t\t</div>
  6678. \t\t\t\t\t\t<!-- Boutiques -->
  6679. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6680. \t\t\t\t\t\t\t<div class=\"head\">Boutiques</div>
  6681. \t\t\t\t\t\t\t<div id=\"modalShopsFilter\">
  6682. \t\t\t\t\t\t\t\t<ul
  6683. \t\t\t\t\t\t\t\t\tclass=\"shop-list\" id=\"modalShopList\"><!-- Les boutiques seront chargées dynamiquement -->
  6684. \t\t\t\t\t\t\t\t</ul>
  6685. \t\t\t\t\t\t\t</div>
  6686. \t\t\t\t\t\t</div>
  6688. \t\t\t\t\t\t<!-- Produits vedettes -->
  6689. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6690. \t\t\t\t\t\t\t<div class=\"head\">Produits vedettes</div>
  6691. \t\t\t\t\t\t\t<ul>
  6692. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6693. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-featured-all\" name=\"modal-featured\" checked>
  6694. \t\t\t\t\t\t\t\t\t<label for=\"modal-featured-all\">Tous les produits</label>
  6695. \t\t\t\t\t\t\t\t</li>
  6696. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6697. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-featured-only\" name=\"modal-featured\" value=\"true\">
  6698. \t\t\t\t\t\t\t\t\t<label for=\"modal-featured-only\">Produits vedettes uniquement</label>
  6699. \t\t\t\t\t\t\t\t</li>
  6700. \t\t\t\t\t\t\t</ul>
  6701. \t\t\t\t\t\t</div>
  6703. \t\t\t\t\t\t<!-- Type de produit -->
  6704. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6705. \t\t\t\t\t\t\t<div class=\"head\">Type de produit</div>
  6706. \t\t\t\t\t\t\t<ul>
  6707. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6708. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-all\" name=\"modal-digital\" checked>
  6709. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-all\">Tous les types</label>
  6710. \t\t\t\t\t\t\t\t</li>
  6711. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6712. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-physical\" name=\"modal-digital\" value=\"false\">
  6713. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-physical\">Produits physiques</label>
  6714. \t\t\t\t\t\t\t\t</li>
  6715. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6716. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-digital-digital\" name=\"modal-digital\" value=\"true\">
  6717. \t\t\t\t\t\t\t\t\t<label for=\"modal-digital-digital\">Produits numériques</label>
  6718. \t\t\t\t\t\t\t\t</li>
  6719. \t\t\t\t\t\t\t</ul>
  6720. \t\t\t\t\t\t</div>
  6721. \t\t\t\t\t</div>
  6723. \t\t\t\t\t<!-- Colonne droite -->
  6724. \t\t\t\t\t<div
  6725. \t\t\t\t\t\tclass=\"col-md-6\">
  6726. \t\t\t\t\t\t<!-- Disponibilité -->
  6727. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6728. \t\t\t\t\t\t\t<div class=\"head\">Disponibilité</div>
  6729. \t\t\t\t\t\t\t<ul>
  6730. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6731. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-all\" name=\"modal-availability\" checked>
  6732. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-all\">Tous</label>
  6733. \t\t\t\t\t\t\t\t</li>
  6734. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6735. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-in-stock\" name=\"modal-availability\" value=\"in_stock\">
  6736. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-in-stock\">En stock</label>
  6737. \t\t\t\t\t\t\t\t</li>
  6738. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6739. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-low-stock\" name=\"modal-availability\" value=\"low_stock\">
  6740. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-low-stock\">Stock faible</label>
  6741. \t\t\t\t\t\t\t\t</li>
  6742. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6743. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-availability-out-of-stock\" name=\"modal-availability\" value=\"out_of_stock\">
  6744. \t\t\t\t\t\t\t\t\t<label for=\"modal-availability-out-of-stock\">Rupture de stock</label>
  6745. \t\t\t\t\t\t\t\t</li>
  6746. \t\t\t\t\t\t\t</ul>
  6747. \t\t\t\t\t\t</div>
  6749. \t\t\t\t\t\t<!-- Note minimale -->
  6750. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6751. \t\t\t\t\t\t\t<div class=\"head\">Note minimale</div>
  6752. \t\t\t\t\t\t\t<ul>
  6753. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6754. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-all\" name=\"modal-rating\" checked>
  6755. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-all\">Toutes les notes</label>
  6756. \t\t\t\t\t\t\t\t</li>
  6757. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6758. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-4\" name=\"modal-rating\" value=\"4\">
  6759. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-4\">4 étoiles et plus</label>
  6760. \t\t\t\t\t\t\t\t</li>
  6761. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6762. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-3\" name=\"modal-rating\" value=\"3\">
  6763. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-3\">3 étoiles et plus</label>
  6764. \t\t\t\t\t\t\t\t</li>
  6765. \t\t\t\t\t\t\t\t<li class=\"filter-list\">
  6766. \t\t\t\t\t\t\t\t\t<input class=\"pixel-radio\" type=\"radio\" id=\"modal-rating-2\" name=\"modal-rating\" value=\"2\">
  6767. \t\t\t\t\t\t\t\t\t<label for=\"modal-rating-2\">2 étoiles et plus</label>
  6768. \t\t\t\t\t\t\t\t</li>
  6769. \t\t\t\t\t\t\t</ul>
  6770. \t\t\t\t\t\t</div>
  6772. \t\t\t\t\t\t<!-- Prix -->
  6773. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6774. \t\t\t\t\t\t\t<div class=\"head\">Prix (HTG)</div>
  6775. \t\t\t\t\t\t\t<div class=\"price-range-area\">
  6776. \t\t\t\t\t\t\t\t<div class=\"d-flex gap-3\">
  6777. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  6778. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Min</label>
  6779. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-priceMin\" placeholder=\"0\" min=\"0\" step=\"0.01\">
  6780. \t\t\t\t\t\t\t\t\t</div>
  6781. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  6782. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Max</label>
  6783. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-priceMax\" placeholder=\"999999\" min=\"0\" step=\"0.01\">
  6784. \t\t\t\t\t\t\t\t\t</div>
  6785. \t\t\t\t\t\t\t\t</div>
  6786. \t\t\t\t\t\t\t</div>
  6787. \t\t\t\t\t\t</div>
  6789. \t\t\t\t\t\t<!-- Poids -->
  6790. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6791. \t\t\t\t\t\t\t<div class=\"head\">Poids (kg)</div>
  6792. \t\t\t\t\t\t\t<div class=\"weight-range-area\">
  6793. \t\t\t\t\t\t\t\t<div class=\"d-flex gap-3\">
  6794. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  6795. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Min</label>
  6796. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-weightMin\" placeholder=\"0\" step=\"0.1\" min=\"0\">
  6797. \t\t\t\t\t\t\t\t\t</div>
  6798. \t\t\t\t\t\t\t\t\t<div class=\"flex-grow-1\">
  6799. \t\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Max</label>
  6800. \t\t\t\t\t\t\t\t\t\t<input type=\"number\" class=\"form-control\" id=\"modal-weightMax\" placeholder=\"100\" step=\"0.1\" min=\"0\">
  6801. \t\t\t\t\t\t\t\t\t</div>
  6802. \t\t\t\t\t\t\t\t</div>
  6803. \t\t\t\t\t\t\t</div>
  6804. \t\t\t\t\t\t</div>
  6806. \t\t\t\t\t\t<!-- Couleur -->
  6807. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6808. \t\t\t\t\t\t\t<div class=\"head\">Couleur</div>
  6809. \t\t\t\t\t\t\t<div id=\"modalColorsFilter\">
  6810. \t\t\t\t\t\t\t\t<ul
  6811. \t\t\t\t\t\t\t\t\tclass=\"color-list\" id=\"modalColorList\"><!-- Les couleurs seront chargées dynamiquement -->
  6812. \t\t\t\t\t\t\t\t</ul>
  6813. \t\t\t\t\t\t\t</div>
  6814. \t\t\t\t\t\t</div>
  6816. \t\t\t\t\t\t<!-- Taille -->
  6817. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6818. \t\t\t\t\t\t\t<div class=\"head\">Taille</div>
  6819. \t\t\t\t\t\t\t<div id=\"modalSizesFilter\">
  6820. \t\t\t\t\t\t\t\t<ul
  6821. \t\t\t\t\t\t\t\t\tclass=\"size-list\" id=\"modalSizeList\"><!-- Les tailles seront chargées dynamiquement -->
  6822. \t\t\t\t\t\t\t\t</ul>
  6823. \t\t\t\t\t\t\t</div>
  6824. \t\t\t\t\t\t</div>
  6826. \t\t\t\t\t\t<!-- Matériau -->
  6827. \t\t\t\t\t\t<div class=\"common-filter mb-4\">
  6828. \t\t\t\t\t\t\t<div class=\"head\">Matériau</div>
  6829. \t\t\t\t\t\t\t<div id=\"modalMaterialsFilter\">
  6830. \t\t\t\t\t\t\t\t<ul
  6831. \t\t\t\t\t\t\t\t\tclass=\"material-list\" id=\"modalMaterialList\"><!-- Les matériaux seront chargés dynamiquement -->
  6832. \t\t\t\t\t\t\t\t</ul>
  6833. \t\t\t\t\t\t\t</div>
  6834. \t\t\t\t\t\t</div>
  6835. \t\t\t\t\t</div>
  6836. \t\t\t\t</div>
  6837. \t\t\t</div>
  6838. \t\t\t<div class=\"modal-footer\" style=\"flex-shrink: 0; border-top: 1px solid #dee2e6; padding: 1rem 1.5rem; background: #f8f9fa;\">
  6839. \t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">
  6840. \t\t\t\t\t<i class=\"lnr lnr-cross-circle me-1\"></i>Annuler
  6841. \t\t\t\t</button>
  6842. \t\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\" id=\"modalResetFiltersBtn\">
  6843. \t\t\t\t\t<i class=\"lnr lnr-refresh me-1\"></i>Réinitialiser
  6844. \t\t\t\t</button>
  6845. \t\t\t\t<button type=\"button\" class=\"btn btn-primary\" id=\"modalApplyFiltersBtn\">
  6846. \t\t\t\t\t<i class=\"lnr lnr-checkmark-circle me-1\"></i>Appliquer les filtres
  6847. \t\t\t\t</button>
  6848. \t\t\t</div>
  6849. \t\t</div>
  6850. \t</div>
  6851. </div>
  6853. <script>
  6854. \t// Synchroniser les filtres du modal avec currentFilters au chargement
  6855. document.addEventListener('DOMContentLoaded', function () {
  6856. console.log('[Modal] Initializing filter modal...');
  6858. // Fonction pour synchroniser les valeurs du modal avec currentFilters
  6859. function syncModalFilters() {
  6860. console.log('[Modal] Syncing filters with currentFilters:', currentFilters);
  6862. // Réinitialiser tous les radios \"Tous\" d'abord
  6863. document.querySelectorAll('#filtersModal input[type=\"radio\"][id*=\"-all\"]').forEach(radio => {
  6864. radio.checked = true;
  6865. });
  6867. // Marques
  6868. if (currentFilters.brand) {
  6869. const brandRadio = document.querySelector (`#modalBrandList input[value=\"\${
  6870. currentFilters.brand
  6871. }\"]`);
  6872. if (brandRadio) {
  6873. brandRadio.checked = true;
  6874. console.log('[Modal] Brand synced:', currentFilters.brand);
  6875. }
  6876. } else {
  6877. const allBrands = document.getElementById('modal-all-brands');
  6878. if (allBrands) 
  6879. allBrands.checked = true;
  6881. }
  6883. // Conditions
  6884. if (currentFilters.condition) {
  6885. const conditionRadio = document.querySelector (`#modalConditionList input[value=\"\${
  6886. currentFilters.condition
  6887. }\"]`);
  6888. if (conditionRadio) {
  6889. conditionRadio.checked = true;
  6890. console.log('[Modal] Condition synced:', currentFilters.condition);
  6891. }
  6892. } else {
  6893. const allConditions = document.getElementById('modal-all-conditions');
  6894. if (allConditions) 
  6895. allConditions.checked = true;
  6897. }
  6899. // Featured
  6900. if (currentFilters.featured === 'true') {
  6901. const featuredRadio = document.getElementById('modal-featured-only');
  6902. if (featuredRadio) {
  6903. featuredRadio.checked = true;
  6904. console.log('[Modal] Featured synced');
  6905. }
  6906. } else {
  6907. const allFeatured = document.getElementById('modal-featured-all');
  6908. if (allFeatured) 
  6909. allFeatured.checked = true;
  6911. }
  6913. // Digital
  6914. if (currentFilters.digital === 'true') {
  6915. const digitalRadio = document.getElementById('modal-digital-digital');
  6916. if (digitalRadio) 
  6917. digitalRadio.checked = true;
  6919. } else if (currentFilters.digital === 'false') {
  6920. const physicalRadio = document.getElementById('modal-digital-physical');
  6921. if (physicalRadio) 
  6922. physicalRadio.checked = true;
  6924. } else {
  6925. const allDigital = document.getElementById('modal-digital-all');
  6926. if (allDigital) 
  6927. allDigital.checked = true;
  6929. }
  6931. // Availability
  6932. if (currentFilters.availability) {
  6933. const availabilityId = `modal-availability-\${
  6934. currentFilters.availability.replace('_', '-')
  6935. }`;
  6936. const availabilityRadio = document.getElementById(availabilityId);
  6937. if (availabilityRadio) {
  6938. availabilityRadio.checked = true;
  6939. console.log('[Modal] Availability synced:', currentFilters.availability);
  6940. }
  6941. } else {
  6942. const allAvailability = document.getElementById('modal-availability-all');
  6943. if (allAvailability) 
  6944. allAvailability.checked = true;
  6946. }
  6948. // Rating
  6949. if (currentFilters.ratingMin || currentFilters.rating) {
  6950. const ratingValue = currentFilters.ratingMin || currentFilters.rating;
  6951. const ratingRadio = document.getElementById (`modal-rating-\${ratingValue}`);
  6952. if (ratingRadio) {
  6953. ratingRadio.checked = true;
  6954. console.log('[Modal] Rating synced:', ratingValue);
  6955. }
  6956. } else {
  6957. const allRating = document.getElementById('modal-rating-all');
  6958. if (allRating) 
  6959. allRating.checked = true;
  6961. }
  6963. // Prix
  6964. const priceMinInput = document.getElementById('modal-priceMin');
  6965. const priceMaxInput = document.getElementById('modal-priceMax');
  6966. if (priceMinInput) 
  6967. priceMinInput.value = currentFilters.priceMin || '';
  6969. if (priceMaxInput) 
  6970. priceMaxInput.value = currentFilters.priceMax || '';
  6973. // Poids
  6974. const weightMinInput = document.getElementById('modal-weightMin');
  6975. const weightMaxInput = document.getElementById('modal-weightMax');
  6976. if (weightMinInput) 
  6977. weightMinInput.value = currentFilters.weightMin || '';
  6979. if (weightMaxInput) 
  6980. weightMaxInput.value = currentFilters.weightMax || '';
  6983. console.log('[Modal] Filters synced successfully');
  6984. }
  6986. // Fonction pour charger les filtres dynamiques dans le modal
  6987. function loadDynamicFiltersToModal() {
  6988. console.log('[Modal] Loading dynamic filters...');
  6990. // Boutiques
  6991. const sidebarShopList = document.getElementById('shopList');
  6992. const modalShopList = document.getElementById('modalShopList');
  6993. if (modalShopList) { // Si la sidebar a déjà les boutiques, les copier
  6994. if (sidebarShopList && sidebarShopList.innerHTML.trim() && ! sidebarShopList.innerHTML.includes('Aucune boutique') && ! sidebarShopList.innerHTML.includes('seront chargées')) {
  6995. 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-');
  6996. modalShopList.innerHTML = shopHtml;
  6998. // Synchroniser la sélection
  6999. if (currentFilters.shop) {
  7000. const shopRadio = document.querySelector (`#modalShopList input[value=\"\${
  7001. currentFilters.shop
  7002. }\"]`);
  7003. if (shopRadio) 
  7004. shopRadio.checked = true;
  7006. } else {
  7007. const allShops = document.getElementById('modal-all-shops');
  7008. if (allShops) 
  7009. allShops.checked = true;
  7011. }
  7012. console.log('[Modal] Shops loaded from sidebar');
  7013. } else { // Si pas encore chargés, afficher un message ou laisser vide
  7014. if (! modalShopList.innerHTML.trim() || modalShopList.innerHTML.includes('seront chargées')) {
  7015. modalShopList.innerHTML = '<li class=\"filter-list\"><span class=\"text-muted\">Les boutiques seront chargées lors de l\\'application des filtres</span></li>';
  7016. }
  7017. }
  7018. }
  7020. // Couleurs
  7021. const sidebarColorList = document.getElementById('colorList');
  7022. const modalColorList = document.getElementById('modalColorList');
  7023. if (sidebarColorList && modalColorList) {
  7024. if (sidebarColorList.innerHTML.trim() && ! sidebarColorList.innerHTML.includes('Aucun')) {
  7025. 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-');
  7026. modalColorList.innerHTML = colorHtml;
  7028. // Synchroniser la sélection
  7029. if (currentFilters.color) {
  7030. const colorRadio = document.querySelector (`#modalColorList input[value=\"\${
  7031. currentFilters.color
  7032. }\"]`);
  7033. if (colorRadio) 
  7034. colorRadio.checked = true;
  7036. } else {
  7037. const allColor = document.getElementById('modal-all-color');
  7038. if (allColor) 
  7039. allColor.checked = true;
  7041. }
  7042. console.log('[Modal] Colors loaded');
  7043. }
  7044. }
  7046. // Tailles
  7047. const sidebarSizeList = document.getElementById('sizeList');
  7048. const modalSizeList = document.getElementById('modalSizeList');
  7049. if (sidebarSizeList && modalSizeList) {
  7050. if (sidebarSizeList.innerHTML.trim() && ! sidebarSizeList.innerHTML.includes('Aucun')) {
  7051. 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-');
  7052. modalSizeList.innerHTML = sizeHtml;
  7054. // Synchroniser la sélection
  7055. if (currentFilters.size) {
  7056. const sizeRadio = document.querySelector (`#modalSizeList input[value=\"\${
  7057. currentFilters.size
  7058. }\"]`);
  7059. if (sizeRadio) 
  7060. sizeRadio.checked = true;
  7062. } else {
  7063. const allSize = document.getElementById('modal-all-size');
  7064. if (allSize) 
  7065. allSize.checked = true;
  7067. }
  7068. console.log('[Modal] Sizes loaded');
  7069. }
  7070. }
  7072. // Matériaux
  7073. const sidebarMaterialList = document.getElementById('materialList');
  7074. const modalMaterialList = document.getElementById('modalMaterialList');
  7075. if (sidebarMaterialList && modalMaterialList) {
  7076. if (sidebarMaterialList.innerHTML.trim() && ! sidebarMaterialList.innerHTML.includes('Aucun')) {
  7077. 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-');
  7078. modalMaterialList.innerHTML = materialHtml;
  7080. // Synchroniser la sélection
  7081. if (currentFilters.material) {
  7082. const materialRadio = document.querySelector (`#modalMaterialList input[value=\"\${
  7083. currentFilters.material
  7084. }\"]`);
  7085. if (materialRadio) 
  7086. materialRadio.checked = true;
  7088. } else {
  7089. const allMaterial = document.getElementById('modal-all-material');
  7090. if (allMaterial) 
  7091. allMaterial.checked = true;
  7093. }
  7094. console.log('[Modal] Materials loaded');
  7095. }
  7096. }
  7097. }
  7099. // Synchroniser à l'ouverture du modal
  7100. const filtersModal = document.getElementById('filtersModal');
  7101. if (filtersModal) {
  7102. filtersModal.addEventListener('show.bs.modal', function () {
  7103. console.log('[Modal] Modal opening, syncing filters...');
  7105. // Charger les filtres dynamiques d'abord si pas encore chargés
  7106. loadDynamicFiltersToModal();
  7108. // Puis synchroniser les valeurs
  7109. setTimeout(() => {
  7110. syncModalFilters();
  7111. }, 100);
  7112. });
  7113. }
  7115. // Charger les filtres dynamiques au chargement initial si la sidebar les a déjà
  7116. loadDynamicFiltersToModal();
  7118. // Bouton Appliquer les filtres
  7119. const applyBtn = document.getElementById('modalApplyFiltersBtn');
  7120. if (applyBtn) {
  7121. applyBtn.addEventListener('click', function (e) {
  7122. e.preventDefault();
  7123. console.log('[Modal] Apply button clicked, collecting filter values...');
  7125. // Collecter les valeurs du modal
  7126. const brandRadio = document.querySelector('#modalBrandList input[name=\"modal-brand\"]:checked');
  7127. if (brandRadio) {
  7128. currentFilters.brand = brandRadio.id !== 'modal-all-brands' ? brandRadio.value : '';
  7129. console.log('[Modal] Brand:', currentFilters.brand);
  7130. } else {
  7131. currentFilters.brand = '';
  7132. console.log('[Modal] Brand: No selection found');
  7133. }
  7135. // Conditions
  7136. const conditionRadio = document.querySelector('#modalConditionList input[name=\"modal-condition\"]:checked');
  7137. if (conditionRadio) {
  7138. currentFilters.condition = conditionRadio.id !== 'modal-all-conditions' ? conditionRadio.value : '';
  7139. console.log('[Modal] Condition:', currentFilters.condition);
  7140. } else {
  7141. currentFilters.condition = '';
  7142. }
  7144. // Featured
  7145. const featuredRadio = document.querySelector('#filtersModal input[name=\"modal-featured\"]:checked');
  7146. if (featuredRadio) {
  7147. currentFilters.featured = featuredRadio.id !== 'modal-featured-all' ? featuredRadio.value : '';
  7148. console.log('[Modal] Featured:', currentFilters.featured);
  7149. } else {
  7150. currentFilters.featured = '';
  7151. }
  7153. // Digital
  7154. const digitalRadio = document.querySelector('#filtersModal input[name=\"modal-digital\"]:checked');
  7155. if (digitalRadio) {
  7156. currentFilters.digital = digitalRadio.id !== 'modal-digital-all' ? digitalRadio.value : '';
  7157. console.log('[Modal] Digital:', currentFilters.digital);
  7158. } else {
  7159. currentFilters.digital = '';
  7160. }
  7162. // Availability
  7163. const availabilityRadio = document.querySelector('#filtersModal input[name=\"modal-availability\"]:checked');
  7164. if (availabilityRadio) {
  7165. currentFilters.availability = availabilityRadio.id !== 'modal-availability-all' ? availabilityRadio.value : '';
  7166. console.log('[Modal] Availability:', currentFilters.availability);
  7167. } else {
  7168. currentFilters.availability = '';
  7169. }
  7171. // Rating
  7172. const ratingRadio = document.querySelector('#filtersModal input[name=\"modal-rating\"]:checked');
  7173. if (ratingRadio && ratingRadio.id !== 'modal-rating-all') {
  7174. currentFilters.ratingMin = ratingRadio.value;
  7175. currentFilters.rating = ratingRadio.value;
  7176. console.log('[Modal] Rating:', currentFilters.ratingMin);
  7177. } else {
  7178. currentFilters.ratingMin = '';
  7179. currentFilters.rating = '';
  7180. }
  7182. // Prix
  7183. const priceMinInput = document.getElementById('modal-priceMin');
  7184. const priceMaxInput = document.getElementById('modal-priceMax');
  7185. currentFilters.priceMin = priceMinInput ? priceMinInput.value.trim() : '';
  7186. currentFilters.priceMax = priceMaxInput ? priceMaxInput.value.trim() : '';
  7187. console.log('[Modal] Price:', currentFilters.priceMin, '-', currentFilters.priceMax);
  7189. // Poids
  7190. const weightMinInput = document.getElementById('modal-weightMin');
  7191. const weightMaxInput = document.getElementById('modal-weightMax');
  7192. currentFilters.weightMin = weightMinInput ? weightMinInput.value.trim() : '';
  7193. currentFilters.weightMax = weightMaxInput ? weightMaxInput.value.trim() : '';
  7194. console.log('[Modal] Weight:', currentFilters.weightMin, '-', currentFilters.weightMax);
  7196. // Couleur
  7197. const colorRadio = document.querySelector('#modalColorList input[name=\"modal-color\"]:checked');
  7198. if (colorRadio) {
  7199. currentFilters.color = colorRadio.id !== 'modal-all-color' ? colorRadio.value : '';
  7200. console.log('[Modal] Color:', currentFilters.color);
  7201. } else {
  7202. currentFilters.color = '';
  7203. }
  7205. // Taille
  7206. const sizeRadio = document.querySelector('#modalSizeList input[name=\"modal-size\"]:checked');
  7207. if (sizeRadio) {
  7208. currentFilters.size = sizeRadio.id !== 'modal-all-size' ? sizeRadio.value : '';
  7209. console.log('[Modal] Size:', currentFilters.size);
  7210. } else {
  7211. currentFilters.size = '';
  7212. }
  7214. // Matériau
  7215. const materialRadio = document.querySelector('#modalMaterialList input[name=\"modal-material\"]:checked');
  7216. if (materialRadio) {
  7217. currentFilters.material = materialRadio.id !== 'modal-all-material' ? materialRadio.value : '';
  7218. console.log('[Modal] Material:', currentFilters.material);
  7219. } else {
  7220. currentFilters.material = '';
  7221. }
  7223. // Boutiques
  7224. const shopRadio = document.querySelector('#modalShopList input[name=\"modal-shop\"]:checked');
  7225. if (shopRadio) {
  7226. currentFilters.shop = shopRadio.id !== 'modal-all-shops' ? shopRadio.value : '';
  7227. console.log('[Modal] Shop:', currentFilters.shop);
  7228. } else {
  7229. currentFilters.shop = '';
  7230. }
  7232. currentFilters.page = 1;
  7234. console.log('[Modal] All filters collected:', currentFilters);
  7236. // Fermer le modal d'abord
  7237. const modalElement = document.getElementById('filtersModal');
  7238. const modal = bootstrap.Modal.getInstance(modalElement);
  7239. if (modal) {
  7240. modal.hide();
  7241. console.log('[Modal] Modal closed');
  7242. }
  7244. // Appliquer les filtres après un court délai pour laisser le modal se fermer
  7245. setTimeout(() => { // Vérifier que applyFilters existe
  7246. if (typeof window.applyFilters === 'function') {
  7247. console.log('[Modal] Calling applyFilters()...');
  7248. window.applyFilters();
  7249. // Mettre à jour le compteur de filtres actifs
  7250. setTimeout(() => {
  7251. if (typeof updateActiveFiltersCount === 'function') {
  7252. updateActiveFiltersCount();
  7253. }
  7254. }, 100);
  7255. } else {
  7256. console.error('[Modal] applyFilters is not available!', typeof window.applyFilters);
  7257. // Essayer de recharger la page avec les nouveaux paramètres
  7258. const url = new URL(window.location.href);
  7259. Object.keys(currentFilters).forEach(key => {
  7260. if (currentFilters[key] && currentFilters[key] !== '') {
  7261. let apiKey = key;
  7262. if (key === 'priceMin') {
  7263. apiKey = 'price_min';
  7264. } else if (key === 'priceMax') {
  7265. apiKey = 'price_max';
  7266. } else if (key === 'ratingMin') {
  7267. apiKey = 'rating_min';
  7268. } else if (key === 'weightMin') {
  7269. apiKey = 'weight_min';
  7270. } else if (key === 'weightMax') {
  7271. apiKey = 'weight_max';
  7272. } else if (key === 'stockStatus') {
  7273. apiKey = 'stock_status';
  7274. }
  7276. url.searchParams.set(apiKey, currentFilters[key]);
  7277. } else {
  7278. let apiKey = key;
  7279. if (key === 'priceMin') {
  7280. apiKey = 'price_min';
  7281. } else if (key === 'priceMax') {
  7282. apiKey = 'price_max';
  7283. } else if (key === 'ratingMin') {
  7284. apiKey = 'rating_min';
  7285. } else if (key === 'weightMin') {
  7286. apiKey = 'weight_min';
  7287. } else if (key === 'weightMax') {
  7288. apiKey = 'weight_max';
  7289. } else if (key === 'stockStatus') {
  7290. apiKey = 'stock_status';
  7291. }
  7293. url.searchParams.delete(apiKey);
  7294. }
  7295. });
  7296. window.location.href = url.toString();
  7297. }
  7298. }, 300);
  7299. });
  7300. } else {
  7301. console.error('[Modal] Apply button not found!');
  7302. }
  7304. // Bouton Réinitialiser
  7305. const resetBtn = document.getElementById('modalResetFiltersBtn');
  7306. if (resetBtn) {
  7307. resetBtn.addEventListener('click', function () {
  7308. console.log('[Modal] Reset button clicked');
  7310. // Réinitialiser tous les filtres du modal
  7311. document.querySelectorAll('#filtersModal input[type=\"radio\"]').forEach(radio => {
  7312. if (radio.id && radio.id.includes('-all')) {
  7313. radio.checked = true;
  7314. } else {
  7315. radio.checked = false;
  7316. }
  7317. });
  7319. const priceMinInput = document.getElementById('modal-priceMin');
  7320. const priceMaxInput = document.getElementById('modal-priceMax');
  7321. const weightMinInput = document.getElementById('modal-weightMin');
  7322. const weightMaxInput = document.getElementById('modal-weightMax');
  7324. if (priceMinInput) 
  7325. priceMinInput.value = '';
  7327. if (priceMaxInput) 
  7328. priceMaxInput.value = '';
  7330. if (weightMinInput) 
  7331. weightMinInput.value = '';
  7333. if (weightMaxInput) 
  7334. weightMaxInput.value = '';
  7337. // Réinitialiser currentFilters (garder category et sort)
  7338. const category = currentFilters.category || '';
  7339. const sort = currentFilters.sort || 'newest';
  7340. currentFilters = {
  7341. category: category,
  7342. sort: sort,
  7343. page: 1,
  7344. brand: '',
  7345. condition: '',
  7346. featured: '',
  7347. digital: '',
  7348. availability: '',
  7349. ratingMin: '',
  7350. rating: '',
  7351. priceMin: '',
  7352. priceMax: '',
  7353. weightMin: '',
  7354. weightMax: '',
  7355. color: '',
  7356. size: '',
  7357. material: '',
  7358. shop: ''
  7359. };
  7361. console.log('[Modal] Filters reset, currentFilters:', currentFilters);
  7363. // Fermer le modal d'abord
  7364. const modalElement = document.getElementById('filtersModal');
  7365. const modal = bootstrap.Modal.getInstance(modalElement);
  7366. if (modal) {
  7367. modal.hide();
  7368. console.log('[Modal] Modal closed after reset');
  7369. }
  7371. // Appliquer les filtres après un court délai
  7372. setTimeout(() => {
  7373. if (typeof window.applyFilters === 'function') {
  7374. window.applyFilters();
  7375. } else {
  7376. console.error('[Modal] applyFilters not available, reloading page...');
  7377. // Recharger la page avec les filtres réinitialisés
  7378. const url = new URL(window.location.href);
  7379. url.searchParams.delete('price_min');
  7380. url.searchParams.delete('price_max');
  7381. url.searchParams.delete('rating_min');
  7382. url.searchParams.delete('weight_min');
  7383. url.searchParams.delete('weight_max');
  7384. url.searchParams.delete('brand');
  7385. url.searchParams.delete('condition');
  7386. url.searchParams.delete('featured');
  7387. url.searchParams.delete('digital');
  7388. url.searchParams.delete('availability');
  7389. url.searchParams.delete('color');
  7390. url.searchParams.delete('size');
  7391. url.searchParams.delete('material');
  7392. url.searchParams.delete('shop');
  7393. window.location.href = url.toString();
  7394. }
  7395. }, 300);
  7396. });
  7397. } else {
  7398. console.error('[Modal] Reset button not found!');
  7399. }
  7401. // S'assurer que les filtres dynamiques sont chargés au premier chargement si disponibles
  7402. setTimeout(() => {
  7403. loadDynamicFiltersToModal();
  7404. }, 500);
  7405. });
  7406. </script>{% endblock %}
  7407. ", "home/listing.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/listing.html.twig");
  7408.     }
  7409. }