Wishlist

Template

The wishlist is accessed via products/wishlist.tpl.html

Variables

Using Display Options

To use display options on the Wish List, you must first enable the following store setting:
Aurora > Store > Settings > Frontend (tab) > Wish List (section) > Enable display options

Once this has been enabled, the display option variables listed above will be exposed to the template.

Example Templates and AJAX Interfaces

The following examples detail how you can use multiple templates with various Aurora AJAX interfaces to create a dynamic Wish List:

• products/wishlist.tpl.html

  {assign var='metaTitle' value="Wishlist"}
  {include file="_includes/header.tpl.html"}
  <div class="productlisting_container">
    {include file="products/wishlist/items.tpl.html"}
  </div>
  {include file="_includes/footer.tpl.html"}
  

• products/wishlist/items.tpl.html

  {if $wishlist}
    <label for="view">View: </label>
    <select name="view" id="view" class="wishlist_items_per_page">
      {foreach from=$items_per_page_options key="value" item="name"}
      <option value="{$value}"{if $value == $items_per_page_selected} selected="selected"{/if}>{$name}</option>
      {/foreach}
    </select>
    <label for="sortby">Sort By: </label>
    <select name="sort_by" id="sortby" class="wishlist_sort_by">
      {foreach from=$sort_by_options key="value" item="name"}
      <option value="{$value}"{if $value == $sort_by_selected} selected="selected"{/if}>{$name}</option>
      {/foreach}
    </select>
    {include file="generic/pagenumbers.tpl.html"}
    {foreach from=$wishlist item="item"}
    <img src="/images/ac_product_images/product_image_data/resizeandpad:400:600/{$main_image_id}.jpg" /><br />
    <a href="#" class="wishlist_add_to_basket" rel="{$item.product_id}{if $item.product_variation}:{$item.product_variation}{/if}">Add to Basket</a><br />
    <a href="#" class="wishlist_delete" rel="{$item.product_id}">Remove from Wish List</a><br />
    <a href="{$item.product.product_filename}">{$item.product.product_name}</a></div><br />
    {if $item.product.product_price_rrp > $item.product.my_price}
      <p><span class="was">{$item.product.product_price_rrp|displayPrice}</span> {$item.product.my_price|displayPrice}</p>
    {else}
      <p>{$item.product.my_price|displayPrice}</p>
    {/if}
    {/foreach}
  {else}
    <p>You do not currently have any items in your Wish List</p>
  {/if}
  

• AJAX Interfaces (examples use the Aurora $.frontend jQuery Library):

  • /ajax/Ajax_Wishlist/getWishlist

    $(document).on('change', '.wishlist_sort_by, .wishlist_items_per_page', function() {
      var data = {sort_by: $('.wishlist_sort_by').val(), items_per_page: $('.wishlist_items_per_page').val()};
      $.frontend.rpc.blockElement('.productlisting_container');
      $.frontend.rpc.post('/ajax/Ajax_Wishlist/getWishlist', data, function (response) {
        $('.productlisting_container').html(response.wishlist);
        $.frontend.rpc.unblockElement('.productlisting_container');
      }, 'json');
    });
    

  • /ajax/Ajax_Wishlist/addToWishlist

    $(document).on('click', '.wishlist_add', function(e) {
      e.preventDefault();
      var product_id = $(this).attr('rel');
      var attributes = $('[name^="attributes['+product_id+']"]:first').serialize();
      var data = { ajax: true, product_id: product_id, attributes: attributes }
      $.frontend.rpc.get('/ajax/Ajax_Wishlist/addToWishlist', data, function (response) {
        if (response.added_to_wishlist) {
          $.frontend.alert('Product added to wish list', 'Success');
        }
      }, 'json');
    }); 
    

  • /ajax/Ajax_Wishlist/deleteFromWishlist

    $(document).on('click', '.wishlist_delete', function(e) {
      e.preventDefault();
      $.frontend.rpc.blockElement('.productlisting_container');
      var data = {'product_id': $(this).attr('rel')};
      $.frontend.rpc.post('/ajax/Ajax_Wishlist/deleteFromWishlist', data, function (response) {
        if (response.deleted_from_wishlist) {
          $.frontend.rpc.post('/ajax/Ajax_Wishlist/getWishlist', data, function (response) {
            $('.productlisting_container').html(response.wishlist);
            $.frontend.alert('Product deleted from wish list', 'Success');
          }, 'json');
        } else {
          $.frontend.alert('Unable to deleted product from wish list', 'Error');
        }
        $.frontend.rpc.unblockElement('.productlisting_container');
      }, 'json');
    });
    

  • /ajax/Ajax_Basket/addToBasketDropdown

    $(document).on('click', '.wishlist_add_to_basket', function(e) {
      e.preventDefault();
      var product_id = $(this).attr('rel');
      var variation_id = false;
      // Add to basket when there is already a variation ID
      if (product_id.indexOf(':')) {
        var parts = product_id.split(':');
        product_id = parts[0];
        variation_id = parts[1];
      }
      if (variation_id && variation_id.length > 0) {
        var data = encodeURI('product_quantity=1&product_id=' + product_id + '&variation_id=' + variation_id);
        $.frontend.rpc.post('/ajax/Ajax_Basket/addToBasketDropdown', {all_fields: data}, function (response) {
          $.frontend.alert('Product added to basket', 'Success');
        }, 'json');
      // Otherwise, show quick view
      } else {
        $.frontend.rpc.get('/ajax/Ajax_Products/getQuickViewContent', { quick_view: product_id }, function (response) {
          $.frontend.popup.data(response[0]);
        }, 'json');
      }
    });