The shop cart widget consist of two elements. The cart widget itself and multiple Add-To-Cart buttons to fill the cart with products.
Info | ||
---|---|---|
| ||
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):
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
... <!-- 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 | Corresponds 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 a product in the my ™ area defined by thethe 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
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<!-- 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.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<!-- 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> |