The 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 in the vendor side (for example in a shop).
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 display this in real time. So it is not necessary to reload the page.
Add-Product Widget
The Add-Product widget allows you to add products to your shopping cart. Currently this CTA button can not be changed.
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.
Functionality
The integrated shopping cart works with websockets and iframes. 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.
Technical Integration
The shopping cart is integrated by iframes. These can be positioned anywhere in the shop or in the product landing page.
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:
| Placeholder | Possible values | Description |
|---|---|---|
{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:
| Placeholder | Possible values | Description |
|---|---|---|
{Vendor} | string | The name / id of the vendor on the platform |
{Country-Id} | "de", "en", .... | The country id in this case determines the country for the delivery address. The value added tax is also initially calculated using this parameter. Can be changed again in the order form |
| {Form-Configuration} | 12345 | If you want to assign a configuration of an existing product to the order form in the checkout, enter the product ID of the corresponding product for the formConfig parameter. |
To prevent the Cart widget from covering the target page with a transparent element in the folded-in state, a Javascript must be installed in the target page.
<script src="https://secure.affilibank.de/_files/js/cart_widget.js"></script>
Add Comment