shopify wishlist

Liste de souhaits Shopify

Un ensemble de fichiers utilisés pour implémenter une simple liste de souhaits client sur une boutique Shopify.

Version : 2.3.0 - Compatible avec la boutique en ligne 2.0

Versions précédentes :

• v2.1.0 (Boutique en ligne 1.0)
• v2.0.0
• v1.0.0

Installation

Pour commencer à utiliser Shopify Wishlist , vous devez copier certains des fichiers de ce référentiel dans votre code de thème Shopify.

Remarque : Cette configuration suppose que vous disposez d'un extrait pour afficher une fiche produit.

Fichiers à copier :

Fichier de dépôt	Emplacement du thème Shopify
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. Placez l'extrait de code button-wishlist.liquid dans l'extrait de votre fiche produit existant ou sur le modèle product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • Cela permettra aux clients d'ajouter/supprimer des articles de/de leur liste de souhaits.
2. Remplacez l'extrait de la section product-card-template.liquid par votre extrait de fiche produit existant.
   • Même extrait de l'étape 1
   • L'extrait de votre fiche produit peut utiliser un nom de variable de produit différent, vérifiez-le ?
3. Ajoutez le nom de classe de l'élément de votre fiche produit à l'objet selectors dans Wishlist.js
   • Exemple : Si le nom de classe de votre fiche produit est .product-item , la variable selectors ressemblerait à ceci :

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Créez une nouvelle page dans l'administrateur Shopify :
   • Administrateur > Boutique en ligne > Pages > Ajouter une page
   • Définissez le template de la nouvelle page sur page.wishlist
   • Cette page affichera les éléments de la liste de souhaits enregistrés d'un client
5. Placez le script dans theme.liquid avant la balise de fermeture </head>
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

C'est ça! Lorsque vous consultez votre boutique Shopify, vous devriez voir les boutons de liste de souhaits à l'intérieur de vos fiches produits (probablement sur les pages de collections) ou sur le modèle de produit. Un clic sur le bouton de la liste de souhaits ajoutera/supprimera l'article de la liste de souhaits du client et déclenchera un style actif sur le bouton. Après avoir ajouté des éléments de liste de souhaits, vous pouvez afficher votre liste de souhaits en accédant à la page créée à l'étape 3.

Démo Boutique Shopify

Remarques

• Cette liste de souhaits utilise Javascript et localStorage pour enregistrer la liste de souhaits du client sur son navigateur. Le localStorage ne persistera pas si l'utilisateur efface le stockage du navigateur ou navigue en mode navigation privée.
• Au fur et à mesure que les clients parcourent les produits et les ajoutent à leur liste de souhaits, le script définira automatiquement tous les boutons de la liste de souhaits à l'état actif si le produit correspondant est déjà inclus dans la liste de souhaits.
• Ces fichiers sont livrés sans style ni structure afin que vous puissiez les personnaliser selon vos besoins. Ceci est destiné à vous apporter la fonctionnalité de base d’une liste de souhaits sans fioritures.
• Si vous travaillez sur un thème non publié, vous devrez également créer les nouveaux modèles sur le thème publié. L'administrateur Shopify ne vous permettra d'attribuer une page à un modèle que si le modèle existe sur le thème publié.
• Si vous effectuez une mise à niveau vers la version 2.0 de la boutique en ligne, vous devrez supprimer les anciens modèles de liste de souhaits et de fiches produits .liquid .