Der Warenkorb ermöglicht es verschiedene Produkte eines Vendors in beliebiger Anzahl über die AffiliCon GmbH zu kaufen. Da die AffiliCon nur die Zahlungsabwicklung macht, muss der Warenkorb auf Vendor-Seite (beispielsweise in einem Shop) integriert werden.
Beschreibung
Widgets
Cart Widget
Der Warenkorb wird dem Endkunden in einem ein- und ausklappbaren Widget auf der Seite angezeigt. Das Widget kann vom Betreiber des Shops beliebig auf der Seite positioniert werden.
Im Initialzustand ist das Cart Widget eingeklappt und quadratisch. Es lässt sich mit einem Klick auf- und zuklappen.
Sobald Produkte im Warenkorb liegen zeigt das Widget im eingeklappten Zustand die Anzahl der Produkte an.
Änderungen am Warenkorb können im Widget vorgenommen werden. Alle Änderungen die am Warenkorb gemacht werden, zeigt dieser in Echtzeit an. Es ist also kein erneutes laden der Seite nötig.
Add-Product Widget
Das Add-Product Widget ermöglicht es Produkte in den Warenkorb zu legen. Aktuell kann dieser CTA-Button nicht verändert werden.
Zahlungsabwicklung
Die Zahlungsabwicklung des Warenkorbs geschieht wie bei allen bisherigen Produktkäufen auf der Bestellseite der AffiliCon GmbH. Klickt man den Checkout-Button wird die Bestellseite der AffiliCon in einem neuen Tab geöffnet.
Der Warenkorb wird nur vom neuen Bestellformular (Flat-Design / Responsive Design) unterstützt. Im Fall eines Warenkorbs wird das neue Bestellformular von der Applikation erzwungen.
Mehrsprachigkeit (I18n)
Die Widgets können in allen von der AffiliCon unterstützen Sprachen verwendet werden.
Funktionsweise
Der eingebundene Warenkorb funktioniert mittels Websockets und iframes. Das Add-Product Widget sendet einen Request an das System der AffiliCon. Die AffiliCon informiert daraufhin das Cart Widget über die Änderung. Das Cart Widget fragt daraufhin die AffiliCon API nach den neuen Werten.
Technische Integration des Warenkorbs
Der Warenkorb wird mittels iframes eingebunden. Diese können beliebig im Shop oder auf der Produkt-Landingpage positioniert werden.
Add-Product Widget einbinden
Das Add-Product Widget wird mit folgendem Code eingebunden:
<iframe style="width: 200px; height: 100px;" src="https://secure.affilibank.de/widget/cart/add?productId={Produkt-Id}&countryId={Country-Id}" width="400" height="250" frameborder="0"></iframe>
Folgende Platzhalter sind enthalten und müssen vom Programmier im code ersetzt werden:
| Platzhalter | Mögliche Werte | Beschreibung |
|---|---|---|
{Produkt-Id} | Alle unsigned integer | Die Product-Id kann aus dem MY-Bereich ermittelt werden. Die Product-Id steht an jedem Produkt in der Produktübersicht. |
{Country-Id} | "de", "en", .... | Die Country-Id ist die Sprache in der das Add-Product Widget geladen wird. |
Cart Widget einbinden
Das Cart Widget wird mit folgendem Code eingebunden: Über die Angaben bottom: 0px; right: 0px; kann die Position des Widgets festgelegt werden.
<iframe id="cartWidget" style="position: fixed; z-index: 9999; bottom: 0px; right: 0px;" src="https://secure.affilibank.de/widget/cart?countryId={Country-Id}&vendor={Vendor}&formConfig={Form-Configuration}" frameborder="0"></iframe>
Folgende Platzhalter sind enthalten und müssen vom Programmier im code ersetzt werden:
| Platzhalter | Mögliche Werte | Beschreibung |
|---|---|---|
{Vendor} | string | Der Name/Die Id des Vendors auf der Plattform |
{Country-Id} | "de", "en", .... | Die Country-Id bestimmt in diesem Fall das Land für die Lieferadresse. Auch die anfallende Mehrwertsteuer wird über diesen Parameter initial berechnet. Kann aber im Orderform nochmal verändert werden. |
| {Form-Configuration} | 12345 | Sofern Sie der Orderform im Checkout eine Konfiguration eines vorhandenen Produkts zuordnen wollen, geben Sie dem Parameter "formConfig" die Produkt-ID des entsprechenden Produkts mit. |
Damit das Cart Widget die Zielseite im eingeklappten Zustand nicht mit einem transparenten Element überdeckt muss ein Javascript in die Zielseite eingebaut werden.
<script src="https://secure.affilibank.de/_files/js/cart_widget.js"></script>
0 Comments