Content Comparison

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.

...

The cart widget allows to purchase several products of one vendor in arbitrary units via AffiliCon GmbH.  The cart widget has to be integrated by the vendor i.e. within the shop system, because AffiliCon is only processing the checkout.

Description

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.

Image RemovedImage RemovedImage Removed

Sobald Produkte im Warenkorb liegen zeigt das Widget im eingeklappten Zustand die Anzahl der Produkte an. 

Image RemovedImage RemovedImage Removed

 Ä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.The widget can be shown to the customer in an expanded and collapsed view and can be positioned by the vendor. In its initial state the widget is collapsed and square shaped. The view can be toggled by clicking on the icon or the X symbol.

Image AddedImage AddedImage Added

The collapsed view shows the product count if the cart contains any product.

Image AddedImage AddedImage Added

Changes to the cart can be made within the widget. Each change is processed asynchronous and the view is updated without a page reload. 

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. The add-product widget is used to add products to the cart. At the moment this CTA button cannot be styled.

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

...

Payment Processing

 After clicking the checkout button within the cart widget the user will be redirected to the AffiliCon Orderform in a new tab. The cart is always displayed by the new Orderform (flat responsive design). 

Multilanguage (I18n)

The widgets support all languages of the AffiliCon .

Operating Mode

The cart widget works via websockets and iframes. The add-product widget sends a request to the AffiliCon system. The AffiliCon system then informs the cart widget about the changes. The cart widget then queries the new pricing from the API.

Technical Integration

The widgets are integrated via iframes.

Add-Product Widget

Use the following code to integrate:

<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 werdenFollowing placeholders need to be substituted:

{Produkt-Id}

{Country-Id}

Cart Widget

...

Use the following code to integrate. Use the styling attributes bottom: 0px; right: 0px; kann die Position des Widgets festgelegt werdento determine the position of the widget.

Code Block
language xml title Cart Widget
<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 werdenFollowing placeholders need to be substituted:

Platzhalter	Mögliche Werte	Beschreibung
{Vendor}	string	Der Name/Die Id des Vendors auf der Plattform Vendor id used for AffiliCon system.
{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 This determines the initial shipping country and vat calculations. Both can be changed by the customer during the checkout process.
{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.

...

This determines the Orderform configration. If you wish to use the configuration of a special product then use the product id here.

To prevent a transparent overlay of the widget in its collapsed state you need to include the following script.

Code Block
language xml title Einbinden des Javascripts zur Steuerung des Cart Widget
<script src="https://secure.affilibank.de/_files/js/cart_widget.js"></script>

...