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.
| Table of Contents |
|---|
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ötigThe shopping cart allows you to buy various products of a vendor in any number via AffiliCon GmbH. Since AffiliCon only makes payment processing, the shopping cart must be integrated on the vendor side (for example in a shop, website or landingpage).
| Table of Contents |
|---|
Onboarding
We are happy to assist you with any questions regarding our cart widget and its implementation. Please contact us at clients@affilicon.net.
Demo
https://my-q.affilicon.net/demo/cart
Description
Widgets
Cart Widget
The shopping cart is displayed to the end user in a pop-up and fold-out widget on the page. The widget can be positioned anywhere on the page. In the initial state, the Cart widget is collapsed and square. It can be opened and closed with a click.
As soon as products are placed in the shopping cart, the widget displays the number of products in the folded-in state.
Changes in the shopping cart can be made in the widget. All changes made to the shopping cart are displayed in real time. So it is not necessary to reload the page.
Add-Product Widget
Das The Add-Product Widget ermöglicht es Produkte in den Warenkorb zu legen. Aktuell kann dieser CTA-Button nicht verändert werden. widget allows you to add products to your shopping cart. Currently this CTA button can not be changed.
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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:
...
{Produkt-Id}...
{Country-Id}...
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.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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:
...
{Vendor}...
{Country-Id}...
Damit das Cart Widget die Zielseite im eingeklappten Zustand nicht mit einem transparenten Element überdeckt muss ein Javascript in die Zielseite eingebaut werden.
...
| language | xml |
|---|---|
| title | Einbinden des Javascripts zur Steuerung des Cart Widget |
...
Payment Processing
As it is the case with all previous product purchases, payment processing for the consumer basket is carried out in the order page of AffiliCon GmbH. Clicking the checkout button opens the AffiliCon order page in a new tab.
Multilingualism (I18n)
The widgets can be used in all languages supported by AffiliCon.
| Info | ||
|---|---|---|
| ||
Right now we support five different languages (german, english, spanish, italian and french. The default language for customers with another browser language as those supported ones is english. |
Cart summary
Depending on the choice of country, the following information about VAT and shipping is shown in the cart widget:
Functionality
The integrated shopping cart works with websockets and components. The Add-Product widget sends a request to the AffiliCon system. AffiliCon then informs the Cart widget of the change. The Cart Widget then asks the AffiliCon API for the new values.
Coupons Feature in Cart Widget
In order to activate all coupon functionalities in the cart widget, please contact us at clients@affilicon.net. We are happy to activate the features for you within one working day.