diff --git a/assets/js/cart-drawer.js b/assets/js/cart-drawer.js
index 95972c1..439c3d1 100644
--- a/assets/js/cart-drawer.js
+++ b/assets/js/cart-drawer.js
@@ -32,6 +32,9 @@
// Initialize event listeners
setupEventListeners();
+
+ // Load initial cart state
+ loadCart();
}
function setupEventListeners() {
@@ -60,6 +63,18 @@
});
}
+ 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';
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);
}
}
})();
diff --git a/assets/js/shopify-cart.js b/assets/js/shopify-cart.js
index 18b1338..396ae38 100644
--- a/assets/js/shopify-cart.js
+++ b/assets/js/shopify-cart.js
@@ -306,6 +306,58 @@ 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
*/
diff --git a/site/config/shopify.php b/site/config/shopify.php
index d111b49..cbd0d2e 100644
--- a/site/config/shopify.php
+++ b/site/config/shopify.php
@@ -43,6 +43,7 @@ function fetchShopifyProducts(): array
$ch = curl_init($endpoint);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // Nécessaire pour dev local sur Windows
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'X-Shopify-Storefront-Access-Token: ' . $token
diff --git a/site/snippets/structured-data-product.php b/site/snippets/structured-data-product.php
index b6bfefd..2390bc8 100644
--- a/site/snippets/structured-data-product.php
+++ b/site/snippets/structured-data-product.php
@@ -38,12 +38,18 @@
const language = container.dataset.language || 'fr';
const isEnglish = language === 'en';
- const cart = new ShopifyCart({
- domain: 'nv7cqv-bu.myshopify.com',
- storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
- });
+ function initStructuredData() {
+ if (typeof ShopifyCart === 'undefined') {
+ setTimeout(initStructuredData, 100);
+ return;
+ }
- cart.getProductByHandle(handle).then(product => {
+ const cart = new ShopifyCart({
+ domain: 'nv7cqv-bu.myshopify.com',
+ storefrontAccessToken: 'dec3d35a2554384d149c72927d1cfd1b'
+ });
+
+ cart.getProductByHandle(handle).then(product => {
if (!product) return;
const title = isEnglish && product.titleEn?.value ? product.titleEn.value : product.title;
@@ -79,6 +85,10 @@
if (schemaScript) {
schemaScript.textContent = JSON.stringify(schema, null, 2);
}
- });
+ });
+ }
+
+ // Initialize when ShopifyCart is available
+ initStructuredData();
})();