Adding Wish List features to a Product template


	Adding Wish List features to a Product template
	Last Edited - 01/25/2012 4:52pm PST
	Category Path - Shopping Cart Software Components > Administration Area > Modules > Wish Lists > FAQs & Tutorials

This tutorial demonstrates examples of both how add an "Add to Wish List" form to a product page in your storefront. Customers can use this form to add a product to either an existing or new wish list that they own.

These examples are intended for use in the product template. (File name: product.tpl). At this time, the QuickCode Tags below may not produce the expected results if used in other templates.

the following work may already have been done for you

If using the shopping cart software's Universal Template system (where just a single universal.tpl template file is used, instead of individual templates for each page) then the Wish List features listed below will already be present in your storefront!

If using the Universal Template system, turn on the Wish List system simply by going to the [Modules > Wish Lists] section of your store's Administration Area. On that page, set the Enable the Wish List module in the storefront? option to "YES", and click the Save Changes button. *Poof*, instant Wish Lists.

Add a Wish List option to a Product's Page

Below is sample code for displaying a wish list option on a product page in your store. Edit the product template in your store, and add the following HTML and QuickCode Tags to the desired location.

The sample below is very simple. The display of the wish list options can be made more elaborate using CSS, HTML tables, etc., — the example below has been left simple just to demonstrate how the system works.

wish list bare essentials

{IF-USING-WISH-LISTS-BEGIN}
{IF-CUSTOMER-LOGGED-IN-BEGIN}
    {IF-WISH-LIST-BEGIN}
      
      <a href="{URL-ADD-TO-WISH-LIST}" title="Add to wish list">Add to my Wish List</a>
    {ELSE}
      <form name="new_wish_list_form" method="post" action="{THIS-PAGE}">
        Add this product to a new wish list:
        <p>Wish list name: {FIELD-WISH-LIST-NAME}</p>
        <p>Publicly viewable? {FIELD-WISH-LIST-IS-PUBLIC}</p>
        <p><input type="submit" name="submit_new_wl" value="Create this Wish List" /></p>
      </form>
    {IF-WISH-LIST-END}
{ELSE}
    <p>Log in to add this product to a <b>wish list</b>!</p>
    <form name="sample_login_form" method="post" action="{THIS-PAGE}">
      Email Address: <input type="text" name="login_email" size="30" />
      <p>Password: <input type="password" name="login_password" size="30" /></p>
      <p><input type="submit" name="cmr_login" value="Log in to your Customer Account" /></p>
    </form>
{IF-CUSTOMER-LOGGED-IN-END}
{IF-USING-WISH-LISTS-END}

The code example above would result in something that looks like this if the customer is logged in:

if customer is logged in...

Add to my Wish List

Otherwise, if the customer is not logged in, a prompt to do so will be displayed instead:

if customer isn't logged in...

Once the customer is logged in, they can click the Add to my Wish List link to add the product to their Wish List. They can then manage their Wish List in the "wish_list" area of the storefront.
For example: http://www.mystore.com/wish_list

Replacing the "Add to Wish List" form with a link

In the example code above, there is a note that the code to display the "Add to Wish List" link could also be replaced with a form.

Using a form instead of a simple link has several advantages:

The customer can specify which of their Wish Lists to add the product to (if they have more than one Wish List).
A quantity of the product can be specified.
The product can be given a priority level.
The product can be set to be removed from the Wish List when it is purchased.
Comments can be recorded for the product on the Wish List.

note

If using the simple "Add to Wish List" link, the items listed above can still be specified for items on a customer's Wish List in the "wish_list" area of the storefront.

To use a form instead of a link, replace the following code from the sample above:

"add to wish list" link code

with form code like this:

"add to wish list" form code

<form name="add_to_wish_list_form" method="post" action="{THIS-PAGE}">
Wish List Name: {FIELD-WISH-LIST-SELECT}<br />
Quantity: {FIELD-PRODUCT-QUANTITY}<br />
Priority: {FIELD-WISH-LIST-ITEM-PRIORITY}<br />
Remove from wish list when purchased?: {FIELD-WISH-LIST-ITEM-REMOVE-WHEN-PURCHASED}<br />
Comments: {FIELD-WISH-LIST-ITEM-COMMENT}<br />
<input type="submit" name="submit_add_to_wish_list" value="Add this to my Wish List" />
</form>