Wishlist plugin

You can see the Wishlist plugin at work here, beside the Add to bag button there is a heart shape button which helps wishlist a product.

If you're unaware of what wishlist does, it allows users to save products that they're interested in for future purchase or reference. It acts as a personal shopping list and helps users keep track of items they might want to buy later, without having to search for them again.

🤔 How to use ?

1. Implementing the appearance & functionality of the wishlist button

Open the layout.html file and define the template and mention its id attribute such that it can be used wherever you want to place the wishlist template. In this case we are using the id "heart-wishlist-button-template"

<template id="heart-wishlist-button-template">
  <div class="heart-wishlist-buttons-wrapper">
    <button class="without-wishlist-btn w-100 btn-wishlist" type="button" data-wishlist-button-state="unselected">
      <div class="d-flex justify-content-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M14.727 3.98839C15.3899 3.72467 16.0996 3.59889 16.8128 3.61873C17.526 3.63857 18.2277 3.80361 18.8749 4.10377C19.5219 4.40382 20.101 4.83261 20.5768 5.36394C22.4987 7.50112 22.1697 10.7853 20.1983 12.7667L12.9689 19.9961L12.5391 19.5662L12.9668 19.9981C12.7177 20.2449 12.3811 20.3834 12.0304 20.3834C11.6797 20.3834 11.3432 20.2449 11.094 19.9981L11.0919 19.9961L3.67619 12.5803C3.17188 12.0757 2.77561 11.4733 2.51189 10.8104C2.24817 10.1474 2.12239 9.43769 2.14223 8.7245C2.16206 8.01132 2.3271 7.30967 2.62726 6.66242C2.92732 6.01539 3.35611 5.43631 3.88744 4.96054C6.02462 3.03866 9.30883 3.3676 11.2901 5.33901L11.2929 5.34172L12.0306 6.08514L12.9556 5.1541L12.9572 5.15253C13.4618 4.64822 14.064 4.25211 14.727 3.98839ZM12.1113 19.1343C12.1115 19.1341 12.1111 19.1345 12.1113 19.1343L19.3365 11.9091C19.3366 11.909 19.3363 11.9093 19.3365 11.9091C20.9162 10.321 21.1052 7.76931 19.6724 6.17646L19.6714 6.17538C19.3058 5.76694 18.8607 5.43733 18.3634 5.20671C17.8661 4.97608 17.327 4.84927 16.779 4.83403C16.231 4.81879 15.6857 4.91543 15.1764 5.11806C14.6673 5.32055 14.2049 5.62465 13.8173 6.01177C13.817 6.01202 13.8168 6.01227 13.8165 6.01253L12.4617 7.37631C12.3475 7.49121 12.1922 7.55581 12.0303 7.55576C11.8683 7.55572 11.713 7.49104 11.5989 7.37608L10.4326 6.20084C10.4322 6.2004 10.4317 6.19996 10.4313 6.19952C8.84314 4.62062 6.29252 4.43238 4.69996 5.86492L4.69888 5.8659C4.29044 6.23153 3.96083 6.67659 3.7302 7.17391C3.49958 7.67122 3.37277 8.21033 3.35753 8.75831C3.34229 9.30628 3.43893 9.85161 3.64156 10.361C3.84418 10.8703 4.14854 11.333 4.53602 11.7208L11.9495 19.1343C11.9497 19.1345 11.9493 19.1341 11.9495 19.1343C11.971 19.1553 12.0004 19.1676 12.0304 19.1676C12.0604 19.1676 12.0898 19.1553 12.1113 19.1343Z" fill="#FEFFFE" />
        </svg>
      </div>
    </button>
    <button class="with-wishlist-btn w-100 btn-wishlist" type="button" data-wishlist-button-state="selected">
      <div class="d-flex justify-content-center">
        <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.31627 1.92939L12.1971 4.14699L14.4147 3.03819L17.1866 1.375L20.513 2.48379L22.7306 6.36458L22.1762 9.13656L20.513 11.3542L11.6427 19.6701L0.554688 8.02778L1.10909 5.25579L3.88108 1.92939H8.31627Z" fill="var(--with-wishlist-color)" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1072 1.1844C15.9028 0.867877 16.7546 0.716908 17.6106 0.740717C18.4667 0.764526 19.3088 0.962614 20.0856 1.32287C20.8622 1.68302 21.5573 2.19766 22.1284 2.83539C24.435 5.40051 24.0402 9.34235 21.674 11.7204L12.9971 20.3974L12.4811 19.8815L12.9946 20.3999C12.6955 20.6961 12.2916 20.8623 11.8706 20.8623C11.4497 20.8623 11.0457 20.6961 10.7467 20.3999L10.7442 20.3974L1.84355 11.4968C1.23827 10.8911 0.762643 10.1681 0.44612 9.37239C0.129596 8.57672 -0.0213736 7.72486 0.00243543 6.86887C0.0262445 6.01287 0.224332 5.17072 0.584596 4.39388C0.944735 3.61729 1.45938 2.92226 2.09711 2.35121C4.66223 0.0444927 8.60407 0.439303 10.9821 2.80547L10.9854 2.80871L11.8709 3.701L12.981 2.58353L12.9829 2.58165C13.5887 1.97636 14.3114 1.50093 15.1072 1.1844ZM11.9677 19.3631L20.6396 10.6912C22.5356 8.78509 22.7626 5.72241 21.0428 3.81061L21.0416 3.80931C20.6028 3.31909 20.0687 2.92348 19.4717 2.64667C18.8748 2.36986 18.2278 2.21766 17.57 2.19936C16.9124 2.18108 16.2578 2.29707 15.6464 2.54027C15.0355 2.78331 14.4805 3.1483 14.0153 3.61294L14.0143 3.61384L12.3882 5.25071C12.2512 5.38862 12.0648 5.46615 11.8704 5.4661C11.676 5.46605 11.4897 5.38841 11.3527 5.25044L9.9529 3.83987L9.95129 3.83828C8.04514 1.94322 4.98378 1.71729 3.07232 3.43669L3.07103 3.43785C2.5808 3.8767 2.1852 4.41088 1.90838 5.00777C1.63158 5.60468 1.47938 6.25174 1.46108 6.90944C1.4428 7.56713 1.55879 8.22166 1.80199 8.83303C2.0452 9.44438 2.41049 9.99973 2.87556 10.4651L11.7735 19.3631C11.7993 19.3883 11.8346 19.4031 11.8706 19.4031C11.9067 19.4031 11.9419 19.3883 11.9677 19.3631Z" fill="var(--with-wishlist-color)" />
        </svg>
      </div>
    </button>
  </div>
