Shopware5 - Yook Tech Guide

Starte mit Yook und folge dieser Schritt-für-Schritt-Anleitung, die alles von der Installation über das Testen bis hin zum Livegang abdeckt. Die Einrichtung des Plugins dauert in etwa 15-30 Minuten.

Plugin herunterladen

Hier kannst du die Plugin-Datei für Shopware 5 herunterladen:

Plugin installieren

  1. Öffne dein Shopware 5 Backend und gehe zu Einstellungen → Plugin Manager.

  2. Im Menü auf der linken Seite, klicke auf Installiert.

  3. Dann oben auf der Seite auf Plugin hochladen klicken.

  4. Im Popup, auf Auswählen klicken und dorthin gehen, wo du die ZIP-Datei vom Yook-Plugin gespeichert hast.

  5. Anschließend im Popup auf Plugin hochladen klicken.

  6. Wenn es hochgeladen ist, wird das Yook-Plugin unter dem Namen “Yook - Klimaschutz für Onlineshops” im Abschnitt Deinstalliert angezeigt. Um das Plugin zu installieren, klicke am Ende der Zeile auf den grünen Kreis mit dem weißen Plus.

  7. Klicke auf Ja, um den Cache zu leeren.

  8. Dann klicke auf Themes kompilieren.

  9. Im neuen Fenster auf Aktivieren klicken. Das Yook-Plugin startet automatisch im Testmodus.

  10. Klicke auf Ja, um den Cache erneut zu leeren.

  11. Nun siehst du unter Einstellungen einen neuen Navigationspunkt: Yook Admin Panel.

Plugin konfigurieren

Zum Yook Admin Panel gehen

Bevor das Yook-Plugin live geht, muss es konfiguriert werden, um Transaktionsdaten an die Yook-API zu senden. Wir haben das Yook Admin Panel erstellt, um dabei zu helfen.​

Zum Yook Admin Panel gelangst du über Einstellungen -> Yook Admin Panel.

Yook Store ID eingeben

Gib die Store ID ein, die du von deiner Yook-Kontaktperson erhalten hast.

Wenn du die Yook Store ID nicht findest, kontaktiere bitte [email protected].

API-Schlüssel eingeben

Um das Yook-Plugin/dein Shopsystem mit der Yook-API zu verbinden, gib nun den 40-stelligen API-Schlüssel ein, den du von deiner Yook-Kontaktperson erhalten hast. Für die Testphase verwende bitte den Test API-Schlüssel.

Wenn du den API-Schlüssel nicht findest, kontaktiere bitte [email protected].

Der API-Schlüssel ist privat und allein für die Nutzung mit deinem Shopsystem gedacht. Bitte bewahre den Schlüssel sicher auf und gib ihn nicht an andere weiter.

Testumgebung

Um direkt im Testmodus zu starten, haben wir unter "Deine Credentials" die Option "Testumgebung" standardmäßig aktiviert. So kannst du dich mit unserer Test-API verbinden und Testbestellungen versenden.

Aktive Shops Einstellungen

Du hast die Möglichkeit, die Integration von Yook in deinen Subshops zu aktivieren oder zu deaktivieren. Subshops mit grünem Hintergrund sind aktiv, andere nicht.

Variante für Klimaausgleich wählen

Für den Kauf des Klimaausgleichs bieten wir dir drei Varianten an, die du für deinen Shop unter Variante einstellen kannst.

Variante 1

Variante 2

Variante 3

Nur Shop

Nur Kund*innen

Shop und Kund*innen

Der Shop leistet mit jeder Bestellung einen Klimaausgleich zum Festpreis.

Die Kund*innen können wählen, ob sie selbst für die Bestellung einen Klimaausgleich erwerben.

Der Shop leistet mit jeder Bestellung einen Klimaausgleich und die Kund*innen können wählen, ob sie selbst für die Bestellung auch noch einen Klimaausgleich erwerben.

Wird ein Wert eingestellt, gilt dieser für alle Kund*innen bei allen Bestellungen.

Der eingestellte Wert versteht sich inklusive Mehrwertsteuer. Den Steuersatz musst du manuell auswählen. In Deutschland wird dieser Klimaausgleich mit einem Satz von 19 % besteuert.

Berechnungsmethode für Klimaausgleich wählen

Um den Ausgleichsbetrag zu berechnen, den deine Kund*innen für ihre Bestellung zahlen können, kannst du eine dieser beiden Methoden wählen:

Festbetrag (brutto) Unabhängig davon, wie viel deine Kund*innen kaufen, wird der Wert für den Klimaausgleich immer gleich bleiben. Der erwartete Preis sollte die Mehrwertsteuer enthalten.

Prozentsatz Der angegebene Prozentsatz wird verwendet, um den Wert des Klimaausgleichs abhängig vom Gesamtwert des Warenkorbs (inklusive Versandkosten) zu berechnen.

