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]',
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 |
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> |
Positioning the Cart Widget
By default cart widget is placed in the top right corner.
With this CSS we can achieve that the cart widget is placed in the bottom right corner.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
.affilicon-cart-widget .cd-cart-trigger-button {
bottom: 20px;
top: auto;
} |
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> |