Other components

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

The host scripts

The “cookieless” iframes communicate with one another through the server-side JavaScript file cataloghost.js, which resides on an Active server and mediates actions for the host such as frame sizing and scroll-to points.

The host script function ACSResizeFrame() can adjust the iframesʼ display size dynamically when the browser window size changes.

Note: The resize feature is useful when displaying the iframes in a standard web browser. It has no effect on fixed-size devices such as tablets or smart phones.

To link these scripts to the web page, include the following references on the page:

<script id="CatalogScript" type="text/javascript" src="db_server/db_name/js/cataloghost.js" ACShost="db_server"></script>
<script>document.getElementsByTagName("BODY")[0].onresize = function() {ACSResizeFrame()};</script>

Script parameters

In the CatalogScript reference, the src attribute points to the script that creates the catalog component. db_server is the address of the server where the clientʼs database resides; this will be one of:

db_name is the name of the clientʼs Active Manager database in Activeʼs web services, containing the wineryʼs name.

The placement of these script references on the page will vary with the development environment being used. In HTML pages, they are normally placed within the <HEAD> element. If you use the Active WordPress plugin, the script is managed by the shortcode ACSScript.


The progress meter

Progress meterAny of the primary iframes can display a progress meter, or wait cursor, while the script is loading the page. To add the meter to the host page, insert the following code immediately before each corresponding <div> section where you want it to appear:

<div id="ACSWaitCursor" style="position: fixed; display: inline-block; left: 45%; margin-top: 50px; z-index: 99;">
<img src="https://www.secureclub.net/images/activeclub/progressbar.gif"/></div>

If using the Active plugin for WordPress, use the shortcode argument waitcursor.

Once the iframe has loaded, the script resets the “ACSWaitCursor” <div> to display: none.

The image may be an animated GIF file in any HTML-accessible location.  More


The Member Login link

To enable registered club members to log in before shopping, the site may include a Member Login link, typically in the main site menu.


Member login form

Clicking this link displays the member login form. Once the user completes the form and clicks Login, the system recognizes the member and returns to the online shopping (or member choice) form, where it immediately applies the product options and discounts defined for that customer in the database.