Functionally, the available iframe elements fall into two groups. Primary iframes contain the basic web functions. They can appear on a web page either alone or in combination with other primary iframes. Worker iframes support the primary iframes with the catalog menu, the shopping “basket,” and the user message window.
Other components of the toolkit include the catalog host script reference, which is required, as well as the optional resize function, progress meter, and member login link.
The “Catalog” iframe includes the main product catalog, the product details display, the shopping cart editor, and the checkout screens.
The “Register” iframe includes the club signup selection form, the selection cart, and the selection checkout screens.
The “Manage” iframe provides forms for customers to manage account details, including billing and shipping addresses and credit card information, or view their order histories.
The “Selection” iframe provides the features connected with member choice (“futures” or “allocation”) clubs.
“Forgot Password” and “Reset Password” create forms where customers can set or reset their passwords to access the web components.
“Newsletter signup” and “Newsletter Hook” are a mechanism for the clientʼs customers to subscribe to its e-mail newsletter.
The “Unsubscribe” iframe enables customers to opt out of company marketing e-mail.
The product catalog displays the items for sale; the online shopper can add any item to the shopping cart and change the quantity on order.
catalog.aspx populates the Catalog iframe with inventory items from the clientʼs Active Club database. It displays the product details from each itemʼs Inventory or Package record, and formats the text using CSS styles defined in the master style sheet specified in the Frame Configuration.
To limit the display to a specific inventory item or package, the designer can insert filters in the HTML code that creates the “Catalog” iframe.
In the product catalog, the product imageʼs
onclick event is programmed to display full details for each inventory item — vintage, varietal composition, awards, etc. — in the Catalog window, replacing the initial display of catalog items. This is most useful for design variants (e.g. “Napa”) that do not display these details.
As with the product catalog, the product details displayʼs appearance depends on CSS styles in the iframe style sheet; the selectors for this component begin with the string “CatalogElement.”
Once the online shopper has added items to the “shopping cart,” the shopping cart editor lets him or her view and modify its current contents; it appears when a user clicks the View Cart button in the shopping basket. The Continue Shopping button closes the editor and resumes displaying the catalog and shopping basket. Proceed to Checkout displays the checkout screen.
As with the catalog and details displays, there is no need to add this component to the host page separately; the “View Cart” function automatically replaces the Catalog <DIV> with a <DIV> of its own (“CartDiv”). Within the iframe, the appearance of this component is controlled by its own set of CSS classes (“CartBody,” etc.) in the iframe style sheet.
The checkout screen appears when the shopper clicks the Proceed to Checkout button in the shopping cart. It consists of five separate displays, which appear in order as the customer completes the steps in the checkout process.
Here again, “ProceedToCheckout” automatically replaces the existing Catalog <DIV> on the host page, and uses the same host site CSS classes
.CatalogFrame, so that no additional steps are needed to create the checkout screen. The styles for its content are defined in the iframe style sheet in CSS selectors named with the string “Checkout.”
To enable online shoppers to select and join a club without leaving the web page, the web tools include a club selection and signup iframe.
For each club, Select Club Preference lets the customer choose a product-type subgroup, such as “Reds Only,” where such choices are available.
This line can be removed for any specific club by adding the command
<NOTYPE> to the clubʼs record in Managerʼs Group list.
The Continue button displays the Club Signup form, where the user can review his choices and remove clubs from the list or return to the club selection page. Proceed to Registration opens the Register : Billing Information form, where the new member supplies billing, shipping, and payment details.
If the signup iframe is placed on the same host page as the product catalog, the catalog script will read the data the user supplies, create the associated membership records, and immediately apply the appropriate club discounts and other options to any transaction being processed in the current session, without the need to exit the page and log in again.
Like the other web components, the club signup <DIV> and iframe are subject to CSS styles (
.RegisterFrame) which must be added to the host siteʼs style sheet. The iframe styles that control the formʼs appearance within the iframe are prefixed with the string “Register.”
The account manager lets the online customer view and modify account details. It opens with a login form; clicking Login here opens the first of seven Manage Account forms, where the customer can view and edit:
Credit card details
For members of “member choice” clubs, the user login formʼs Login button displays a product list much like the main product catalog, including the shopping “basket” as shown.
Several components of the Active web site let users supply a login name and password:
After the user confirms his name here, the system sends a password reset request. This e-mail in turn contains a further link to a secure Reset Password page, where the user can enter a new password.
Note: The “reset password” feature is available only in pages developed using WordPress. In other environments, the Forgot Password link must be directed to an appropriate URL.
For details on the password reset tools, see the Active Club Manager Userʼs Guide.
A pair of tools enables customers to subscribe to a regular newsletter:
The newsletter “hook” widget can be placed anywhere on a web page. A user enters his e-mail address and clicks Sign Up to display the Newsletter Signup form.
Clicking Submit in the signup form validates the e-mail address and sets the Newsletter and Email Opt In options in the Customer database record.
For details on newsletters and subscriptions, see the Active Club Manager Userʼs Guide.
When an existing customer subscribes to the newsletter, the web application confirms the known name and address details and changes the Submit button to Update, which again sets the Newsletter and Opt In options.
Note: The newsletter “hook” is available only in web pages developed using WordPress. The signup form can be used on its own, without the “hook,” in any environment.
E-mail sent from Manager to customers can include an Unsubscribe link, which displays a web form titled “Opt Out.” Clicking Submit here unsets the Email Opt In option in the Customer record.
For details on the opt-out feature, see the Active Club Manager Userʼs Guide.
The “shopping basket” contains a small summary display of the items currently on order. It appears after a user clicks Add to Cart for an item in the product catalog.
Clicking the View Cart button opens the shopping cart editor.
The catalog menu contains contains a list of inventory or package headings (e.g., “Reds” or “Whites”). Clicking a heading filters the product catalog display to show only the items in that category.
The items on the catalog menu are controlled by Inventory or Package headings in Manager.
The user message window displays instructions for the user and a Continue or Yes/No option.