Wishlist

Create a 'Add to wishlist' icon (allowing products to be saved for later) that appears in the product gallery view page.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the thumbnail templates

• The gallery thumbnail template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html.
• The list thumbnail template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html.

Step 2: Add the wishlist button

Directly underneath the final [%/if%] code in the form with the buying_options class, paste the following code for both the gallery and list thumbnail templates:

[%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: Editing the content that displays when user adds/removes a product to their wishlist (optional)

When a customer adds 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 Maropost Commerce Cloud 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