Unsere Empfehlung: Starte mit einem Festbetrag und lege den Klimabeitrag auf unter 1 € fest. Wenn es keine großen Unterschiede zwischen den Warenkorbwerten deiner Kund*innen gibt, kannst du auch einen Prozentsatz von 1% des Warenkorbs wählen. Grundsätzlich wählen Kund*innen häufiger einen Klimabeitrag aus, wenn auch der Shop mit einem eigenen Anteil unterstützt.

Vorkasse und andere Zahlungsarten

Du hast die Möglichkeit, genauer zu konfigurieren, wie du die Yook-Klima-Beiträge nach Zahlungsarten verwalten möchtest.

Zum Beispiel möchtest du wahrscheinlich, dass deine Prepaid-Bestellungen, die Klimabeiträge enthalten, erst dann an Yook geschickt werden, wenn die Zahlung erfolgt ist. Um dies zu tun, wähle einfach "Vorkasse" und "Komplett bezahlt" wie unten gezeigt.

Das bedeutet, dass im Falle eines Prepaid-Kaufs der Yook-Klima-Beitrag erst nach vollständiger Bezahlung verbucht wird. Andere Bestellungen mit anderen Zahlungsmethoden werden abgerechnet, sobald die Bestellung vom Kunden aufgegeben wird. Wenn du unseren Rat möchtest, wie du dein Plugin am besten konfigurierst, kontaktiere uns bitte unter [email protected].

Yook Touchpoints anpassen (optional)

Unter Inhalte -> Shopseiten kannst du auf die Yook Touchpoints zugreifen und sie anpassen.

Die "Klick fürs Klima" Badge

Um deinen Kund*innen noch stärker zu zeigen, wie du dich mit ihnen gemeinsam für den Klimaschutz einsetzt, haben wir die “Klick fürs Klima” Badge kreiiert, die du ganz einfach in den Footer deines Shops einfügen kannst.

Und so fügst du die "Klick fürs Klima" Badge ein:

1. Kopiere das folgende Skript und füge es in den <head> von allen Seiten ein, wo die "Klick fürs Klima Badge" erscheinen soll:

<script type="module" src="
https://cdn.jsdelivr.net/npm/@yookgmbh/[email protected]/dist/yook-storefront-components/yook-storefront-components.esm.js
"></script>

2. Kopiere das folgende HTML-Element und füge es an der Stelle ein, wo du die "Klick fürs Klima" Badge auf deiner Seite platzieren möchtest:

<yook-badge size="s" theme="light"></yook-badge>

Du kannst bei der Größe size zwischen "s" (klein) oder "l" (groß) wählen.

Bei der Farbe theme gibt es die Optionen "light" (hell) und "dark" (dunkel).

Und so könnte die "Klima fürs Klima" Badge dann im Footer deines Online-Shops aussehen:

Die Yook Impact Site

Um deinen Kund*innen maximale Transparenz über Yook, die Partnerprojekte und den Klimaausgleich zu bieten, erstellen wir individuell für deinen Shop eine Impact Site, die du direkt mit der "Klick fürs Klima" Badge verlinken kannst.

Für die Verlinkung umklammerst du das HTML-Element der Yook Badge aus Schritt 2 oben einfach mit folgendem HTML-Code und setzt dann die URL der Impact Site ein, die wir dir per Email zugeschickt haben. Falls du sie noch nicht erhalten hast, kontaktiere bitte [email protected].

<a href="Hier Impact Site URL einfügen" target="_blank" rel="noopener">
    [Hier befindet sich das HTML-Element der Yook Badge]
</a>

Texte anpassen (optional)

Unter Einstellungen -> Textbausteine kannst du die Texte für das Yook-Plugin anpassen, um sie besser auf das Look&Feel deines Shops abzustimmen.

Einfach im Suchfeld "yook" eingeben und dir werden alle relevanten Textbausteine angezeigt.

Die 'Erfahre mehr' Box

Wenn deine Kund*innen auf den Link "Erfahre mehr" zum CO2-Ausgleich klicken, erscheint eine kleine Box mit weiteren Informationen über Yook und den Klimaausgleich. Wir schlagen vor, den Standardtext zu verwenden oder ihn leicht an deine eigenen Vorstellungen anzupassen. In jedem Fall empfehlen wir, den Text kurz und leicht verständlich zu halten.

Der Name für den Klimaausgleich

Du kannst auch den Namen des CO2-Ausgleichs anpassen und damit bestimmen, was im Warenkorb, an der Kasse und auf den Rechnungen erscheint. Der gewählte Name wird auch im Shopware Admin Panel sichtbar sein, wenn du die Bestellinformationen ansiehst. Je nach gewählter Variante empfehlen wir Folgendes:

Variante 1: Klimabeitrag (für deine/Ihre Bestellung / von [Name des Shops]) Variante 2: Dein/Ihr individueller Klimabeitrag Variante 3: Dein/Ihr Klimabeitrag (zusammen mit [Name des Shops])

Dein Setup testen

Sobald das Plugin installiert und nach deinen Bedürfnissen konfiguriert ist, empfehlen wir dir, dein gesamtes Setup zu testen und zwar in folgenden drei Schritten:

  1. Cache leeren

  2. Anzeige im Shop überprüfen

  3. Verifizierung von Cronjobs

  4. Testbestellung auslösen

Cache leeren

Um deinen Cache zu leeren, gehe zuerst auf Einstellungen -> Caches / Performance -> Caches / Performance.

Klicke dann auf den Reiter 'Cache' und setze in der unteren Hälfte die fünf Haken wie angezeigt. Abschließend klicke auf 'Leeren'.

Anzeige im Shop überprüfen

Außerdem empfehlen wir dir, die wichtigsten Abläufe deiner Shop-Website zu überprüfen, um sicherzustellen, dass das Layout, das Styling und das Einkaufserlebnis intakt bleiben. Bitte prüfe:

  • Mini-Warenkorb (Warenkorb auf der rechten Seite) - sollte unabhängig von der Konfiguration nur einen kleinen Hinweis auf den Klimaausgleich enthalten.

  • Ganzseitiger Warenkorb - sollte die Möglichkeiten zum Klimaausgleich wie konfiguriert anzeigen.

  • Checkout Flow (letzter Schritt) - sollte die Möglichkeiten zum Klimaausgleich wie konfiguriert anzeigen.

Verifizierung von Cronjobs

Das Yook-Plugin verwendet aktiv Cronjobs, um Informationen über den Klimabeitrag an unsere API zu übermitteln. Aus diesem Grund ist es wichtig, dass Cronjobs auf Ihrem Hosting aktiviert sind. Um einen Hinweis auf den Status Ihrer Cronjobs zu erhalten, können Sie im Shopware-Backend -> Einstellungen -> Grundeinstellungen -> Suche "cronjobs" -> Suche "Yook" -> Bearbeiten gehen.

Wenn der Abschnitt "Letzte Ausführung" leer ist oder ein sehr altes Datum anzeigt, ist dies wahrscheinlich ein Zeichen dafür, dass Ihre Cronjobs nicht aktiv sind. Weitere Informationen zum Aktivieren von Cronjobs in Ihrem Shop finden Sie in der offiziellen Shopware-Dokumentation zu diesem Thema: https://docs.shopware.com/en/shopware-5-en/settings/system-cronjobs

Testbestellung auslösen

Mit einer Testbestellung überprüfst du, ob die technische Kommunikation wie gewünscht abläuft. Von Relevanz sind dabei:

  • Dein ERP-System: Überprüfe, wie der Klimaausgleich in eurem Buchhaltungssystem erscheint; die Kennung des Beitrags lautet "yook.one".

  • Die Yook API-Schnittstelle: Nachdem du die Testbestellung ausgelöst hast, kontaktiere uns bitte unter [email protected], damit wir überprüfen können, dass alle relevanten Daten ordnungsgemäß an uns übermittelt wurden.

Wichtig: Damit die Bestellungen alle ordnungsgemäß im Yook Backend ankommen, muss der CronJob aktiviert sein. Nach der Testbestellung bitte entsprechend nachschauen, ob er ausgelöst wurde.

Um sicherzustellen, dass der Klimaausgleich wie gewünscht angezeigt werden, überprüfe auch diese Stellen nach dem Test-Kauf:

  • E-Mail zur Bestellbestätigung

  • Seite mit der Bestellhistorie

  • Druckbare Quittung/Rechnung

Vor dem Livegang

Um das Plugin für den Live-Betrieb zu aktivieren, muss Folgendes passieren:

  • im Yook Admin Panel den Live API-Schlüssel eingeben

  • im Yook Admin Panel unter 'Deine Credentials' den Haken bei Testumgebung entfernen

  • erneut den Cache leeren

  • in der Live-Umgebung nochmals eine Testbestellung durchführen

Wenn du das alles getan hast, sende bitte eine E-Mail an [email protected], um unsere Kundenbetreuung zu informieren.

Live

Herzlichen Glückwunsch! Wir freuen uns, dass du bei uns an Bord bist und deinen Kunden ermöglichst, ab sofort Klimaschutz zu betreiben! 🎉

Fragen

Du bist am Ende dieser Seite angelangt - haben wir alle deine Fragen beantwortet?

Wenn nicht, lass uns bitte unter [email protected] wissen, was du noch erfahren möchtest und wir melden uns so schnell wie möglich bei dir!

Last updated