Amazon Pay V4.x.x Template Integration – 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 $registered_customer}
<li><a href="{link page='customer' paction='logoff' conn=SSL}">{txt key=TEXT_LOGOFF}</a></li>
{else}
<li><a href="{link page='customer' paction='login' conn=SSL}">{txt key=TEXT_LOGIN}</a></li>
{/if}
{/if}

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

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

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:

<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="column xt-grid-4">
<div class="box">
<p class="headline-underline">{txt key=TEXT_SHIPPING_ADDRESS}</p>
[...]
</div>
</div>
<div class="column xt-grid-12">
[...]
</div>

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

<div class="column xt-grid-4" id="amazon_shipping_class_for_resize_left"><!-- amazon_shipping_class_for_resize_left -->
<div class="box" id="amazon_shipping_widget_holder"><!-- amazon_shipping_widget_holder -->
<p class="headline-underline">{txt key=TEXT_SHIPPING_ADDRESS}</p>
[...]
</div>
</div>
<div class="column xt-grid-12" id="amazon_shipping_class_for_resize_right"> <!-- amazon_shipping_class_for_resize_right -->
[...]
</div>

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

Suchen Sie die Zeilen:

<div class="box">
<p class="headline-underline">{txt key=TEXT_PAYMENT_ADDRESS}</p>

Ändern Sie diese Zeilen in:

<div class="box" id="amazon_payment_hide_data"><!-- amazon_payment_hide_data -->
<p class="headline-underline">{txt key=TEXT_PAYMENT_ADDRESS}</p>

Suchen Sie die Zeile:

<p class="float-left"><a href="javascript:history.back();" class="button" title="{txt key=BUTTON_BACK}">{txt key=BUTTON_BACK}</a></p>

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

<p class="float-left" id="amazon_payment_hide_backbutton"><a href="javascript:history.back();" class="button" title="{txt key=BUTTON_BACK}">{txt key=BUTTON_BACK}</a></p><!-- amazon_payment_hide_backbutton -->

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

<p>
<span class="float-left"><a href="javascript:history.back();" class="button">{txt key=BUTTON_BACK}</a></span>
<span>{css_button text=$smarty.const.BUTTON_UPDATE type='form'}</span>
{hook key=cart_tpl_form_paypal}
<span class="float-right"><a class="button" href="{link page='checkout' paction='shipping' conn=SSL}">{txt key=BUTTON_CHECKOUT}</a></span>
</p>

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

<p id="amazon_cart_login"><!-- amazon_cart_login -->
<span class="float-left"><a href="javascript:history.back();" class="button">{txt key=BUTTON_BACK}</a></span>
<span>{css_button text=$smarty.const.BUTTON_UPDATE type='form'}</span>
{hook key=cart_tpl_form_paypal}
<span class="float-right"><a class="button" href="{link page='checkout' paction='shipping' conn=SSL}">{txt key=BUTTON_CHECKOUT}</a></span>
</p>

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

Suchen Sie die Zeile:

<h1>{txt key=TEXT_PAGE_TITLE_ADDRESS_BOOK}</h1>

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

<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:

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.

[...]
<button type="submit">{$smarty.const.BUTTON_NEXT}</button>
{form type=formend}
<br amazon-plugin="hide"><!-- hide! -->
<div amazon-plugin="hide" data-role="header" data-theme="c"><!-- hide! -->
<h1>{txt key=TEXT_SHIPPING_ADDRESS}:</h1>
</div>
<p amazon-plugin="hide"><!-- hide! -->
{if $shipping_address.customers_company} {$shipping_address.customers_company}<br />{/if}
{$shipping_address.customers_firstname} {$shipping_address.customers_lastname}<br />
{$shipping_address.customers_street_address}<br />
{if $shipping_address.customers_suburb} {$shipping_address.customers_suburb}<br />{/if}
{$shipping_address.customers_postcode} {$shipping_address.customers_city}<br />
{$shipping_address.customers_country}<br />
</p>
{if $shipping_address.allow_change == true}
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction=edit_address params='adType=shipping&abID' params_value=$shipping_address.address_book_id conn=SSL}">{txt key=TEXT_EDIT}</a><!-- hide! -->
{/if}
{if $shipping_address.allow_change == true}
<p amazon-plugin="hide">{txt key=TEXT_SELECT_SHIPPING_ADDRESS}:</p><!-- hide! -->
{form type=form name=shipping_address action='dynamic' link_params='page_action=shipping' method=post conn=SSL}
{form type=select name=adID value=$address_data default=$smarty.session.customer->customer_shipping_address.address_book_id params='onchange="this.form.submit();"'}
{form type=hidden name=adType value=shipping}
{form type=hidden name=action value=select_address}
{form type=formend}
{if $add_new_address eq 1}
<p amazon-plugin="hide">{txt key=TEXT_NEW_SHIPPING_ADDRESS}:</p><!-- hide! -->
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction='edit_address' params='adType=shipping' conn=SSL}">{$smarty.const.BUTTON_ADD_ADDRESS}</a><!-- hide! -->
{/if}
{/if}
<br />
[...]

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.

