Tweak Library

Wishlist

An "add to wishlist" icon in the form of a heart, allowing products to be saved for later.

Industries

  • Fashion, Bicycles
  • Computers & Electronics
  • Furniture & Homewares
  • Health & Beauty
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories

Wireframe

Wishlist

Coding Instructions

Directly underneath the final [%/if%] code in the form with the buying_options class, paste the following code:

[%if [@config:show_wishlist@]%]
    <span class="product-wishlist">
        [%in_wishlist id:'[@SKU@]' %]
          [%param if_true%]
              <a class="wishlist_toggle btn btn-lg btn-block btn-warning" rel="[@SKU@]"><span class="remove" rel="wishlist_text[@SKU@]"><i class="fa fa-star"></i></span></a>
          [%/param%]
          [%param if_false%]
              <a class="wishlist_toggle btn btn-default btn-lg btn-block" rel="[@SKU@]"><span class="add" rel="wishlist_text[@SKU@]"><i class="fa fa-star-o"></i></span></a>
          [%/param%]
        [%/in_wishlist%]
    </span>
[%/if%]

Step 2. Add the wishlist button to the list view thumbnail template

Directly underneath the final [%/if%] code in the form with the buying_options class, paste the following code:

[%if [@config:show_wishlist@]%]
    <span class="product-wishlist">
        [%in_wishlist id:'[@SKU@]' %]
          [%param if_true%]
              <a class="wishlist_toggle btn btn-lg btn-block btn-warning" rel="[@SKU@]"><span class="remove" rel="wishlist_text[@SKU@]"><i class="fa fa-star"></i></span></a>
          [%/param%]
          [%param if_false%]
              <a class="wishlist_toggle btn btn-default btn-lg btn-block" rel="[@SKU@]"><span class="add" rel="wishlist_text[@SKU@]"><i class="fa fa-star-o"></i></span></a>
          [%/param%]
        [%/in_wishlist%]
    </span>
[%/if%]

Step 3. Shuffle elements or update styles to suit

Edit the CSS and remove the block classes on the buttons to have them on the same row or introduce another row and grid elements.

Step 4. Editing the content that displays when user adds/removes a product to their wishlist (optional)

When a customer add a product to their wishlist, the wishlist button will update to reflect this. The content that it displays is set in your themes js/custom.js file in the 'htmlon' and 'htmloff' attributes.

You might not want this text to display, but instead to display just icons. To do that, update the 'htmlon' and 'htmloff' attributes to the following:

Please Note: this is a global change for your Neto site, so where ever the wishlist button is used (e.g the product page), this will now be the new default values when adding/removing products from the wishlist.

Final Result

Multi-Item Add

Multi-Item Add

Download Files

Download Files