Skip to content

Add To Favourites

The <add-to-favourites> webcomponent is used to add product to favourites.

Usage requires to add two HTML elements (any type, e.g. text, image, icon) inside of it, each od them have to have slot attribute, one with value added and the second one with value not-added. Element with slot="not-added" is displayed when product is NOT added to favourites, on the other hand slot="added" is displayed when product is added to favourites.

It is also recommend to add hidden attribute to element with slot="added" attribute to avoid content jumping when component is rendering.

Attributes

Attribute name Type Default Description
product-id number null product id of the product we want to add to favourites
variant-id number null variant id of the product we want to add to favourites

Event Bus events

This webcomponent listens to the following events with the Event Bus:

Example

HTML
<add-to-favourites product-id="1" variant-id="5">
    <span slot="not-added">Not added to favourites</span>
    <span slot="added" hidden>Added to favourites</span>
</add-to-favourites>