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="/apps/widget/dist/app.full.min.css">
<script src="/apps/widget/dist/app.full.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 {
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 config of the order form specified in the my™ area |
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 |
Add Comment