Ellucian Quercus Shopping Cart Installation Guide<>

Installing and Configuring the Shopping Cart JavaScript Plug-in

The shopping cart JavaScript plug-in is developed for third-party websites from which users can purchase Ellucian Quercus courses.

The plug-in is stand-alone, and its dependencies (jQuery and jQuery cookie libraries) are embedded (that is these resources are included with the plug-in and are only used when required).

This section describes the six steps required to configure and use the plug-in on a website:

Configure the default styling

Change shopping cart attributes

Include the shopping cart plug-in on a website

Start the plug-in after the page is loaded

Placeholder to show or hide the shopping cart

Create the Add to Cart button

Configure the Default Styling

Default styling is provided by the plug-in and can be disabled.

To disable default styling set 'yes' to 'no' in the body tag:

<body onload="buildCart.init( '', '', '', '', '$', '', '', 'no', '280', '60' )"> 

Change Shopping Cart Attributes

The following attributes are available to be set in the buildCart.init(..) function:

cart-name

cart-is-empty-message

cart-is-updated-message

item-existsin-cart-message

currency

button-label

return-to-cart-message

css-style (yes or no)

cart-width (in pixel)

cookie-expire (in minutes)

The attributes are are set in the body onload attribute as follows:

<body onload="buildCart.init( '', '', '', '', '$', '', '', 'no', '280', '60' )">

Include the Shopping Cart Plug-on a Website

Include 'shopping-cart.js' before the closing </body> tag, for example:

<script src="js/shopping-cart.js" type="text/javascript"></script>

Start plug-in after the page is loaded

The onload function is required to start the plug-in, it needs to be added as an attribute to the <body> element.

<body onload="buildCart.init( 'cart-name', 'empy-message', 'updated-message', 'exsits-message', '$', 'button-label', 'return to cart-message', 'yes', '280', '60' )>

Placeholder to Show or Hide Cart

Add the following div element to the pages where the Shopping Cart control are to appear.

<div id="my-cart">/cart-name placed here/</div>

The plug-in attaches the Shopping Cart name and counter to the div.

Create Add to Cart Button

This is required to add items to the Shopping Cart. The button has to be created by the Webmaster when course list is generated, or hard-coded on the page.

The button needs to submit four parameters to the cart coursid, coursname, coursprice, coursdate:

<input type="submit" coursdate="2012-12-12 - 2012-12-12" coursprice="85" coursname="New Course" coursid="16473109" value="ADD TO CART" name="Add to cart" class="add-to-cart">

Example 1: Hard-coded courses and buttons

Example 2: Courses parsed by Ajax

Once the shopping cart plug-in has been successfully installed, visitors to your website can:

1Add programs to the shopping cart.

2View the contents of the shopping cart and remove items from it.

3Checkout and pay for their chosen courses (this redirects the user to an Ellucian Quercus installation).