</template>

2. Importing the wishlist template wherever required

Now you can use it directly wherever you need the wishlist button, for example we need it in the product card listing.

So, all you need to do is use the custom tag wishlist-button-load-point

Define this tag and in the attribute data-template-idmention the id you used for template, in our case it was "heart-wishlist-button-template" inside the tag you can define the UI element for the button as a default, else whatever has been defined inside the template shall be rendered.

<wishlist-button-load-point data-product-uuid="" data-sku-uuid="" data-template-id="heart-wishlist-button-template" data-add-event="CATEGORY_PAGE_WISHLIST_ADDED" class="wishlist-load-point-wrapper me-3 me-lg-3 p-12 h-100 hidden" style="max-width: 100px;
              width: 100%;">
  <button type="button" class="detail-wishlist-btn btn-transparent px-0" data-wishlist-button-state="unselected">
    <span class="wishlist-svg-wrapper">
      <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5098 3.51143C15.2835 3.19087 16.1127 3.02588 16.9501 3.02588C17.7875 3.02588 18.6168 3.19087 19.3904 3.51143C20.1641 3.83199 20.867 4.30184 21.459 4.89413C22.0511 5.48608 22.5209 6.18889 22.8414 6.96241C23.1619 7.73605 23.3269 8.56527 23.3269 9.4027C23.3269 10.2401 23.1619 11.0694 22.8414 11.843C22.5209 12.6166 22.0511 13.3194 21.4588 13.9114C21.4588 13.9115 21.4589 13.9114 21.4588 13.9114L12.6188 22.7514C12.2771 23.0931 11.7231 23.0931 11.3814 22.7514L2.5414 13.9114C1.34561 12.7156 0.673828 11.0938 0.673828 9.4027C0.673828 7.71161 1.34561 6.08977 2.5414 4.89399C3.73719 3.6982 5.35902 3.02641 7.05012 3.02641C8.74122 3.02641 10.3631 3.6982 11.5588 4.89399L12.0001 5.33527L12.4413 4.89413C13.0333 4.30184 13.7362 3.83199 14.5098 3.51143ZM20.2213 6.13128C19.7918 5.70158 19.2818 5.36071 18.7205 5.12814C18.1593 4.89558 17.5577 4.77588 16.9501 4.77588C16.3426 4.77588 15.741 4.89558 15.1797 5.12814C14.6184 5.36071 14.1085 5.70158 13.679 6.13128L12.6188 7.19142C12.2771 7.53313 11.7231 7.53313 11.3814 7.19142L10.3214 6.13142C9.4538 5.26383 8.27709 4.77641 7.05012 4.77641C5.82315 4.77641 4.64644 5.26383 3.77884 6.13142C2.91124 6.99902 2.42383 8.17574 2.42383 9.4027C2.42383 10.6297 2.91124 11.8064 3.77884 12.674L12.0001 20.8953L20.2214 12.674C20.6511 12.2445 20.9921 11.7344 21.2247 11.1731C21.4572 10.6118 21.5769 10.0102 21.5769 9.4027C21.5769 8.79516 21.4572 8.19357 21.2247 7.63229C20.9921 7.07102 20.651 6.56078 20.2213 6.13128Z" fill="#DF6F39" />
      </svg>
    </span>
    <!-- <span>Wishlist</span> -->
  </button>
</wishlist-button-load-point>

Please note that you need to install the Wishlist plugin on the seller side for the changes to reflect on the store front.