shopify wishlist

Shopify-Wunschliste

Eine Reihe von Dateien, die zum Implementieren einer einfachen Kundenwunschliste in einem Shopify-Shop verwendet werden.

Version: 2.3.0 – Kompatibel mit Online Store 2.0

Frühere Versionen:

• v2.1.0 (Online-Shop 1.0)
• v2.0.0
• v1.0.0

Installation

Um mit der Nutzung der Shopify-Wunschliste zu beginnen, müssen Sie einige der Dateien in diesem Repo in Ihren Shopify-Theme-Code kopieren.

Hinweis : Bei diesem Setup wird davon ausgegangen, dass Sie über ein Snippet zum Anzeigen einer Produktkarte verfügen.

Zu kopierende Dateien:

Repo-Datei	Speicherort des Shopify-Themes
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. Platzieren Sie das button-wishlist.liquid Snippet in Ihrem vorhandenen Produktkarten-Snippet oder auf der Vorlage product.liquid .
   • {%- render 'button-wishlist', product: product -%}
   • Dadurch können Kunden Artikel zu ihrer Wunschliste hinzufügen bzw. daraus entfernen
2. Ersetzen Sie das Snippet im Abschnitt product-card-template.liquid durch Ihr vorhandenes Produktkarten-Snippet
   • Gleicher Ausschnitt aus Schritt 1
   • Ihr Produktkarten-Snippet verwendet möglicherweise einen anderen Produktvariablennamen. Überprüfen Sie ihn noch einmal?
3. Fügen Sie den Klassennamen Ihres Produktkartenelements zum selectors in Wishlist.js hinzu
   • Beispiel: Wenn der Klassenname Ihrer Produktkarte .product-item lautet, würde die Variable selectors wie folgt aussehen:

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

4. Erstellen Sie eine neue Seite im Shopify-Adminbereich:
   • Admin > Online-Shop > Seiten > Seite hinzufügen
   • Legen Sie die template der neuen Seite auf page.wishlist fest
   • Auf dieser Seite werden die gespeicherten Wunschlistenartikel eines Kunden angezeigt
5. Platzieren Sie das Skript in theme.liquid vor dem schließenden </head> -Tag
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

Das ist es! Wenn Sie sich Ihren Shopify-Shop ansehen, sollten Sie die Schaltflächen zur Wunschliste in Ihren Produktkarten (wahrscheinlich auf den Kollektionsseiten) oder in der Produktvorlage sehen. Durch Klicken auf die Schaltfläche „Wunschliste“ wird der Artikel zur Wunschliste des Kunden hinzugefügt/entfernt und ein aktives Styling auf der Schaltfläche ausgelöst. Nachdem Sie Wunschlistenelemente hinzugefügt haben, können Sie Ihre Wunschliste anzeigen, indem Sie zu der in Schritt 3 erstellten Seite navigieren.

Demo Shopify Store

Notizen

• Diese Wunschliste verwendet Javascript und localStorage, um die Wunschliste des Kunden in seinem Browser zu speichern. Der localStorage bleibt nicht bestehen, wenn der Benutzer den Browserspeicher löscht oder im Inkognitomodus surft.
• Wenn Kunden Produkte durchsuchen und sie zu ihrer Wunschliste hinzufügen, setzt das Skript alle Wunschlistenschaltflächen automatisch in den aktiven Status, wenn das entsprechende Produkt bereits in der Wunschliste enthalten ist.
• Diese Dateien haben weder Stil noch Struktur, sodass Sie sie nach Bedarf anpassen können. Dies soll Ihnen die Grundfunktionalität einer Wunschliste ohne Schnickschnack bieten.
• Wenn Sie an einem unveröffentlichten Theme arbeiten, müssen Sie die neuen Vorlagen auch für das veröffentlichte Theme erstellen. Der Shopify-Administrator erlaubt Ihnen nur, einer Vorlage eine Seite zuzuweisen, wenn die Vorlage im veröffentlichten Theme vorhanden ist.
• Wenn Sie ein Upgrade auf die Online Store 2.0-Version durchführen, müssen Sie die älteren .liquid Wunschlisten- und Produktkartenvorlagen löschen.