Shop Cart Widget technical integration

The shop cart widget consist of two elements. The cart widget itself and multiple Add-To-Cart buttons to fill the cart with products.

trigger 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 Widget

At the moment the integration of the cart widget requires the following changes in the code of the vendor (preferably in the layout file):

Integration of the cart widget

...

<!-- Cart widget configuration BEGIN -->

	<!-- Add widget assets (JS and CSS) -->
    <link rel="stylesheet" href="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.css">
    <script src="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.js"></script>

	<!-- Cart Widget configuration -->
    <script>
        window.affilicon = {
            countryId: '[countryId]',
            formConfig: '[formConfig]',
			locale: '[locale]', (e.g. 'de_DE')
            vendor: '[vendor]',
			// optional
			cartMaxWidth: [max width in pixels],
			// optional
			cartMaxHeight: [max height in pixels],
			// optional, set to true if you want to see the test purchase option
			testPurchase: false,
        }
    </script>

<!-- Cart widget configuration END -->


...

<!-- Cart container in the right bottom corner -->
<cart-container></cart-container>

Configuration of the cart widget at the moment is done via global javascript object (window.affilicon). The following properties are available:

Property	Description
countryId	Country ID
formConfig	Please enter a product ID from the AffiliCon administration area. This property determines the checkout page's design (header, background color, etc.) The cart's checkout page will be designed according to the form configuration of the selected product ID.
vendor	Vendor ID
locale	User language of the cart widget and checkout form

Available Locales

Language	Code
German	de_DE
English	en_US
Italy	it_IT
Spain	es_ES
French	fr_FR

Custom styles

Custom styles can be applied by directly adjusting CSS on the vendor's side. For example, here are some CSS selectors and their corresponding elements:

Element	Selector
Cart container (wrapper)	cart-container .cd-cart-container
Cart container heading	cart-container .cd-cart-container .cart-heading
Purchase button (Buy now)	cart-container .cd-cart .purchase-button
Product name in the cart	cart-container .product-name
Product price in the cart	cart-container .product-price
Add to cart button	add-to-cart-button .cart-button

Example

Styling the Cart Widget

	<!-- Custom style of the cart widget elements (optional) -->
    <style>
		


		cart-container .cd-cart-container {
			z-index: 10;
		}
			
        cart-container .cd-cart-container .cart-heading {
            color: red;
        }

        cart-container .cd-cart .purchase-button {
            background-color: red;
        }

        cart-container .product-name {
            color: red;
        }

        cart-container .product-price {
            color: red;
        }

        add-to-cart-button .cart-button.btn-default {
            color: red;
        }

    </style>

Add-To-Cart Button

The Add-To-Cart Button adds one item to the cart. It can also instantly redeem a coupon.

Various formats for Add-To-Cart

<!-- Add a product to the cart -->
<add-to-cart-button product-id="[productId]"></add-to-cart-button>
<!-- Add a product to the cart and redeem a coupon -->
<add-to-cart-button product-id="[productId]" redeem-coupon-code="[couponCode]"></add-to-cart-button>

TechWiki