index-shop/assets/snipcart-archive

Archive Snipcart

Cette archive contient tous les fichiers et le code nécessaires pour réactiver l'intégration Snipcart si besoin.

Date d'archivage

13 janvier 2026

Raison de l'archivage

Remplacement par l'intégration Shopify Buy Button

---

Fichiers archivés

Fichiers JavaScript

• snipcart.js - Loader Snipcart avec configuration de la clé API
• product-size.js - Gestion des options produit (tailles, etc.) pour Snipcart

Fichiers SCSS

• _snipcart.scss - Styles pour le modal Snipcart

---

Comment restaurer l'intégration Snipcart

1. Restaurer les fichiers JavaScript

Fichier: assets/js/snipcart.js

Copier le fichier depuis l'archive:

cp assets/snipcart-archive/snipcart.js assets/js/

Fichier: assets/js/product-size.js

Copier le fichier depuis l'archive:

cp assets/snipcart-archive/product-size.js assets/js/

2. Restaurer les styles SCSS

Fichier: assets/css/template/shop/_snipcart.scss

Copier le fichier depuis l'archive:

cp assets/snipcart-archive/_snipcart.scss assets/css/template/shop/

Puis décommenter l'import dans assets/css/style.scss:

// Décommenter cette ligne:
@import 'template/shop/snipcart';

3. Restaurer le template produit

Fichier: site/templates/product.php

1. Restaurer le bouton "Ajouter au panier" avec les attributs Snipcart (ligne ~40-78):

   • Décommenter tous les attributs data-item-* du bouton
   • Ajouter la classe snipcart-add-item au bouton

2. Restaurer les scripts dans le footer (ligne 114):

   <?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js', 'assets/js/product-gallery.js']]) ?>
   

4. Restaurer les routes et webhooks

Fichier: site/config/config.php

Décommenter les routes Snipcart (lignes 39-147):

1. Route de validation produit (validate.json):

   • Permet à Snipcart de valider les prix et stock
   • Route: (:any)/validate.json

2. Webhook Snipcart:

   • Gère les événements de commande (décrémente le stock)
   • Route: snipcart-webhook

5. Configuration Snipcart

Clé API publique

La clé API publique Snipcart est dans snipcart.js:

publicApiKey: 'NGU4ODQ3MjAtY2MzMC00MWEyLWI2YTMtNjBmNGYzMTBlOTZkNjM4OTY1NDY4OTE5MTQyMTI3'

Configuration du webhook

Pour que le webhook fonctionne, il faut:

1. Configurer l'URL du webhook dans le dashboard Snipcart
2. URL: https://votre-domaine.com/snipcart-webhook
3. Événements à écouter: order.completed

6. Vérifications après restauration

• Les fichiers JS sont présents dans assets/js/
• Le fichier SCSS est présent et importé
• Les boutons "Ajouter au panier" ont la classe snipcart-add-item
• Les attributs data-item-* sont présents sur les boutons
• Les routes sont décommentées dans config.php
• Le CSS de Snipcart est compilé
• Le webhook est configuré dans le dashboard Snipcart
• Les traductions sont restaurées dans site/languages/en.php et fr.php

---

Fonctionnalités Snipcart implémentées

Gestion des produits

• Affichage du prix
• Options de produit (tailles, couleurs, etc.)
• Validation des options obligatoires
• Images produit

Gestion du panier

• Ajout au panier
• Gestion du stock
• Calcul des frais de port (basé sur poids/dimensions)
• Validation des prix côté serveur

Gestion des commandes

• Webhook pour décrémenter le stock automatiquement
• Redirection vers page de remerciement après paiement
• Token de commande dans l'URL

Multi-langue

• Support FR/EN
• Redirection post-paiement avec détection de la langue

---

Dépendances externes

CDN Snipcart

Snipcart est chargé depuis le CDN officiel:

• Version: 3.0
• JS: https://cdn.snipcart.com/themes/v3.0/default/snipcart.js
• CSS: https://cdn.snipcart.com/themes/v3.0/default/snipcart.css

Stratégie de chargement

• loadStrategy: 'on-user-interaction'
• Chargement différé pour optimiser les performances
• Timeout: 2750ms

---

Notes importantes

1. Sécurité: Le webhook devrait valider la signature Snipcart en production (voir commentaire dans config.php)

2. Stock: Le système décrémente automatiquement le stock via le webhook order.completed

3. Validation: Chaque produit expose une route validate.json pour que Snipcart puisse vérifier les prix

4. Multi-langue: La redirection post-paiement détecte automatiquement la langue depuis l'URL

---

Support

Pour toute question sur Snipcart:

• Documentation: https://docs.snipcart.com/
• Support: https://snipcart.com/support