_Test liste formations

Collection introuvable

`; console.error("Collection non trouvée ou handle incorrect"); return; } const products = collection.products.edges; // Filtrer uniquement les produits valides const validProducts = products .map(item => item.node) .filter(p => p && p.id && p.id.startsWith(`gid://shopify/Product`)); // Générer le HTML pour tous les produits let html = `

`; document.getElementById("calendar-collection").innerHTML = html; // Créer les Buy Buttons Shopify après que le HTML existe validProducts.forEach(p => { const safeId = p.id.replace(/[^a-zA-Z0-9]/g, ``); const container = document.getElementById(`buy-btn-` + safeId); // Sécurité maximale if (!container || !p.id) return; const numericId = p.id.split(`/`).pop(); // Debug : vérifier l`ID console.log("Produit OK :", p.title, "ID numérique :", numericId); ui.createComponent(`product`, { id: numericId, node: container, moneyFormat: `%7B%7Bamount%7D%7D ` + p.priceRange.minVariantPrice.currencyCode, options: { product: { styles: { button: { ":hover": { "background-color": "#e68a2e" }, "background-color": "#ff9933", ":focus": { "background-color": "#e68a2e" } } }, iframe: false, contents: { img:false, title:false, price:false, button:true, options:false }, buttonDestination: "modal", text: { button: "Voir les détails" } }, modalProduct: { contents: { img: false, imgWithCarousel: true, button: false, buttonWithQuantity: true }, styles: { product: { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, button: { ":hover": { "background-color": "#e68a2e" }, "background-color": "#ff9933", ":focus": { "background-color": "#e68a2e" } } }, text: { button: "Ajouter au panier" } }, cart: { styles: { button: { ":hover": { "background-color": "#e68a2e" }, "background-color": "#ff9933", ":focus": { "background-color": "#e68a2e" } } }, text: { title: "Votre panier", total: "Sous-total", empty: "Votre panier est vide", notice: "", button: "Passer à la caisse" } }, toggle: { styles: { toggle: { "background-color": "#ff9933", ":hover": { "background-color": "#e68a2e" }, ":focus": { "background-color": "#e68a2e" } } } } } }); console.log("Création Buy Button terminée pour :", p.title, "ID :", p.id); }); } catch (error) { console.error("Erreur Shopify GraphQL :", error); document.getElementById("calendar-collection").innerHTML = `

Erreur de chargement

`; } } })();