first commit

assets/js/product-size.js

@@ -0,0 +1,60 @@
+/**
+ * Gestion de la sélection des options produit
+ * Met à jour les attributs Snipcart et gère les classes CSS
+ */
+
+(function() {
+    'use strict';
+
+    /**
+     * Initialise la gestion des options
+     */
+    function initOptionSelector() {
+        const optionsContainer = document.querySelector('.product-options');
+        const addToCartButton = document.querySelector('.snipcart-add-item');
+
+        if (!addToCartButton) {
+            return;
+        }
+
+        // Si pas d'options, le bouton est déjà actif
+        if (!optionsContainer) {
+            return;
+        }
+
+        const radios = optionsContainer.querySelectorAll('input[type="radio"]');
+
+        // Réinitialiser toutes les options (important pour le cache navigateur)
+        radios.forEach(radio => {
+            radio.checked = false;
+        });
+
+        // Retirer la classe is-selected de tous les li
+        const allLi = optionsContainer.querySelectorAll('li');
+        allLi.forEach(li => li.classList.remove('is-selected'));
+
+        // S'assurer que le bouton est désactivé au départ
+        addToCartButton.setAttribute('disabled', 'disabled');
+
+        // Écouter les changements de sélection
+        radios.forEach(radio => {
+            radio.addEventListener('change', function() {
+                // Mettre à jour l'attribut Snipcart
+                addToCartButton.setAttribute('data-item-custom1-value', this.value);
+
+                // Activer le bouton
+                addToCartButton.removeAttribute('disabled');
+
+                // Gérer la classe is-selected sur les li parents
+                allLi.forEach(li => li.classList.remove('is-selected'));
+                this.closest('li').classList.add('is-selected');
+            });
+        });
+    }
+
+    /**
+     * Initialisation au chargement de la page
+     */
+    document.addEventListener('DOMContentLoaded', initOptionSelector);
+
+})();