Wishlist

Components

This page extends the default layout master.twig, and accordingly, it takes the unified look-and-feel. For example, all of the headers and footers components will be added automatically to this page.

In addition, the User model is accessible automatically on this page because it's included in the master.twig layout file.

JS Web Components

Customer Wishlist page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.

• Add Product <salla-add-product-button>
• Button <salla-button>

Hooks

The wishlist page template may call the following hooks in order to inject extra information.

{% hook 'customer:wishlist.items.start' %}
{% hook 'customer:wishlist.items.end' %}

Usage

This page simply receives the products object which represents the list of the products that the customer has added to his own wishlist. Based on that, we use a simple for-loop statement to display each product.

The developer can show a button to encourage the customer to move a product from the wishlist into the cart. For this purpose salla-button component can be used.

{% for product in products %}
    <a href="{{ product.url }}">
        <img src="{{ product.image.url }}" alt="{{ product.image.alt }}"/>
    </a>
    <h3>
        <a href="{{ product.url }}">{{ product.name }}</a>
    </h3>
    <div>
        {% if product.on_sale %}
            {{ product.sale_price|money }}
            <small>{{ product.regular_price|money }}</small>
        {% else %}
            {{ product.price|money }}
        {% endif %}
    </div>

    <salla-button onclick="salla.cart.addItem({{ product.id }})">
        {{ trans('pages.cart.add_to_cart') }}
    </salla-button>

    <salla-button onclick="salla.wishlist.remove({{ product.id }})">
        <i class="sicon-cancel">Remove</i>
    </salla-button>
{% else %}
    {{ trans('pages.profile.wishlist_placeholder') }}
{% endfor %}