Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The shopping cart widget allows you to purchase several buy various products of one a vendor in arbitrary units any number 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.tocSince 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 widget can be shown shopping cart is displayed to the customer in an expanded and collapsed view and end user in a pop-up and fold-out widget on the page. The widget can be positioned by anywhere on the vendorpage. In its the initial state, the Cart widget is collapsed and square shaped. The view can be toggled by clicking on the icon or the X symbol  It can be opened and closed with a click.

Eingeklapptes Cart WidgetAusgeklapptes Cart WidgetCart Widget ausklappen (gif)

The collapsed view shows the product count if the cart contains any productAs soon as products are placed in the shopping cart, the widget displays the number of products in the folded-in state.

Changes to in the shopping cart can be made within in the widget. Each change is processed asynchronous and the view is updated without a page reload. All changes made to the shopping cart are displayed in real time. So it is not necessary to reload the page.

Add-Product Widget

The addAdd-product Product widget is used allows you to add products to the your shopping cart. At the moment Currently this CTA button cannot can not be styledchanged.

 

Payment Processing

 After clicking 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 within the cart widget the user will be redirected to the AffiliCon Orderform opens the AffiliCon order page in a new tab. The cart is always displayed by the new Orderform (flat responsive design). 

...

Multilingualism (I18n)

The widgets support can be used in 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:

Code Block
languagexml
titleAdd-Product Widget
<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:

...

{Produkt-Id}

...

Product id is shown in product list of your vendor account.

...

{Country-Id}

...

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.

Code Block
languagexml
titleCart 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:

...

{Vendor}

...

Vendor id used for AffiliCon system.

...

{Country-Id}

...

This determines the initial shipping country and vat calculations. Both can be changed by the customer during the checkout process.

...

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.

...

languagexml
titleEinbinden des Javascripts zur Steuerung des Cart Widget

...

supported by AffiliCon.

Info
titletrigger cart widget language


The language of the cart widget is triggered by the browser´s default language settings. If you are enabled german or english as your default language setting you will be provided with a cart widget in the given language (german or english).

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:

Image Added

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. 

Technical Integration

See Shop Cart Widget technical integration.