Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 10 Next »

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>

<!-- 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:

PropertyDescription
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:

ElementSelector
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 .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;
}
  • No labels