add_to_favourites_button

The add_to_favourites_button macro is used to render add to favourites button. That button allows user to add product to favourites. Internally it uses add-to-favourites webcomponent.

Definition

{% add_to_favourites_button(product, options) %}

Input parameters

product

Product Product object The product to add to favourites.

Example

Render add to favourites button for product with id 5.

{% from "@macros/add_to_favourites_button.twig" import add_to_favourites_button %}

{% set product = ObjectApi.getProduct(5) %}

{{ add_to_favourites_button(product) }}

Example

Render add to favourites button on a product page. As you may see we use special product_id variable to get product id of product which we currently visit. This special variable is available only on product context.

{% from "@macros/add_to_favourites_button.twig" import add_to_favourites_button %}

{% set product = ObjectApi.getProduct(product_id) %}

{{ add_to_favourites_button(product) }}

Example

Render add to favourites button for product with id coming from module configuration. Modules may have their own configuration. You can read more about it here. This configuration is available in moduleConfig variable. If you set productId configuration in your module uou may use it as follows:

{% from "@macros/add_to_favourites_button.twig" import add_to_favourites_button %}

{% set product = ObjectApi.getProduct(moduleConfig.productId) %}

{{ add_to_favourites_button(product) }}

Macro source code

{% macro add_to_favourites_button(product) %}
    {% from "@macros/icon.twig" import icon %}

    <add-to-favourites product-id="{{ product.id }}" variant-id="{{ product.variant.id }}" class="btn-icon btn-icon_outline" on-interaction>
        <div class="d-flex" slot="not-added">
            {{ icon('icon-heart', {
                classNames: ['btn__icon']
            }) }}
        </div>
        <div class="d-flex" slot="added" hidden>
            {{
                icon('icon-heart', {
                    classNames: ['btn__icon', 'btn__icon_filled']
                })
            }}
        </div>
    </add-to-favourites>
{% endmacro %}

Macros reference

• icon