diff --git a/assets/js/product-loader.js b/assets/js/product-loader.js index 142e4ad..b8c54bf 100644 --- a/assets/js/product-loader.js +++ b/assets/js/product-loader.js @@ -55,9 +55,8 @@ renderPrice(product); renderDetails(product, isEnglish); renderImages(product, isEnglish); - renderVariants(product); + renderOptions(product); setupAddToCart(product); - renderStock(product); } function renderTitle(product, isEnglish) { @@ -113,42 +112,78 @@ } } - function renderVariants(product) { + function renderOptions(product) { if (product.variants.edges.length <= 1) return; - const variantsContainer = document.querySelector("[data-product-variants]"); - const variantSelector = document.querySelector("[data-variant-selector]"); + const firstVariant = product.variants.edges[0].node; + if (!firstVariant.selectedOptions || firstVariant.selectedOptions.length === 0) return; - if (!variantsContainer || !variantSelector) return; + const mainOption = firstVariant.selectedOptions[0]; + const optionValues = new Set(); - variantsContainer.style.display = "block"; - - variantSelector.innerHTML = product.variants.edges - .map((edge) => { - const variant = edge.node; - const variantId = variant.id.replace( - "gid://shopify/ProductVariant/", - "" - ); - const price = parseFloat(variant.price.amount).toFixed(2) + "€"; - const availability = variant.availableForSale - ? "" - : " (Rupture de stock)"; - - return ``; - }) - .join(""); - - variantSelector.addEventListener("change", (e) => { - const addToCartBtn = document.querySelector("[data-shopify-add-to-cart]"); - if (addToCartBtn) { - addToCartBtn.dataset.variantId = e.target.value; + product.variants.edges.forEach(edge => { + const variant = edge.node; + if (variant.selectedOptions && variant.selectedOptions[0]) { + optionValues.add(variant.selectedOptions[0].value); } }); + + if (optionValues.size <= 1) return; + + const optionsContainer = document.querySelector("[data-product-options]"); + const optionsList = document.querySelector("[data-product-options-list]"); + + if (!optionsContainer || !optionsList) return; + + const optionName = mainOption.name; + const optionSlug = optionName.toLowerCase().replace(/\s+/g, '-'); + + optionsList.innerHTML = Array.from(optionValues).map((value) => { + const uniqueId = `${optionSlug}-${value.toLowerCase().replace(/\s+/g, '-')}`; + const variant = product.variants.edges.find(e => + e.node.selectedOptions && e.node.selectedOptions[0]?.value === value + )?.node; + const isAvailable = variant?.availableForSale || false; + + return ` +
  • + + +
    • + `; + }).join(''); + + optionsContainer.style.display = 'block'; + + const radios = optionsList.querySelectorAll('input[type="radio"]'); + const addToCartBtn = document.querySelector("[data-shopify-add-to-cart]"); + const buttonText = addToCartBtn?.querySelector('[data-button-text]'); + + radios.forEach(radio => { + radio.addEventListener('change', function() { + const variantId = this.dataset.variantId; + + if (addToCartBtn) { + addToCartBtn.dataset.variantId = variantId; + addToCartBtn.removeAttribute('disabled'); + } + + if (buttonText) { + buttonText.textContent = addToCartBtn.dataset.defaultText || 'Ajouter au panier'; + } + + const allLi = optionsList.querySelectorAll('li'); + allLi.forEach(li => li.classList.remove('is-selected')); + this.closest('li').classList.add('is-selected'); + }); + }); } function setupAddToCart(product) { @@ -158,31 +193,35 @@ const productId = product.id.replace("gid://shopify/Product/", ""); addToCartBtn.dataset.productId = productId; - const firstAvailableVariant = product.variants.edges.find( - (e) => e.node.availableForSale - ); - if (firstAvailableVariant) { - const variantId = firstAvailableVariant.node.id.replace( - "gid://shopify/ProductVariant/", - "" - ); - addToCartBtn.dataset.variantId = variantId; - } - } + const hasMultipleVariants = product.variants.edges.length > 1; + const firstVariant = product.variants.edges[0]?.node; + const hasOptions = firstVariant?.selectedOptions && firstVariant.selectedOptions.length > 0; - function renderStock(product) { - const stockEl = document.querySelector("[data-product-stock]"); - if (!stockEl) return; + const uniqueOptions = new Set(); + product.variants.edges.forEach(edge => { + if (edge.node.selectedOptions && edge.node.selectedOptions[0]) { + uniqueOptions.add(edge.node.selectedOptions[0].value); + } + }); + const hasMultipleOptions = uniqueOptions.size > 1; - const addToCartBtn = document.querySelector("[data-shopify-add-to-cart]"); - - if (product.availableForSale) { - stockEl.textContent = addToCartBtn?.dataset.textInStock || "En stock"; - stockEl.classList.add("in-stock"); + if (hasMultipleVariants && hasOptions && hasMultipleOptions) { + addToCartBtn.setAttribute('disabled', 'disabled'); + const buttonText = addToCartBtn.querySelector('[data-button-text]'); + if (buttonText) { + buttonText.textContent = addToCartBtn.dataset.textChooseOption || 'Choisissez une option'; + } } else { - stockEl.textContent = - addToCartBtn?.dataset.textOutOfStock || "Rupture de stock"; - stockEl.classList.add("out-of-stock"); + const firstAvailableVariant = product.variants.edges.find( + (e) => e.node.availableForSale + ); + if (firstAvailableVariant) { + const variantId = firstAvailableVariant.node.id.replace( + "gid://shopify/ProductVariant/", + "" + ); + addToCartBtn.dataset.variantId = variantId; + } } } })(); diff --git a/site/languages/en.php b/site/languages/en.php index 19e9aec..e356f2c 100644 --- a/site/languages/en.php +++ b/site/languages/en.php @@ -30,6 +30,7 @@ return [ 'loading' => 'Loading...', 'productNotFound' => 'Product not found', 'selectVariant' => 'Select', + 'chooseOption' => 'Choose an option', // Blueprints - Home 'home.title' => 'Home', diff --git a/site/languages/fr.php b/site/languages/fr.php index 249bb4d..98c263d 100644 --- a/site/languages/fr.php +++ b/site/languages/fr.php @@ -30,6 +30,7 @@ return [ 'loading' => 'Chargement...', 'productNotFound' => 'Produit non trouvé', 'selectVariant' => 'Choisir', + 'chooseOption' => 'Choisissez une option', // Blueprints - Home 'home.title' => 'Accueil', diff --git a/site/snippets/buy-button.php b/site/snippets/buy-button.php index 7769f2e..4f2bc74 100644 --- a/site/snippets/buy-button.php +++ b/site/snippets/buy-button.php @@ -1,25 +1,20 @@ -
    -
    -

    -
    - - - +
    diff --git a/site/templates/product.php b/site/templates/product.php index 46d2487..3a58eaa 100644 --- a/site/templates/product.php +++ b/site/templates/product.php @@ -27,6 +27,10 @@ snippet('header', ['title' => $page->title(), 'template' => 'shop']);
    + +