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.
At the moment the integration of the cart widget requires the following changes in the code of the vendor (preferably in the layout file):
...
<!-- 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 -->
...
<!-- Buttons that add the products -->
<add-to-cart-button product-id="[productId]"></add-to-cart-button>
<add-to-cart-button product-id="[productId]"></add-to-cart-button>
<add-to-cart-button product-id="[productId]"></add-to-cart-button>
...
<!-- Cart container in the right bottom corner -->
<cart-container></cart-container>
Configuration of the widget
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
<!-- 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>
Placing the widget in the top right corner CSS
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.
.affilicon-cart-widget .cd-cart-trigger-button {
bottom: 20px;
top: auto;
}
Add Comment