Amazon Payments V4.x.x Template Integration

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/xt_grid/xtCore/boxes/box_loginbox.html

Suchen Sie das letzte schließende “div” ( </div> ), fügen Sie davor folgenden Code 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:

In folgenden Beispielen gehen wir vom xt_grid-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/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):

5. Ö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:

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

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

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

Suchen Sie die Zeile:

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

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:

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

Fügen Sie in die HTML-Elemente in Ihrem Plugin den Code ‘amazon-plugin=”hide”‘ ein. In folgendem Beispiel haben wir diese Elemente mit “<!– hide! –>” gekennzeichnet.

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

Fügen Sie in die HTML-Elemente in Ihrem Plugin den Code ‘amazon-plugin=”hide”‘ ein. In folgendem Beispiel haben wir diese Elemente mit “<!– hide! –>” gekennzeichnet.

10. Öffnen Sie die Datei "/templates/ihr-MOBILE-template/xtCore/pages/checkout/subpage_confirmation.html"

Fügen Sie in die HTML-Elemente in Ihrem Plugin den Code ‘amazon-plugin=”hide”‘ ein. In folgendem Beispiel haben wir diese Elemente mit “<!– hide! –>” gekennzeichnet.

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

Fügen Sie in die HTML-Elemente in Ihrem Plugin den Code ‘amazon-plugin=”hide”‘ ein. In folgendem Beispiel haben wir diese Elemente mit “<!– hide! –>” gekennzeichnet.

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