Internal: Shop Cart Widget technical integration

Please publish this article as soon as the new Cart feature with the new configuration option (targetCheckoutForm) has been deployed.

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,
			checkoutVersion: '[checkout version]', (e.g. '4')
			configurationID: '[configuration id of the checkout]'
        }
    </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	Corresponds to the form configuration of a product in the my ™ area defined by the product ID.
vendor	Vendor ID
locale	User language of the cart widget and checkout form
checkoutVersion	The ID of the checkout form to be used: 3" for checkout form 3 4" for checkout form 4 This value must only be defined when using the checkout from version 4 onwards.
configurationId	Important for using the Checkout version 4: ID of the Checkout form configuration. Example value: 5a39004888e46820da7702f2, currently this ID must be requested from the developers.

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