Copyright October 22, 2001
Stepcast Interactive Ventures Inc.
The latest version of this document can be found at
http://www.stepcast.com/wishcast/wizard/javascript/docs/install
About Stepcast
About WishCast Wizard
About WishCast Wizard (JavaScript)
Installation
Step 1 - Copy the function
Step 2 - Paste the function
Step 3 - Insert "Add to Wish List"
links or
buttons
Step 4 - Insert your merchant ID
Step 5 - Describe your item
Step 6 - Test
Step 7 - Read more
Parameters
Notes
Stepcast is a leading developer of retail Web services for use by small- to mid-size businesses and other community portal and content sites.
From our universal registry, to our WishCast product suite, we're here to help our partners strengthen customer relationships, attract new customers, reduce shopping cart abandonment, and increase their revenue. At the same time, our goal is to make the entire shopping process and wish list experience easier for our users and the customers of our partners.
For more information about Stepcast, please see http://www.stepcast.com or contact info@stepcast.com. If you have any questions regarding integrating WishCast Wizard, please contact support@stepcast.com.
WishCast Wizard is the easiest and most affordable way to add wish list or gift registry functionality to an online store.
Using a JavaScript, Java, or direct XML interface, an "Add to Wish List" button can easily be placed next to any "Buy" button or product listing. Clicking the button opens an HTML-based interface to the Stepcast universal network, passing item attributes and contact details to a centralized server.
The end result is that the customer has a universal wish list that works across multiple retail sites and can drive additional sales, attract new users, reduce product returns, and improve customer service.
This document describes the JavaScript version of WishCast Wizard; for more information on the Java or XML versions, see http://www.stepcast.com/wishcast/wizard.
The following instructions will help you put "Add to Wish List"
links or buttons on your site. The links will call the
openWishCastWizard() JavaScript function.
This will result in a new WishCast Wizard window opening.
The Wizard will walk the user through adding your item to their
wish list. For a demonstration, see http://www.stepcast.com/wishcast/wizard/demo.
The openWishCastWizard() function simply redirects the
user's browser to a URL at Stepcast, encoding in the query string
the current URL and any data passed in the function call.
Copy the function shown below to your clipboard, between and
including the <script> and
</script> tags.
<script language="javascript" type="text/javascript"><!--
/*IMPORTANT: Installation and USE OF THIS SCRIPT IMPLIES
ACCEPTANCE of the terms and conditions as set forth at
http://www.stepcast.com/wishcast/wizard/javascript/docs/terms.
You are free to use, distribute or modify this script AS LONG
YOU INCLUDE THIS COMMENT UNCHANGED.*/
function openWishCastWizard() {
var args="?arg0="+escape("itemurl="+location)
for (i=0;i<arguments.length;i++) {
args+="&arg"+(i+1)+"="+escape(arguments[i])}
location="http://www.stepcast.com/wishcast/createwizard.cfm"+args
return false}//-->
</script>
Paste it into any pages on your site where you would like an "Add to Wish List" button. The function only needs to be placed on a page once, but it must be placed above where you would like the button(s).
Anywhere you would like an "Add to Wish List"
link, cut and paste the following HTML,
between and including the <a> and
</a> tags:
<a href="javascript:openWishCastWizard( 'merchant=test', 'description=John\'s Square Ball', 'color=blue', 'price=24.99', 'currency=USD')">Add to Wish List</a>
It will give you a link like this (try it!):
Note that you must put a backslash in front of any apostrophes you
want in the text, as in 'description=John\'s Square
Ball' above.
Anywhere you would like an "Add to Wish List"
button, cut and paste the following HTML.
You don't need the <form> and
</form> tags if you are putting the button
within an existing form on your page.
<form><input type="button" value="Add to Wish List" onclick="return openWishCastWizard( 'merchant=test', 'description=John\'s Square Ball', 'color=red', 'price=24.99', 'currency=USD')"></form>
It will give you a button like this (try it!):
Note that you must put a backslash in front of any apostrophes you
want in the text, as in 'description=John\'s Square
Ball' above.
If you have registered at http://www.stepcast.com/wishcast/wizard/register,
change the 'merchant=test' line to have your Merchant
ID (e.g., 'merchant=123456').
Change the other lines to describe your item. All the possible parameters are listed below.
Load your new page and try it out!
Be sure to read the Parameters and Notes sections below to get the most from WishCast Wizard (JavaScript).
The openWishCastWizard() function can take any, all,
or none of the following parameters, separated by commas as shown
in the above examples. In all cases, X can be any string of
characters as it gets encoded by the function to be safely passed
as a URL parameter.
To include an apostrophe (e.g., John's), you must put
a backslash in front of it (e.g., John\'s). The list
of arguments may be updated from time to time to add functionality
to WishCast Wizard. Check http://www.stepcast.com/wishcast/wizard/javascript/docs/install
for updates.
'merchant=X' where X is your Stepcast Merchant ID;
register to get one at
http://www.stepcast.com/wishcast/wizard/register;
if you don't have one, the Wizard will simply say "Not
Registered" and will not be branded with your store name and
logo
'description=X' where X is a short description of
the item (e.g., 'description=Square Ball')
'productcode=X' where X is a UPC, SKU, or any
other product ID you may use to identify this product (e.g.,
'productcode=2738XYZ')
'brand=X' where X is the brand name of the item
(e.g., 'brand=Acme')
'model=X' where X is the model name of the item
(e.g., 'model=Mach II')
'colour=X' or 'color=X' where X is
the colour or colours of the item (e.g., 'colour=red and
white')
'size=X' where X is the size of the item (e.g.,
size='large')
'price=X' where X is the price of the item using
only numbers and an optional decimal (e.g.,
price='24.99')
'currency=X' where X is a three-character currency
code as defined in the ISO 4217 standard, available at http://www.stepcast.com/wishcast/wizard/javascript/docs/currencies
(e.g., 'currency=CAD')
'comment=X' where X is any comment you would like
to add to help describe this item (e.g., 'comment=This
item will no longer be available after December 2001')
'category=X' where X is comma-separated list of
numeric category codes as defined at http://www.stepcast.com/wishcast/wizard/javascript/docs/categories
(e.g., 'category=23,57,104')
'quantity=X' where X is the quantity desired by
the user, which defaults to 1 (e.g., 'quantity=2')
'itemurl=X' where X is the URL for the item at
your online store; if you don't specify this, the current URL
will automatically be sent (e.g.,
'itemurl=http://your.domain/item?id=123')
'imageurl=X' where X is the URL for an image of
the item on your site; this will allow us to display the image
beside the item on the person's wish list (e.g.,
'imageurl=http://your.domain/images/123.gif')
While not required, it is recommended that you add a "Wish List" or "Gift Registry" link somewhere in your site's navigation. This will help communicate the benefits of this service to your users. To get you started, feel free to copy and paste the HTML between the two <hr> tags from this page on our store.
If you have not registered at http://www.stepcast.com/wishcast/wizard/register, the Wizard will simply say "Not Registered" and will not be branded with your store name and logo.
You do not have to have your links and buttons say "Add to Wish List". You can say "Add to Gift Registry", "Add to Bridal Registry", "Add it to your shopping list" or anything else you'd like. The Wizard asks your user what they would like to call their list anyway: "Wish List", "Gift Registry", "Shopping List", or something else.
If your site uses SSL, you can change the URL in the
openWishCastWizard() function to use
https:// rather than http://. This will
help avoid possible error messages that some browsers display when
showing a page with both secure and non-secure items.
This document may be updated from time to time to reflect improved functionality of the WishCast Wizard service. Check http://www.stepcast.com/wishcast/wizard/javascript/docs/install for the latest version.
If the HTML for your item pages is generated by server-side scripts (ASP, ColdFusion, JSP, etc.), you can use those scripts to automatically generate a different link or button for each item. For example, you might use ColdFusion code like this:
<cfset item.desc="Square Ball"> <cfset item.price="24.99"> Do you want a #item.desc#? <a href="javascript:openWishCastWizard( 'merchant=test', 'description=#item.desc#', 'price=#item.price#', 'currency=USD')">Click here</a> to add it to your own personal wish list.
Be creative. And don't forget to also include the
openWishCastWizard() JavaScript at the top of your
page. If you need any help, feel free to
contact us.
If you have an "Add to Cart" style form that prompts for quantity, size, colour, etc., you can pass the correct values to WishCast Wizard using embedded JavaScript in the link or button. Some knowledge of JavaScript is required here, but the example should help you on your way.
Say you had the following HTML form on your page:
<form action="#form1"> Square Ball $24.99<br> Quantity: <input type="text" name="qty"><br> Colour: <select name="colour"> <option>red<option>white</select> <input type="submit" value="Add to Cart"> </form>
It would look like this:
Now, to add a WishCast Wizard button that correctly passes the quantity and colour to the Wizard, you could use this code (note the colour and quantity options):
<form action="#form2">
Square Ball $24.99<br>
Quantity: <input type="text" name="qty"><br>
Colour: <select name="colour">
<option>red<option>white</select>
<input type="submit" value="Add to Cart">
<input type="submit" value="Add to Wish List"
onclick="return openWishCastWizard(
'merchant=test',
'description=Square Ball',
'colour='+this.form.colour.options[this.form.colour.selectedIndex].text,
'quantity='+this.form.qty.value,
'price=24.99',
'currency=USD')">
</form>
which would look like this (try it!):
Copyright October 22, 2001
Stepcast Interactive Ventures Inc.