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 to the form configuration of a product in the my ™ area defined by the product ID. |
vendor | Vendor ID |
| locale | Language User language of the shopping basket 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> |