Iframe descriptions

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

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.

Primary iframes

“Catalog”

The product catalog

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.

Product catalog

The script catalog.aspx populates the Catalog iframe with inventory items from the clientʼs 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.

Catalog filters

URL links to the “Catalog” iframe may be assigned to buttons or menus on other web pages, or distributed via e-mail (for example, to publicize a special offer).To limit the catalog display to a specific inventory item or package, these links can include filters. The catalog filters are added to URLs as additional arguments, in either of two ways:

Example: https://www.secureclub.net/acmewines/shop.aspx?PKRID=PK0000031

The catalog script converts these arguments to conditions in the SQL WHERE clause with which it searches the database for items to display.

Source tracking

When using the catalog filters, you can also associate the link with a specific e-mail marketing campaign by adding a ?SOURCECODE argument. For example:

https://www.secureclub.net/acmewines/shop.aspx?INRID=IN0000221&sourcecode=April2019

This link takes the user to the shopping cart site and selects a single inventory item for sale. If the customer purchases the item, the transaction record will be marked with “April2019” in the Promo Code 2 field. You can search the Transaction list for such records, and use the results to display the total revenue generated by the April2019 campaign.


The product details display

Product details displayIn 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.”


The shopping cart editor

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.

Shopping cart

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 screens

Checkout screenThe 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 (see The shopping cart checkout screens).


“Register”

The club signup forms

Club selection formTo 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.


Club selection reviewThe 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 (.RegisterFrameDiv and .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.”


“Manage”

Account managerThe 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:

“Selection”

The member choice catalog

Member choice catalog 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.


“Forgot Password” and “Reset Password”

Several components of the Active web site let users supply a login name and password:
  • Member login
  • Checkout screen
  • Account management
  • Member choice
Each of these forms also includes a “Forgot your password?” link. Similarly, a link labeled “Set Password” is included in the member Welcome letter, the membership data letter, and the declined credit card letter. Clicking any of these links opens a Password Reset form.

Password reset formAfter 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 Manager Userʼs Guide.


“Newsletter signup”

A pair of tools enables customers to subscribe to a regular newsletter:

Newsletter hookThe 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.


Newsletter Signup formClicking 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 Manager Userʼs Guide.


Newsletter Signup form-updateWhen 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.


“Unsubscribe”

E-mail Opt Out web page E-mail sent from Manager to customers can include an Unsubscribe link, which displays an “Opt Out” web form. Clicking Submit here unsets the Email Opt In option in the Customer record.

For details on the opt-out feature, see the Active Manager Userʼs Guide.

Note: “Password Reset” and “Unsubscribe” are available only in WordPress because they require passing URL parameters (for Customer ID and security checkword) to the iframe, which requires access to a scripting language (PHP, ASP, Perl, Java, etc.). Those who need these functions and do not wish to use WordPress must have them enabled in master pages.


Worker iframes

The shopping basket

Catalog shopping basketThe “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

Catalog menuThe 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

User message windowThe user message window displays instructions for the user and a Continue or Yes/No option.