Friday, May 10, 2013
Welcome to My Menu
Blog Entry #288
We continue today our analysis of the shopping cart code of HTML Goodies' "So, You Want A Shopping Cart, Huh?" tutorial.
So, a user goes to the shopcartindex.html frameset page and is greeted by the welcome.html and navigate.html pages in the frameset's right and left frames, respectively. There's not much to the welcome.html and navigate.html pages, but let's look at them anyway, shall we?
welcome.html
The welcome.html page bears a brief welcome message for the user:
This page is titled welcome.html. It contains no Shopping Cart functions. It simply acts as your welcoming page. The frames page ([shopcart]index.html) contains the majority of the shopping cart commands.It's true that welcome.html doesn't contain any shopping cart functions, although its document body does begin with a JavaScript snippet
<script language="javascript"><!-- hide
if (self == parent) {
document.write("<font color='red'><b>THIS IS A FRAME ELEMENT : GO TO <a href='[shopcart]index.htm[l]'>Start Page</a> TO LOAD MAIN PAGE</b></font><br>"); }
<!-- end hide --></script>that prints out a
THIS IS A FRAME ELEMENT : GO TO Start Page TO LOAD MAIN PAGE
warning at the top of the page if the user has somehow landed on the isolated welcome.html page outside of the shopcartindex.html frameset. The above snippet appears at or near the beginning of the document body for all of the other frame pages (navigate.html, pageone.html, pagetwo.html, pagethree.html, and order.html) as well.
(The customary formulation for the script's last line would be
// end hide --></script>, and you'd think that the <!-- at the beginning of the line would throw an error, but it doesn't.)For the welcome.html page of the shopcart.zip package, the Start Page warning link points to index.htm and the
frames pageURL in the welcome message is specified as index.html: index is a hangover of Gordon's original shopping cart, whose frameset page had an index.htm file name. For the one-at-a-time welcome.html page (cf. the link in the post's introductory paragraph), both URLs are correctly specified as shopcartindex.html.
The welcome.html body element
<body text="#000000" bgcolor="#ffffff" link="#8000ff" vlink="#ff8000" alink="#ff0000"> ... </body>has five attributes, all of which are deprecated.
(1) The text attribute maps onto the CSS color property.
(2) The bgcolor attribute maps onto the CSS background-color property.
As a means of imparting color to unvisited, visited, and active links:
(3-4) The link and vlink attributes respectively map onto the CSS :link and :visited link pseudo-classes.
(5) The alink attribute maps onto the CSS :active dynamic pseudo-class.
#8000ff is a purplish color; #ff8000 is an orangish color; #ff0000 is of course red. The only link on the welcome.html page is the Start Page warning link, whose
link="#8000ff" color is OK but whose vlink="#ff8000" and alink="#ff0000" colors should be changed given that the link is flanked by red text.Modernize it
The structure, presentation, and behavior of the welcome.html body element and frame warning can be cleanly separated as follows:
body { color: black; background-color: white; }
a:link { color: blue; }
a:visited { color: purple; }
a:active { color: lime; }
#div0 { color: red; font-weight: bold; display: none; }
...window.onload = function ( ) {
if (self == parent) document.getElementById("div0").style.display = "block"; }...
<body>
<div id="div0">This is a frame page: click <a href="shopcartindex.html">here</a> for its frameset.</div> ... </body>
<!-- A p element container for the frame warning would also be semantically acceptable, but either way you should lose the original font element. -->The a:active color setting must be placed after the a:link and a:visited color settings or it will be overwritten by them.
Historical note: At the time Gordon built the shopping cart the current versions of IE and Netscape were IE 4.x and Netscape 4.x, respectively. Interestingly, I find that the preceding code works very nicely with IE 4.5 upon merely changing
document.getElementById("div0").style.display to document.all("div0").style.display, whereas Netscape 4.61 will read but not write a corresponding document.ids["div0"].display expression; moreover, Netscape 4.61 does not support the :active dynamic pseudo-class.Automatic redirect
Alternatively, you don't have to print out a frame warning at all; you can choose to automatically send the user to the shopcartindex.html page:
window.onload = function ( ) { if (self == parent) self.location = "shopcartindex.html"; }navigate.html
The navigate.html page begins with its own meta-statement -
This page is titled navigate.html and will remain the whole way through the process- and subsequently provides links for loading the pageone.html, pagetwo.html, pagethree.html, and order.html pages into the
name="main" right frame of the shopcartindex.html frameset.<p>These are your three order pages:</p>
<p><a href="pageone.html" target="main">Order Page One</a></p>
<p><a href="pagetwo.html" target="main">Order Page Two</a></p>
<p><a href="pagethree.html" target="main">Order Page Three</a></p>
<p>This allows you to check your order. It's the Shopping Cart page.</p>
<p><font color="#ff000"><b>[ <a href="javascript:parent.updatemain_order( );">Review Order</a> ]</p>Clicking the Review Order link calls the updatemain_order( ) function in the shopcartindex.html script element.
function updatemain_order( ) {
parent.frames[1].document.close( );
parent.frames[1].location = "order.html";
parent.frames[1].document.close( ); }Is there any need whatsoever for the updatemain_order( ) function? Nope: the last link's href can be set to order.html à la the other links. Also regarding the last navigate.html line, I suppose I should mention that the font element and the b element both require an end-tag, but we don't really want to be holding onto that markup anyway.
pageone.html intro
We're ready to check out the shopping cart's item pages. Accordingly, we click the Order Page One link on the navigate.html page and load pageone.html into the right frame of the frameset.
The pageone.html document body comprises a form1 form that contains:
(1) a One Item On This Page legend (the price for that one item is not specified);
(2) an push button;
(3) a push button;
(4) a small text field preceded by a You Have Ordered This Many Of This Item: label; and
(5) a Review updated Order Form link that, via the parent.updatemain_order( ) function discussed earlier, loads the order.html page into the right frame.
Markup notes
• The pageone.html body element has a
background="/images/thisback.gif" attribute plus the same five attributes that the welcome.html body element has. Here's the thisback.gif image if you want to make use of it.• The form1 form element's end-tag is missing; the form element requires an end-tag.
• The form1 form's contents are centered via three center elements, which can and should be replaced by a single
style="text-align:center;" div wrapper.Clicking the button adds the Page_1_item_1 item to the shopping cart: we'll crunch through the details of this process in the following entry.
- posted by A. Peak @ 6:06 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)