studio-variable/index-shop
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

product > english > description : nl2br
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source
This commit is contained in:
isUnknown 2026-01-21 11:11:18 +01:00
parent aa873e117f
commit 9b4bd4b731
1 changed files with 82 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

139
assets/js/product-loader.js
View file

@ -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", "<br><br>")
: 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 `
<li>
<input
type="radio"
id="${uniqueId}"
name="${optionSlug}"
value="${value}"
data-variant-id="${variant ? variant.id.replace('gid://shopify/ProductVariant/', '') : ''}"
${!isAvailable ? 'disabled' : ''}
data-variant-id="${
variant
? variant.id.replace("gid://shopify/ProductVariant/", "")
: ""
}"
${!isAvailable ? "disabled" : ""}
/>
<label for="${uniqueId}">${value}</label>
</li>
`;
}).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);
}
}
})();