index-shop/assets/js/product-size.js

/**
 * 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');

                // Changer le texte du bouton
                const buttonText = addToCartButton.querySelector('.txt');
                if (buttonText) {
                    buttonText.textContent = buttonText.getAttribute('data-default-text') || 'Ajouter au panier';
                }

                // 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);

})();