Amazon Pay in 5.0.x Template einbinden – V1 (outdated)

Frage stellen

Bitte beachten Sie, dass zwischenzeitlich die Version 2 des Amazon-Pay-Plugins "tfm_amazon_payments_v2" erschienen ist. Sollten Sie Amazon Pay frisch installieren wollen, nutzen Sie bitte diese Version

1. Logout-Button für Amazon Kunden

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

{/if}
{/if}
{hook key=meta_nav_right_last}

Fügen Sie danach folgenden Code ein:

{if $amazon_customer}
<li><a href="{link page='customer' paction='logoff' conn=SSL}">{txt key=TEXT_LOGOFF}</a></li>
{/if}

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:

{hook key=box_login_tpl}

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"

<div class="btn-group pull-right">
<a class="btn btn-success pull-right hidden-xs" href="{link page='checkout' paction='shipping' conn=SSL}">
{txt key=BUTTON_CHECKOUT}
</a>
</div>

Fügen Sie danach folgenden Code ein:

<div id="amazon_cart_login" class="pull-right"></div><!-- amazon_cart_login -->

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

Suchen Sie die Zeile:

<div id="checkout-shipping" class="row">

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:

<div class="col col-sm-4 col-md-3">
<div class="well shipping-address address">
<p class="headline-underline clearfix">
[...]

</p>
</div>
</div>
<div class="col col-sm-8 col-md-9">
[...]
</div>

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

<div class="col col-sm-4 col-md-3" id="amazon_shipping_class_for_resize_left"><!-- amazon_shipping_class_for_resize_left -->
<div class="well shipping-address address" id="amazon_shipping_widget_holder"><!-- amazon_shipping_widget_holder -->
<p class="headline-underline clearfix">
[...]

</p>
</div>
</div>
<div class="col col-sm-8 col-md-9" id="amazon_shipping_class_for_resize_right"><!-- amazon_shipping_class_for_resize_right -->
[...]
</div>

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

Suchen Sie die Zeilen:

<div class="well payment-address address">
<p class="headline-underline clearfix">
{txt key=TEXT_PAYMENT_ADDRESS}

Ändern Sie diese Zeilen in:

<div class="well payment-address address" id="amazon_payment_hide_data"><!-- amazon_payment_hide_data -->
<p class="headline-underline clearfix">
{txt key=TEXT_PAYMENT_ADDRESS}

Suchen Sie die Zeile:

<a href="javascript:history.back();" class="btn btn-default pull-left">

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

<a href="javascript:history.back();" class="btn btn-default pull-left" id="amazon_payment_hide_backbutton"><!-- amazon_payment_hide_backbutton -->

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

Suchen Sie die Zeile:

<div id="adress-book">
<h1>{txt key=TEXT_PAGE_TITLE_ADDRESS_BOOK}</h1>

Ändern Sie die Zeile in folgende ab:

<div id="adress-book">
<h1 id="amazon_account_message_parent">{txt key=TEXT_PAGE_TITLE_ADDRESS_BOOK}</h1><!-- amazon_account_message_parent -->

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-Pay in Ihrem Shop angezeigt werden und funktionieren.