[...]
{hook key=checkout_tpl_payment}
<p><button type="submit">{$smarty.const.BUTTON_NEXT}</button></p>
{form type=formend}
<br>
<div amazon-plugin="hide" data-role="header" data-theme="c"><!-- hide! -->
<h2>{txt key=TEXT_PAYMENT_ADDRESS}:</h2>
</div>
<p amazon-plugin="hide"><!-- hide! -->
{if $payment_address.customers_company} {$payment_address.customers_company}<br />{/if}
{$payment_address.customers_firstname} {$payment_address.customers_lastname}<br />
{$payment_address.customers_street_address}<br />
{if $payment_address.customers_suburb} {$payment_address.customers_suburb}<br />{/if}
{$payment_address.customers_postcode} {$payment_address.customers_city}<br />
{$payment_address.customers_country}<br />
</p>
{if $payment_address.allow_change == true}
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction=edit_address params='adType=payment&abID' params_value=$payment_address.address_book_id conn=SSL}">{txt key=TEXT_EDIT}</a><!-- hide! -->
{/if}
{if $payment_address.allow_change == true}
<p amazon-plugin="hide">{txt key=TEXT_SELECT_PAYMENT_ADDRESS}:</p><!-- hide! -->
{form type=form name=payment_address action='dynamic' link_params='page_action=payment' method=post conn=SSL}
{form type=select name=adID value=$address_data default=$smarty.session.customer->customer_payment_address.address_book_id params='onchange="this.form.submit();"'}
{form type=hidden name=adType value=payment}
{form type=hidden name=action value=select_address}
{form type=formend}

{if $add_new_address eq 1}
<p amazon-plugin="hide">{txt key=TEXT_NEW_PAYMENT_ADDRESS}:</p><!-- hide! -->
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction='edit_address' params='adType=payment' conn=SSL}">{$smarty.const.BUTTON_ADD_ADDRESS}</a><!-- hide! -->
{/if}
{/if}[...]

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.

[...]
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="header">
<h1>{txt key=TEXT_SHIPPING_ADDRESS}:</h1>
</div>
<p>
{if $shipping_address.customers_company} {$shipping_address.customers_company}<br />{/if}
{$shipping_address.customers_firstname} {$shipping_address.customers_lastname}<br />
{$shipping_address.customers_street_address}<br />
{if $shipping_address.customers_suburb} {$shipping_address.customers_suburb}<br />{/if}
{$shipping_address.customers_postcode} {$shipping_address.customers_city}<br />
{$shipping_address.customers_country}<br />
</p>
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction=edit_address params='adType=shipping&abID' params_value=$shipping_address.address_book_id conn=SSL}">{txt key=TEXT_EDIT}</a><!-- hide! -->
</div>
<div class="ui-block-b">
<div data-role="header">
<h1>{txt key=TEXT_PAYMENT_ADDRESS}:</h1>
</div>
<p>
{if $payment_address.customers_company} {$payment_address.customers_company}<br />{/if}
{$payment_address.customers_firstname} {$payment_address.customers_lastname}<br />
{$payment_address.customers_street_address}<br />
{if $payment_address.customers_suburb} {$payment_address.customers_suburb}<br />{/if}
{$payment_address.customers_postcode} {$payment_address.customers_city}<br />
{$payment_address.customers_country}<br />
</p>
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction=edit_address params='adType=payment&abID' params_value=$payment_address.address_book_id conn=SSL}">{txt key=TEXT_EDIT}</a><!-- hide! -->
</div>
</div>[...]

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.

[...]
<p amazon-plugin="hide">{txt key=TEXT_ADDRESS_BOOK_INFO}</p><!-- hide! -->
<br />
<div amazon-plugin="hide" class="highlightbox"><!-- hide! -->
{foreach name=aussen item=addresses from=$addresses_data}
<p>
<strong>
{if $addresses.customers_company} {$addresses.customers_company} <br />{/if}
{$addresses.customers_firstname} {$addresses.customers_lastname} <br />
</strong>
{$addresses.customers_street_address} <br />
{if $addresses.customers_suburb} {$addresses.customers_suburb} <br />{/if}
{$addresses.customers_postcode} {$addresses.customers_city} <br />
{if $addresses.customers_zone} {$addresses.customers_zone} <br />{/if}
{$addresses.customers_country} <br />
</p>
{if $addresses.allow_change == true}

<div class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" href="{link page='customer' paction=edit_address params=abID params_value=$addresses.address_book_id' conn=SSL}">{$smarty.const.BUTTON_EDIT}</a></div>
<div class="ui-block-b"><a data-role="button" href="{link page='customer' paction=delete_address params=abID params_value=$addresses.address_book_id' conn=SSL}">{$smarty.const.BUTTON_DELETE}</a></div>
</div>
{/if}

<div class="hr"></div>
{/foreach}
</div>
<br />
<p amazon-plugin="hide" ><small>{$address_count} / {$address_max_count} {txt key=TEXT_POSSIBLE_ENTRIES}</small></p><!-- hide! -->
{if $add_new_address eq 1}
<a amazon-plugin="hide" data-role="button" href="{link page='customer' paction=edit_address' conn=SSL}">{$smarty.const.BUTTON_ADD_ADDRESS}</a><!-- hide! -->
{/if}

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