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

Compare commits

base: studio-variable:main
Branches Tags
studio-variable:main
studio-variable:correctif
studio-variable:sliders
..
compare: studio-variable:correctif
Branches Tags
studio-variable:main
studio-variable:correctif
studio-variable:sliders

No commits in common. "main" and "correctif" have entirely different histories.
main ... correctif

10 changed files with 65 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/style.css
View file

@ -1054,10 +1054,6 @@ body.is-fullscreen {
margin-right: auto;
}
.product-content {
display: contents;
}
.store__nav {
padding-top: calc(var(--spacing) * 1);
padding-bottom: calc(var(--spacing) * 0.5);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

4
assets/css/template/shop/_section--product.scss
View file

@ -5,10 +5,6 @@
margin-right: auto;
}
.product-content {
display: contents;
}
.store__nav {
padding-top: calc(var(--spacing) * 1);
padding-bottom: calc(var(--spacing) * 0.5);

15
assets/js/cart-drawer.js
View file

@ -32,9 +32,6 @@
// Initialize event listeners
setupEventListeners();
// Load initial cart state
loadCart();
}
function setupEventListeners() {
@ -63,18 +60,6 @@
});
}
async function loadCart() {
if (!cartInstance) return;
try {
const cart = await cartInstance.getCart();
currentCart = cart;
renderCart();
} catch (error) {
console.error('Error loading cart:', error);
}
}
function openDrawer() {
drawer.classList.add('is-open');
document.body.style.overflow = 'hidden';

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,10 +63,9 @@
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;
}
}
@ -82,10 +81,9 @@
function renderDetails(product, isEnglish) {
const detailsEl = document.querySelector("[data-product-details]");
if (detailsEl) {
const description =
isEnglish && product.descriptionEn?.value
? product.descriptionEn.value.replaceAll("\n", "<br>")
: product.descriptionHtml || "";
const description = isEnglish && product.descriptionEn?.value
? product.descriptionEn.value
: product.descriptionHtml || "";
detailsEl.innerHTML = description;
}
}
@ -94,10 +92,9 @@
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) => {
@ -120,16 +117,12 @@
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);
@ -144,62 +137,52 @@
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');
});
});
}
@ -213,11 +196,10 @@
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);
}
@ -225,11 +207,10 @@
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(
@ -247,50 +228,44 @@
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
@ -300,7 +275,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);
}
}
})();

52
assets/js/shopify-cart.js
View file

@ -306,58 +306,6 @@ class ShopifyCart {
return cart;
}
/**
* Get existing cart by ID
*/
async getCart() {
if (!this.cartId) {
return null;
}
const query = `
query getCart($cartId: ID!) {
cart(id: $cartId) {
id
checkoutUrl
lines(first: 10) {
edges {
node {
id
quantity
merchandise {
... on ProductVariant {
id
title
price {
amount
currencyCode
}
product {
title
}
}
}
}
}
}
}
}
`;
try {
const data = await this.query(query, {
cartId: this.cartId
});
return data.cart;
} catch (error) {
// Cart might be expired or invalid
console.error('Error fetching cart:', error);
this.clearCart();
return null;
}
}
/**
* Get checkout URL to redirect user
*/

5
content/error/error.en.txt
View file

@ -1,5 +0,0 @@
Title: Error
----
Template: default

6
content/error/error.fr.txt
View file

@ -1,5 +1 @@
Title: Erreur
----
Uuid: kcrqkszqasludg2h
Uuid: kcrqkszqasludg2h

50
site/config/config.php
View file

@ -25,56 +25,6 @@ return [
);
}
],
// English homepage
[
'pattern' => 'en',
'action' => function() {
$home = page('home');
if ($home) {
site()->visit($home, 'en');
return $home;
}
return null;
}
],
// English thanks page
[
'pattern' => 'en/thanks',
'action' => function() {
$thanks = page('thanks');
if ($thanks) {
site()->visit($thanks, 'en');
return $thanks;
}
return null;
}
],
// English error page
[
'pattern' => 'en/error',
'action' => function() {
$error = page('error');
if ($error) {
site()->visit($error, 'en');
return $error;
}
return null;
}
],
// French thanks page
[
'pattern' => 'thanks',
'action' => function() {
return page('thanks');
}
],
// French error page
[
'pattern' => 'error',
'action' => function() {
return page('error');
}
],
// French products (default)
[
'pattern' => '(:any)',

22
site/snippets/structured-data-product.php
View file

@ -38,18 +38,12 @@
const language = container.dataset.language || 'fr';
const isEnglish = language === 'en';
function initStructuredData() {
if (typeof ShopifyCart === 'undefined') {
setTimeout(initStructuredData, 100);
return;
}
const cart = new ShopifyCart({
domain: 'nv7cqv-bu.myshopify.com',
storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
});
const cart = new ShopifyCart({
domain: 'nv7cqv-bu.myshopify.com',
storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
});
cart.getProductByHandle(handle).then(product => {
cart.getProductByHandle(handle).then(product => {
if (!product) return;
const title = isEnglish && product.titleEn?.value ? product.titleEn.value : product.title;
@ -85,10 +79,6 @@
if (schemaScript) {
schemaScript.textContent = JSON.stringify(schema, null, 2);
}
});
}
// Initialize when ShopifyCart is available
initStructuredData();
});
})();
</script>