This checks to see if a product is present in a user's wishlist, which can then display an option to remove if it is, or an option to add if the product is not present.


<div class="product-wishlist">
    [%in_wishlist id:'[@sku@]'%]
        [%param *if_true%]
            <a class="wishlist_toggle btn btn-lg btn-block btn-warning" href role="button" title="Remove from Wishlist" rel="[@sku@]">
                <span class="remove" rel="wishlist_text[@sku@]"><i class="fa fa-star" aria-hidden="true"></i></span>
        [%param *if_false%]
            <a class="wishlist_toggle btn btn-default btn-lg btn-block" href role="button" title="Add to Wishlist" rel="[@sku@]">
                <span class="add" rel="wishlist_text[@sku@]"><i class="fa fa-star-o" aria-hidden="true"></i> Wishlist</span>


This function is primarily used as a check to see if a product is in a user's wishlist. In order to add/remove products from their wishlist, the HTML link has to have the following attributes:

  • Class of wishlish_toggle,
  • A rel of [@sku@],

And the span element inside has to have the following:

  • Class remove/add (depending on if its adding or removing product from wishlist),
  • A rel of wishlist_text[@sku@]

Further customization can be used to reflect any Wishlist customization, rather than use the default 'Add to/Remove from Wishlist'. E.g:

    'class': 'wishlist_toggle',
    'textclass': 'wishlist_text',
    'htmlon': 'Remove From Wishlist',
    'htmloff': 'Add To Wishlist',
    'tooltip_css': 'whltooltips'

Further examples of customization:

var defvals = {
    'class': 'wishlist_toggle',
    'imageon': '/assets/wishlist/remove.gif',
    'imageoff': '/assets/wishlist/add.gif',
    'textclass': 'wishlist_text',
    'htmlon': 'Remove From Wishlist',
    'htmloff': 'Add To Wishlist',
    'tooltip_css': 'whltooltips',
    'fade': true,
    'addmethod': 'checkbox',
    'showsummary': 0,
    'notifications': {
        'duration': 2000,
        'sticky': false,
        'show_close': false,
        'show_overlay': false,
        'centre_on_scroll': true,
        'hide_on_click': false
    'chooser': {
        'header': '<div class="wishlistoverlay"><div class="header modal-header">Add or Remove ##model## From Wishlist</div>' + '<table border="0" cellpadding="4" cellspacing="0" width="100%" class="body modal-body">',
        'body': '<tr><td class="listname" width="1%" nowrap="nowrap">##name##</td><td><span class="addremovelink">##button##</span></td></tr>',
        'footer': '</table>' + '<div class="createnewlist"><a href="javascript:void(0);" onclick="$.toggleAddNew()">Or Add To A New List</a></div>' + '<div id="wishlisttoggle" style="display:none;">' + '<table border="0" cellpadding="4" cellspacing="0"><tr>' + '<td>New List Name : <input type="text" maxlength="50" size="20" id="addwl##sku##" /></td>' + '</tr></table>' + '</div>' + '<hr><button id="closepopup" class="btn btn-success" onclick="$.closePopup(\'##sku##\', \'addwl##sku##\')"><span id="savemsg">Save My Wishlist Changes</span></button></div>'
    'summary': {
        'header': '<div class="wishlistoverlay"><div class="header header-modal">Wishlist Summary</div><table border="0" cellpadding="4" cellspacing="0" width="100%" class="body">',
        'body': '<tr><td><b>##model##</b> is in wishlist <b>##name##</b></td></tr>',
        'isempty': '<tr><td>Item is removed from all wishlists</td></tr>',
        'footer': '</table><hr><button id="closepopup" class="btn btn-success" onclick="$.nClosePopupBox()">Close Window</button></div>'
    'overlay_id': 'whloverlay',
    'button_id': 'whlbutton',
    'input_id': 'whlinput',
    'selector_id': 'whlselector',
    'msg': {
        'ITEM_ADDED': 'Added to Wishlist \'##name##\'.',
        'ITEM_REMOVED': 'Removed from Wishlist \'##name##\'.',
        'INVALID_SKU': 'Invalid item.',
        'REQUIRE_LOGIN': 'You must first <a href="/_myacct/" title="login"><b>login</b></a> or <a href="/_myacct/" title="create an account"><b>create an account</b></a> to add to a Wishlist',
        'ADDWISHLIST': 'Add New Wishlist And Save My Changes',
        'SAVECHANGES': 'Save My Wishlist Changes'
    'debug': false,
    'showparam': false


Name Options Description
id:'' Integer The ID of the product. Most often the product's sku
*if_true HTML & b@se tags Uses the if_true template, returning the default "Remove from Wishlist" option
*if_false HTML & b@se tags Uses the if_false template, returning the default "Add from Wishlist" option

Data tags

Name Product Field Example Description
[@sku@] SKU ABC123 Product SKU

Was this article useful?

Be notified when this page is updated. Optional.