PRODUCTLIST.A5W

Purpose

The PRODUCTLIST.A5W page displays a list of products with thumbnail pictures and prices. A customer can purchase an item by clicking the shopping cart image.

Description

The URL that displays the PRODUCTLIST.A5W page may contain an optional parameter to filter the products shown by category ID. An example would be: productlist.a5w?cat=1002. PRODUCTLIST.A5W includes a JavaScript file named shopcart.js, which displays a product selected for the shopping cart in a popup window.

PRODUCTLIST.A5W contains the NAV_MAIN navigation, GRD_PRODNAV grid, and GRD_PRODS grid components.

Links

The following links display the PRODUCTINFO.A5W page.

the Category link in the GRD_PRODNAV grid component
the Products entry in the NAV_MAIN navigation component
the Search part on the INDEX.A5W, PRODUCTINFO.A5W, and SPECIALS.A5W pages

PRODUCTLIST.A5W in the WYSIWYG tab of the HTML Editor [Picture]

PRODUCTLIST.A5W in the Browser [Picture]

Edits to the Page Source

When you look at PRODUCTLIST.A5W with the Source tab of the HTML Editor, you will see a large amount of HTML and Xbasic code. The HTML Editor placed almost all of it there automatically, as we used the WYSIWYG tab to place the tables, text, graphics, and components on the page. There are a few interesting exceptions, where we changed the page code through the Source tab.

The LOGINUSERDATA.A5W page returns values for LoginID, LoginType, and LoginLevel. If the LoginType is not "I" (internal), the user is sent to the LOGIN.A5W page. If the user fails the login test, the script loads the FRAMEEXIT.A5W page, which then opens the ASWINDEX.A5W page.

a5w_include("loginuserdata.a5w")

This code defines the welcome message for current user. If the user is a customer, the script gets his or her first name from the customer table. Otherwise, the script gets the first name from the user_names table.

welcome = "" '

if loginid <> "" ' someone is logged in

if logintype = "C"

welcome = alltrim(table.external_record_content_get("[PathAlias.ADB_Path]\customer", "Firstname", "", "alltrim(Customer_id) = " + quote(loginid)))

else ' they are an internal user, get name from user table

welcome = alltrim(table.external_record_content_get("[PathAlias.ADB_Path]\user_names", "user_name","", "alltrim(user_id) = " + quote(loginid)))

end if

welcome = "Welcome " + welcome + "!"

end if

The code gets the style from the grid component. It will be needed to format the welcome and header messages.

pgstyle = tmpl_GRD_PRODNAV.style_name

The script then sets the session.__protected__chkoutprogress session variable to show that no checkout pages have been completed. The next statement deletes any existing session.__protected__chkout variable, to make sure that the customer's inputs are not merged with any previous data.

session.__protected__chkoutprogress = 0

delete session.__protected__chkout

The location = "" statement clears the highlighting of all entries in the menu. The stylename = pgstyle statement causes the style of the navigation component to match the GRD_PRODNAV grid component.

with tmpl_NAV_MAIN

location = ""

stylename = pgstyle

componentName = "NAV_MAIN"

end with

The stylename = pgstyle statement causes the style of the navigation component to match the GRD_PRODNAV grid component.

with tmpl_GRD_PRODNAV

stylename = pgstyle 'override style

componentName = "GRD_PRODNAV"

end with

This code defines the filter expression for the GRD_PRODS grid component and stores it in pfilter. If the optional cat parameter does not exist, it is created and set to "1000" (show all products).

pfilter = ""

if eval_valid("cat")

if cat = "1000"

else

pfilter = "Cat_id=\"" + cat + "\""

end if

This code overrides the filter of the GRD_PRODS grid component and sets the style of the component to match the GRD_PRODNAV grid component.

with tmpl_GRD_PRODS

DBF.filter = pfilter 'filter the products based on values passed to page

stylename = pgstyle 'override style

componentName = "GRD_PRODS"

end with

The page script then adds the search form. See Creating the Abstracted Search Code.

Later the pgstyle variable styles the heading of the page.

<tr>

<td colspan="2" align="middle" class="<%a5 ? pgstyle %>ErrorDataTD"> Since 1982, Your Preferred Sporting Goods Supplier! Now with Many New Products</td>

</tr>

If the welcome message is not NULL, the pgstyle variable styles the welcome message.

<%a5 if welcome <> "" %>

<tr>

<td class="<%a5 ?pgstyle %>ErrorDataTD" align="middle"><%a5 ?welcome %></td>

</tr>

<%a5 end if %>