Amazon Payments in 5.0.x Template einbinden

1. Logout-Button für Amazon Kunden

Öffnen Sie die Datei “templates/ihr-template/index.html” und suchen Sie den Code:

Fügen Sie danach folgenden Code ein:

Erklärung: Wenn sich ein Kunde via Amazon anmeldet, wird ein Gast-Account in xt:Commerce erstellt. Von Hause aus blendet xt:Commerce in diesem Fall die Möglichkeit aus, sich wieder auszuloggen.

Möchte ein Kunde, nachdem er sich mit Amazon angemeldet hat, einen anderen Amazon-Account verwenden oder einen “echten”-Shop-Account erstellen, sorgt der Code dafür, dass ein “Abmelden”-Knopf angezeigt wird und der Kunde mit einer neuen Anmeldung/ Registrierung fortfahren kann.

2. Optional: Login-Button in Login Box:

Öffnen Sie die Datei “templates/ihr_template/xtCore/boxes/box_loginbox.html

Suchen Sie das letzte schließende “div” ( </div> ), und prüfen Sie ob folgender Code vorhanden ist. Falls nein, fügen Sie diesen davor ein:

Erklärung: Durch diesen Hook-Punkt wird in der Login-Box von xt:Commerce ebenfalls der “Login mit Amazon”-Knopf angezeigt. Nicht jedes Shop-Template nutzt diese Box und nicht jeder Shop-Betreiber will diese Möglichkeit anbieten, daher ist dieser Schritt optional und Sie können entscheiden, ob Sie es durchführen wollen. (Sie haben ebenfalls die Möglichkeit, den Hook an einer beliebigen anderen Stelle in Ihrem Template zu integrieren, um den Knopf an anderen Stellen anzuzeigen.)

3. Anpassungen für stark individualisierte Templates:

Wichtig: Sollten Sie eines der Templates verwenden, für welches eine Selector-Datei beiliegt (aktuell z.B. xt_grid bzw. xt_mobile, xt_responsive oder 8w_evelations), können Sie die Selector-Datei und die jeweilige CSS-Datei aktivieren und müssen die folgenden Anpassungen nicht durchführen!

In folgenden Beispielen gehen wir vom xt_responsive-Template aus, d.h. Sie können die Anweisungen vermutlich nicht in jedem Fall 1 zu1 übernehmen, sondern müssen diese adaptieren.

4. Öffnen Sie die Datei "/templates/ihr-template/xtCore/pages/cart.html"

Fügen Sie danach folgenden Code ein:

5. Öffnen Sie die Datei "/templates/ihr-template/xtCore/pages/checkout/subpage_shipping.html"

Suchen Sie die Zeile:

Innerhalb dieses Div-Containers finden Sie zwei Div-Container, die die Seite in Sidebar und Content-Bereich teilen, sowie einen Bereich, der für die Vorschau der Versandadresse genutzt wird:

Fügen Sie in diese Div-Container die IDs wie in folgendem Beispiel ein (die HTML-Kommentare markieren die Zeilen):

6. Öffnen Sie die Datei "/templates/ihr-template/xtCore/pages/checkout/subpage_payment.html"

Suchen Sie die Zeilen:

Ändern Sie diese Zeilen in:

Suchen Sie die Zeile:

Fügen Sie wie im folgenden Beispiel die CSS-ID “amazon_payment_hide_backbutton” in die Zeile ein:

7. Öffnen Sie die Datei "/templates/ihr-template/xtCore/pages/address_book.html"

Suchen Sie die Zeile:

Ändern Sie die Zeile in folgende ab:

Sollten Sie ein responsive-Template einsetzen, ist nach diesem Schritt die Integration beendet.

Wenn Sie ein Mobile-Template nutzen, führen Sie noch folgende Schritte in Ihrem Mobile-Template durch:

Haben Sie alle Schritte korrekt durchgeführt, sollte nun Amazon-Payments in Ihrem Shop angezeigt werden und funktionieren.