diff --git a/assets/js/product-loader.js b/assets/js/product-loader.js
index a8c348d..c728271 100644
--- a/assets/js/product-loader.js
+++ b/assets/js/product-loader.js
@@ -3,8 +3,8 @@
if (!container) return;
const handle = container.dataset.shopifyHandle;
- const language = container.dataset.language || 'fr';
- const isEnglish = language === 'en';
+ const language = container.dataset.language || "fr";
+ const isEnglish = language === "en";
const loadingState = container.querySelector(".product-loading");
const contentState = container.querySelector(".product-content");
const errorState = container.querySelector(".product-error");
@@ -63,9 +63,10 @@
function renderTitle(product, isEnglish) {
const titleEl = document.querySelector("[data-product-title]");
if (titleEl) {
- const title = isEnglish && product.titleEn?.value
- ? product.titleEn.value
- : product.title;
+ const title =
+ isEnglish && product.titleEn?.value
+ ? product.titleEn.value
+ : product.title;
titleEl.textContent = title;
}
}
@@ -81,9 +82,10 @@
function renderDetails(product, isEnglish) {
const detailsEl = document.querySelector("[data-product-details]");
if (detailsEl) {
- const description = isEnglish && product.descriptionEn?.value
- ? product.descriptionEn.value
- : product.descriptionHtml || "";
+ const description =
+ isEnglish && product.descriptionEn?.value
+ ? product.descriptionEn.value.replace("\n", "
")
+ : product.descriptionHtml || "";
detailsEl.innerHTML = description;
}
}
@@ -92,9 +94,10 @@
const imagesContainer = document.querySelector("[data-product-images]");
if (imagesContainer && product.images.edges.length > 0) {
- const productTitle = isEnglish && product.titleEn?.value
- ? product.titleEn.value
- : product.title;
+ const productTitle =
+ isEnglish && product.titleEn?.value
+ ? product.titleEn.value
+ : product.title;
imagesContainer.innerHTML = product.images.edges
.map((edge) => {
@@ -117,12 +120,16 @@
if (product.variants.edges.length <= 1) return;
const firstVariant = product.variants.edges[0].node;
- if (!firstVariant.selectedOptions || firstVariant.selectedOptions.length === 0) return;
+ if (
+ !firstVariant.selectedOptions ||
+ firstVariant.selectedOptions.length === 0
+ )
+ return;
const mainOption = firstVariant.selectedOptions[0];
const optionValues = new Set();
- product.variants.edges.forEach(edge => {
+ product.variants.edges.forEach((edge) => {
const variant = edge.node;
if (variant.selectedOptions && variant.selectedOptions[0]) {
optionValues.add(variant.selectedOptions[0].value);
@@ -137,52 +144,62 @@
if (!optionsContainer || !optionsList) return;
const optionName = mainOption.name;
- const optionSlug = optionName.toLowerCase().replace(/\s+/g, '-');
+ 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;
+ 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 `
+ return `
`;
- }).join('');
+ })
+ .join("");
- optionsContainer.style.display = 'block';
+ 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]');
+ const buttonText = addToCartBtn?.querySelector("[data-button-text]");
- radios.forEach(radio => {
- radio.addEventListener('change', function() {
+ radios.forEach((radio) => {
+ radio.addEventListener("change", function () {
const variantId = this.dataset.variantId;
if (addToCartBtn) {
addToCartBtn.dataset.variantId = variantId;
- addToCartBtn.removeAttribute('disabled');
+ addToCartBtn.removeAttribute("disabled");
}
if (buttonText) {
- buttonText.textContent = addToCartBtn.dataset.defaultText || 'Ajouter au panier';
+ 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');
+ const allLi = optionsList.querySelectorAll("li");
+ allLi.forEach((li) => li.classList.remove("is-selected"));
+ this.closest("li").classList.add("is-selected");
});
});
}
@@ -196,10 +213,11 @@
const hasMultipleVariants = product.variants.edges.length > 1;
const firstVariant = product.variants.edges[0]?.node;
- const hasOptions = firstVariant?.selectedOptions && firstVariant.selectedOptions.length > 0;
+ const hasOptions =
+ firstVariant?.selectedOptions && firstVariant.selectedOptions.length > 0;
const uniqueOptions = new Set();
- product.variants.edges.forEach(edge => {
+ product.variants.edges.forEach((edge) => {
if (edge.node.selectedOptions && edge.node.selectedOptions[0]) {
uniqueOptions.add(edge.node.selectedOptions[0].value);
}
@@ -207,10 +225,11 @@
const hasMultipleOptions = uniqueOptions.size > 1;
if (hasMultipleVariants && hasOptions && hasMultipleOptions) {
- addToCartBtn.setAttribute('disabled', 'disabled');
- const buttonText = addToCartBtn.querySelector('[data-button-text]');
+ addToCartBtn.setAttribute("disabled", "disabled");
+ const buttonText = addToCartBtn.querySelector("[data-button-text]");
if (buttonText) {
- buttonText.textContent = addToCartBtn.dataset.textChooseOption || 'Choisissez une option';
+ buttonText.textContent =
+ addToCartBtn.dataset.textChooseOption || "Choisissez une option";
}
} else {
const firstAvailableVariant = product.variants.edges.find(
@@ -228,44 +247,50 @@
function updateMetaTags(product, isEnglish) {
// Update title and description
- const title = isEnglish && product.titleEn?.value
- ? product.titleEn.value
- : product.title;
- const description = isEnglish && product.descriptionEn?.value
- ? product.descriptionEn.value
- : product.description;
+ const title =
+ isEnglish && product.titleEn?.value
+ ? product.titleEn.value
+ : product.title;
+ const description =
+ isEnglish && product.descriptionEn?.value
+ ? product.descriptionEn.value
+ : product.description;
// Update Open Graph title
- const ogTitle = document.getElementById('og-title');
+ const ogTitle = document.getElementById("og-title");
if (ogTitle) {
- ogTitle.setAttribute('content', title);
+ ogTitle.setAttribute("content", title);
}
// Update Open Graph description
- const ogDescription = document.getElementById('og-description');
+ const ogDescription = document.getElementById("og-description");
if (ogDescription && description) {
const excerpt = description.substring(0, 160);
- ogDescription.setAttribute('content', excerpt);
+ ogDescription.setAttribute("content", excerpt);
}
// Update Open Graph image
- const ogImage = document.getElementById('og-image');
+ const ogImage = document.getElementById("og-image");
if (ogImage && product.images.edges.length > 0) {
- ogImage.setAttribute('content', product.images.edges[0].node.url);
+ ogImage.setAttribute("content", product.images.edges[0].node.url);
}
// Update product price
- const ogPrice = document.getElementById('og-price');
+ const ogPrice = document.getElementById("og-price");
if (ogPrice) {
- const price = parseFloat(product.priceRange.minVariantPrice.amount).toFixed(2);
- ogPrice.setAttribute('content', price);
+ const price = parseFloat(
+ product.priceRange.minVariantPrice.amount
+ ).toFixed(2);
+ ogPrice.setAttribute("content", price);
}
// Update availability
- const ogAvailability = document.getElementById('og-availability');
+ const ogAvailability = document.getElementById("og-availability");
if (ogAvailability) {
- const availability = product.availableForSale ? 'in stock' : 'out of stock';
- ogAvailability.setAttribute('content', availability);
+ const availability = product.availableForSale
+ ? "in stock"
+ : "out of stock";
+ ogAvailability.setAttribute("content", availability);
}
// Update page title
@@ -275,7 +300,7 @@
let metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription && description) {
const excerpt = description.substring(0, 160);
- metaDescription.setAttribute('content', excerpt);
+ metaDescription.setAttribute("content", excerpt);
}
}
})();