{"id":1886,"date":"2025-07-31T11:44:40","date_gmt":"2025-07-31T09:44:40","guid":{"rendered":"http:\/\/dev.alcomnet.com\/cosimad\/?page_id=1886"},"modified":"2025-07-31T11:44:40","modified_gmt":"2025-07-31T09:44:40","slug":"our-products","status":"publish","type":"page","link":"http:\/\/dev.alcomnet.com\/cosimad\/dev\/our-products\/","title":{"rendered":"Our products"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1886\" class=\"elementor elementor-1886\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2231f0a e-flex e-con-boxed e-con e-parent\" data-id=\"2231f0a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0454ec0 elementor-widget elementor-widget-page-title\" data-id=\"0454ec0\" data-element_type=\"widget\" data-widget_type=\"page-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\n\t\t<div class=\"hfe-page-title hfe-page-title-wrapper elementor-widget-heading\">\n\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/dev.alcomnet.com\/cosimad\">\n\t\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">\n\t\t\t\t\t\t\t\t\n\t\t\t\tOur products  \n\t\t\t<\/h1 > \n\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86153db elementor-widget elementor-widget-eael-breadcrumbs\" data-id=\"86153db\" data-element_type=\"widget\" data-widget_type=\"eael-breadcrumbs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"eael-breadcrumbs\">\n\t\t\t<div class=\"eael-breadcrumbs__content\"><a href=\"http:\/\/dev.alcomnet.com\/cosimad\">Accueil<\/a> <span class=\"eael-breadcrumb-separator\">\/<\/span> <span class = \"eael-current\">Page<\/span><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e6f24a e-flex e-con-boxed e-con e-parent\" data-id=\"3e6f24a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8f51d8 elementor-widget elementor-widget-shortcode\" data-id=\"d8f51d8\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div id=\"produits-container\" class=\"All-product\" style=\"display:flex;gap:20px;\">\n        <!-- \ud83e\udded Filtres -->\n        <form id=\"filtre-produits\" class=\"produit-filtres\" style=\"width:25%;\">\n            <!-- Recherche -->\n            <div class=\"search-wrapper\" style=\"position: relative; width: 100%;\">\n                <input type=\"text\" name=\"s\" placeholder=\"Rechercher un produit...\" \/>\n            <\/div>\n\n            <!-- Sexe -->\n            <div class=\"title-input-form\" style=\"margin-top:20px;\"><strong>Produits pour :<\/strong><\/div>\n            <div class=\"sexe-filtres\">\n                <label><input type=\"radio\" name=\"sexe\" value=\"\" checked> Tous<\/label>\n                <!-- si tu utilises la taxonomie 'sexe_produit', on peut remplacer ces radios par l'appel AJAX fetch_terms -->\n                <label><input type=\"radio\" name=\"sexe\" value=\"homme\"> Homme<\/label>\n                <label><input type=\"radio\" name=\"sexe\" value=\"femme\"> Femme<\/label>\n            <\/div>\n\n            <!-- Contenance -->\n            <div class=\"title-input-form\" style=\"margin-top:20px;\"><strong>Contenance :<\/strong><\/div>\n            <select name=\"contenance\">\n                <option value=\"\">Toutes<\/option>\n                <option value=\"100-ml\">100 ML<\/option><option value=\"150-ml\">150 ML<\/option><option value=\"190-ml\">190 ML<\/option><option value=\"20-bande-depilation-2-soin-apres-epilation\">20 Bande D\u2019\u00e9pilation + 2 Soin Apres Epilation<\/option><option value=\"200-ml\">200 ML<\/option><option value=\"250-ml\">250 ML<\/option><option value=\"280\">280<\/option><option value=\"300-ml\">300 ML<\/option><option value=\"300ml\">300ML<\/option><option value=\"40-ml\">40 ML<\/option><option value=\"400-ml\">400 ML<\/option><option value=\"45-ml\">45 ML<\/option><option value=\"450-ml\">450 ML<\/option><option value=\"50-ml\">50 ML<\/option><option value=\"80-ml\">80 ML<\/option>            <\/select>\n\n            <!-- Cat\u00e9gories (parents) -->\n            <div class=\"title-input-form\" style=\"margin-top:20px;\"><strong>Cat\u00e9gories :<\/strong><\/div>\n            <select name=\"categorie\" id=\"categorie-parent\">\n                <option value=\"\">Toutes<\/option>\n                <option value=\"79\">Boxes &amp; Kits<\/option><option value=\"25\">Coffrets &amp; Trousses<\/option><option value=\"23\">Coiffants &amp; Gels<\/option><option value=\"91\">Cream &amp; Body Care<\/option><option value=\"83\">Deodorants<\/option><option value=\"19\">D\u00e9odorants Vaporisateur ( Spray )<\/option><option value=\"24\">Hygi\u00e8ne &amp; D\u00e9pilation<\/option><option value=\"85\">Hygiene &amp; Depilation<\/option><option value=\"21\">Parfums &amp; Eau de toilette<\/option><option value=\"87\">Parfums &amp; Eau de toilette<\/option><option value=\"22\">Roll-on &amp; Stick<\/option><option value=\"89\">Roll-on &amp; Stick<\/option><option value=\"26\">Soins Capillaires<\/option><option value=\"20\">Soins Cr\u00e8mes &amp; Corps<\/option><option value=\"93\">Specific Care<\/option><option value=\"81\">Styling &amp; Gels<\/option><option value=\"59\">\u0627\u0644\u062d\u0642\u0627\u0626\u0628 \u0648\u0627\u0644\u0623\u0637\u0642\u0645<\/option><option value=\"63\">\u0627\u0644\u0646\u0638\u0627\u0641\u0629 \u0648\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0634\u0639\u0631<\/option><option value=\"61\">\u062a\u0635\u0641\u064a\u0641 \u0627\u0644\u0634\u0639\u0631 \u0648\u0627\u0644\u062c\u0644<\/option><option value=\"65\">\u0639\u0637\u0631 \u0648 \u0645\u0627\u0621 \u0639\u0637\u0631 \u062e\u0641\u064a\u0641<\/option><option value=\"69\">\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629 \u0648\u0627\u0644\u0643\u0631\u064a\u0645\u0627\u062a \u0648\u0627\u0644\u062c\u0633\u0645<\/option><option value=\"71\">\u0639\u0646\u0627\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629<\/option><option value=\"67\">\u0645\u0632\u064a\u0644 \u0627\u0644\u0639\u0631\u0642 \u0631\u0648\u0644 \u0623\u0648\u0646 \u0648\u0639\u0635\u0627<\/option><option value=\"76\">\u0645\u0632\u064a\u0644\u0627\u062a \u0627\u0644\u0639\u0631\u0642<\/option>            <\/select>\n\n            <!-- Sous-cat\u00e9gorie -->\n            <select name=\"sous_categorie\" id=\"categorie-enfant\" style=\"margin-top:10px;display:none;\">\n                <option value=\"\">Tous<\/option>\n            <\/select>\n\n            <!-- Tri -->\n            <div class=\"title-input-form\" style=\"margin-top:20px;\"><strong>Ordre :<\/strong><\/div>\n            <select name=\"tri\">\n                <option value=\"\">Ordre par d\u00e9faut<\/option>\n                <option value=\"etoile\">Les mieux not\u00e9s<\/option>\n                <option value=\"date\">Les plus r\u00e9cents<\/option>\n                <option value=\"titre\">Ordre alphab\u00e9tique<\/option>\n            <\/select>\n\n            <button type=\"submit\" style=\"margin-top:20px;\">Filtrer<\/button>\n        <\/form>\n\n        <!-- \ud83d\udd39 Liste produits -->\n        <div id=\"produits-resultats\">\n            <p>Chargement des produits...<\/p>\n        <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function(){\n        const form = document.querySelector(\"#filtre-produits\");\n        const container = document.querySelector(\"#produits-resultats\");\n        const catParent = document.querySelector(\"#categorie-parent\");\n        const catEnfant = document.querySelector(\"#categorie-enfant\");\n        let currentPage = 1;\n\n        \/\/ Helper: show loading\n        function showLoading(){\n            container.innerHTML = '<p style=\"opacity:.8; color:white;\">Chargement...<\/p>';\n        }\n\n        \/\/ \ud83d\udd39 Charger les sous-cat\u00e9gories selon le parent s\u00e9lectionn\u00e9\n        catParent.addEventListener(\"change\", function(){\n            const parentId = this.value;\n            \/\/ reset sous-categorie selection\n            catEnfant.innerHTML = '<option value=\"\">Tous<\/option>';\n            catEnfant.style.display = 'none';\n\n            if (!parentId) {\n                \/\/ si \"Toutes\", on veut r\u00e9afficher contenance\/sexe (d\u00e9j\u00e0 dans DOM). Just recharger page 1.\n                currentPage = 1;\n                chargerProduits(1);\n                return;\n            }\n\n            const data = new FormData();\n            data.append(\"action\", \"charger_sous_categories\");\n            data.append(\"parent_id\", parentId);\n\n            fetch(\"http:\/\/dev.alcomnet.com\/cosimad\/wp-admin\/admin-ajax.php\", { method: \"POST\", body: data })\n                .then(res => res.json())\n                .then(sousCats => {\n                    if (Array.isArray(sousCats) && sousCats.length > 0) {\n                        catEnfant.innerHTML = '<option value=\"\">Tous<\/option>';\n                        sousCats.forEach(cat => {\n                            \/\/ cat.term_id \/ cat.slug \/ cat.name\n                            const slug = cat.slug || cat.term_id;\n                            const name = cat.name || '';\n                            catEnfant.innerHTML += `<option value=\"${slug}\">${name}<\/option>`;\n                        });\n                        catEnfant.style.display = \"block\";\n                    } else {\n                        catEnfant.style.display = \"none\";\n                    }\n                    currentPage = 1;\n                    chargerProduits(1);\n                })\n                .catch(() => {\n                    catEnfant.style.display = \"none\";\n                    currentPage = 1;\n                    chargerProduits(1);\n                });\n        });\n\n        \/\/ \ud83d\udd39 Fonction de chargement via AJAX (paged param)\n        function chargerProduits(paged = 1) {\n            showLoading();\n            const data = new FormData(form);\n            data.append(\"action\", \"filtrer_produits\");\n            data.append(\"paged\", String(paged));\n\n            fetch(\"http:\/\/dev.alcomnet.com\/cosimad\/wp-admin\/admin-ajax.php\", { method: \"POST\", body: data })\n                .then(res => res.text())\n                .then(html => {\n                    container.innerHTML = html;\n                    currentPage = paged;\n                    \/\/ lier les \u00e9v\u00e9nements pagination\n                    const pagButtons = container.querySelectorAll('[data-page]');\n                    pagButtons.forEach(btn => {\n                        btn.addEventListener('click', function(e){\n                            e.preventDefault();\n                            const p = parseInt(this.getAttribute('data-page')) || 1;\n                            chargerProduits(p);\n                            \/\/ scroll to top of r\u00e9sultats (optionnel)\n                            container.scrollIntoView({behavior: 'smooth', block: 'start'});\n                        });\n                    });\n                })\n                .catch(() => {\n                    container.innerHTML = '<p>Erreur de chargement.<\/p>';\n                });\n        }\n\n        \/\/ Form submit d\u00e9clenche filtre (page 1)\n        form.addEventListener(\"submit\", function(e){\n            e.preventDefault();\n            chargerProduits(1);\n        });\n\n        \/\/ changements sur inputs\/select trigger instant reload\n        form.addEventListener('change', function(e){\n            \/\/ si c'est la cat\u00e9gorie parent, celui-ci est g\u00e9r\u00e9 plus haut et appelle chargerProduits\n            \/\/ sinon on redemande page 1\n            if (!e.target.matches('#categorie-parent')) {\n                chargerProduits(1);\n            }\n        });\n\n        \/\/ Premier chargement : page 1\n        chargerProduits(1);\n    });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1886","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/pages\/1886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/comments?post=1886"}],"version-history":[{"count":1,"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/pages\/1886\/revisions"}],"predecessor-version":[{"id":1887,"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/pages\/1886\/revisions\/1887"}],"wp:attachment":[{"href":"http:\/\/dev.alcomnet.com\/cosimad\/wp-json\/wp\/v2\/media?parent=1886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}