60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
/**
|
|
* 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);
|
|
|
|
})();
|