Customer Wishlist
Activation Steps for Merchants
Code Snippet Integration for Theme Partners
1. Product Card component and Product page:
template/products.twig
and template/category.twig
file:
{% if customer is not null and customer.wishlist is not empty %}
{% for itemId in customer.wishlist %}
{% if itemId == product.id %}
{% set in_wishlist = true %}
{% endif %}
{% endfor %}
{% endif %}
<span class="add-to-wishlist" data-wishlist-id="{{ product.id }}">
{% if customer %}
<a class="icon-heart-mask {% if in_wishlist == true %}filled{% endif %}" onclick="addToWishlist(this, '{{ product.id }}')"></a>
{% else %}
<a class="icon-heart-mask" href="/auth/login?redirect_to={{ requestUri() }}"></a>
{% endif %}
<img class="loader d-none" src="{{ asset_url }}spinner.gif" width="20" height="20"/>
</span>
{% endif %}
2. For Main.js File:
function fillWishlistItems(items) {
items.forEach((product) => {
$(`.add-to-wishlist[data-wishlist-id=${product.id}]`)
.find(".icon-heart-mask")
.addClass("filled");
});
}
function addToWishlist(elm, productId) {
$(elm).siblings(".add-to-wishlist .loader").removeClass("d-none");
$(elm).addClass("d-none");
// Remove From Wishlist if added
if ($(elm).hasClass("filled")) {
return removeFromWishlist(elm, productId);
}
zid.store.customer.addToWishlist(productId).then((response) => {
if (response.status === "success") {
$(elm).siblings(".add-to-wishlist .loader").addClass("d-none");
$(elm).addClass("filled").removeClass("d-none");
toastr.success(response.data.message);
} else {
toastr.error(response.data.message);
}
});
}
function removeFromWishlist(elm, productId) {
$(elm).siblings(".add-to-wishlist .loader").removeClass("d-none");
$(elm).addClass("d-none");
zid.store.customer.removeFromWishlist(productId).then((response) => {
if (response.status === "success") {
$(elm).siblings(".add-to-wishlist .loader").addClass("d-none");
$(elm).removeClass("d-none filled");
toastr.success(response.data.message);
if (location.pathname === '/account-wishlist') {
location.reload();
}
} else {
toastr.error(response.data.message);
}
});
}
function shareWishlist() {
$(".share-wishlist .loader").removeClass("d-none").siblings(".share-icon").addClass("d-none");
zid.store.customer.shareWishlist().then(async (response) => {
if (response.status === "success") {
$(".share-wishlist .loader").addClass("d-none").siblings(".share-icon").removeClass("d-none");
if (response.data.link) {
try {
await navigator.clipboard.writeText(response.data.link);
toastr.success(response.data.message);
} catch (error) {
console.log(error);
}
}
} else {
toastr.error(response.data.message);
}
});
}
3. Wishlist page and Shared wishlist:
account-wishlist.twig
is for listing customer wishlist and wishlist.twig
is for listing shared wishlist.For
account-wishlist.twig
page, you can add this in the template, for example:{% extends "layout.twig" %}
{% block header %} {{ include('header.twig') }} {% endblock %}
{% block main_content %}
<div class="container-parent">
<div class="container">
<div class="d-flex">
<div class="flex-grow-1">
<div class="account-content">
<div>
<div id="wishlist-list" class="row">
{% for product in wishlist.data %}
<div class="col-6 col-lg-4 py-3">
{% include 'product-card.twig' with {'product' : product, 'index': key} %}
</div>
{% endfor %}
</div>
{% include 'pagination.twig' with { 'totalPages' : products.last_page , 'currentPage' : products.current_page } %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %} {{ include('footer.twig') }} {% endblock %}
shareWishlist
to create a link and copy it to the clipboard.<button class="btn btn-sm btn-outline-secondary share-wishlist m-3" onclick="shareWishlist()">
<img class="loader d-none" src="{{ asset_url }}spinner.gif" width="25" height="20"/>
<span class="align-middle share-icon">
<i class="fa fa-share"></i>
</span>
<span class="px-1">{{ locals.shareLabel }}</span>
</button>
wishlist.twig
page (listing shared wishlist):{% extends "layout.twig" %}
{% block header %} {{ include('header.twig') }} {% endblock %}
{% block top_links %}
<style>
.add-to-wishlist, .share-wishlist {
display: none !important;
}
</style>
{% endblock %}
{% block main_content %}
<div class="container-parent">
<div class="container">
<div class="d-flex">
<div class="flex-grow-1">
<div class="account-content">
<div>
<div id="wishlist-list" class="row">
{% for product in wishlist.data %}
<div class="col-6 col-md-4 col-lg-3 py-3">
{% include 'product-card.twig' with {'product' : product, 'index': key} %}
</div>
{% endfor %}
</div>
{% include 'pagination.twig' with { 'totalPages' : products.last_page , 'currentPage' : products.current_page } %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %} {{ include('footer.twig') }} {% endblock %}
{% block script %}
<script defer>
$(`.add-to-wishlist .share-wishlist`).remove();
</script>
{% endblock %}
4. Custom CSS example:
.add-to-wishlist {
position: absolute;
right: 0;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10px;
width: 40px;
height: 35px;
cursor: pointer;
border-radius: 5px;
background-color: white;
}
.rtl .add-to-wishlist {
right: unset;
left: 0;
}
.icon-heart-mask {
display: inline-block;
width: 25px;
height: 20px;
mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url('./heart-outlined.svg');
background-color: var(--secondary, #A1A0A9);
}
.icon-heart-mask.filled {
mask-image: url('./heart-filled.svg');
background-color: var(--primary_color, #D86F6F);
}
5. Display Wishlist in Customer Profile
Modified at 2025-03-20 11:30:36