Implementing in HTML

The web toolkit

Iframe descriptions

Other components

Building the page

Implementing in WordPress

Implementing in HTML

Configuring CSS styles

Iframe CSS styles

CSS file structure

The checkout screens

Club selection and signup

The account manager

Administrative tools

In an installation using standard HTML techniques, the web designer implements each of the scenarios listed at Building the page by inserting the appropriate <div> segment for each of the required iframe components.

As already noted, most client web pages are developed in WordPress, using the Active plugin.

Iframe details

The basic structure of all the components is the same:

<div id="DivName" style="visibility: hidden;" class="CSS_class">

<iframe id="IframeName" class="CSS_class" src="db_server/db_name/script_name?wcrshopid=fcrid_1&wcripadshopid=fcrid_2" ACSHost="db_server"></iframe></div>


The container <div>

Each iframe sits within a <div> which applies style properties from the host siteʼs style sheet and controls the frameʼs visibility. The containing <div> has the following attributes:

The iframe

The iframe itself contains the following:

Creating the iframes

As already noted, the Active web toolsʼ design allows for a restricted set of combinations of primary and worker iframes, representing the most commonly needed scenarios for e-commerce and member services. Click an item in the list to view the basic code template for that scenario.

Notes:

1. All the code examples include the main host script and the progress meter.

2. The examples below are for illustration only. The current plain-text version of the iframe templates, including instructions, is available at http://www.secureclub.net/Help/cart/iFrameSampleCode.Txt.

(1) Club signup only (“Register”)

(2) Shopping cart only (“Catalog”)

(3) Shopping cart + club signup

(4) Account management only (“Manage”)

(5) Shopping cart with account management

(6) Account management + shopping cart

(7) Member choice only (“Selection”)

(8) Account management + member choice

Setting the parameters

The sample code presented here will create working iframe components for the database demodb_3. The recommended procedure is first to add the sample code directly to a web page, without modifying it. Once you are sure that the components work together and are correctly integrated into the host web site, you can change the details to refer to the clientʼs database.

To enable the toolkit features with live data on the clientʼs site, you will need to alter the sample code by updating the following attributes:

Note: Every template scenario includes a number of iframe components; you must make these changes in all of them.