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
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.
The collapsed view shows the product count if the cart contains any product.
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
The add-product widget is used to add products to the cart. At the moment this CTA button cannot be styled.
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>
Following placeholders need to be substituted:
| Platzhalter | Mögliche Werte | Beschreibung |
|---|---|---|
{Produkt-Id} | Alle unsigned integer | Product id is shown in product list of your vendor account. |
{Country-Id} | "de", "en", .... | The language to translate the add-product widget into. |
Cart Widget
Use the following code to integrate. Use the styling attributes bottom: 0px; right: 0px; to determine the position of the 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>
Following placeholders need to be substituted:
| Platzhalter | Mögliche Werte | Beschreibung |
|---|---|---|
{Vendor} | string | Vendor id used for AffiliCon system. |
{Country-Id} | "de", "en", .... | This determines the initial shipping country and vat calculations. Both can be changed by the customer during the checkout process. |
| {Form-Configuration} | 12345 | 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.
<script src="https://secure.affilibank.de/_files/js/cart_widget.js"></script>
Add Comment