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]',
vendor: '[vendor]'
}
</script>
<!-- Custom style of the cart widget elements (optional) -->
<style>
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>
<!-- 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 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 |
Placing the widget in the top right corner CSS
.affilicon-cart-widget .cd-cart {
top: 20px;
bottom: auto;
}
.affilicon-cart-widget .cd-cart-trigger {
top: 547px;
}
.cd-cart-container.cart-closed .cd-cart-trigger {
top: 20px;
}
.affilicon-cart-widget .cart-closed .cd-cart .wrapper {
top: 0px;
}
0 Comments