reptile7's JavaScript blog: Order in the Cart

Saturday, June 08, 2013

Order in the Cart
Blog Entry #291

In today's post we will begin discussing the order.html page of the e-commerce shopping cart offered by HTML Goodies' "So, You Want A Shopping Cart, Huh?" tutorial. A check of the original Scottish Gifts order.htm page source reveals that Gordon had some help in writing it:
(1) Gordon wrote the page's HTML with the Microsoft FrontPage 2.0 HTML editor;
(2) some of the page's JavaScript was written by Tauren Mills of Groovee Creatives, which is now Groovee Corporation.

Structural overview

The order.html page is based on a set of eight tables that in one way or another relate to the ordering process. None of the tables has an identifier (FYI, both Netscape 4.x and IE 4.x support the id attribute but not the name attribute for the table element) so I will refer to the tables in source order as tables[0], tables[1], tables[2], ... as though we had gotten them via a var tables = document.getElementsByTagName("table"); operation. Intertwined with the order.html tables is a name="order" form whose fields store information for the ordering process.

(0) The tables[0] table frames the Please wait while the scripted order form is generated....... message near the top of the page.

(1) The tables[1] table serves as a container for the tables described below. The order form's submit button and reset button at the bottom of the page lie within the tables[1] table.

(2) The tables[2] table displays the running total ($) for the items that have been added to the shopping cart.

(3) The tables[3] table provides a textarea field for comments and any other information that should be conveyed to the shopping cart proprietor.

(4) The tables[4] table provides text fields for the user's contact information.

(5) The tables[5] table provides text fields for the recipient's contact information if it differs from the user's contact information.

(6) The tables[6] table frames a
Phone Call:
radio button that when checked signals that the user intends to order over the phone.

(7) The tables[7] table frames a brief note on international shipping.

order.html/order.htm table differences

• At the order.htm page the Phone Call: control is part of a larger Choose Order Method menu that also includes On-line / Credit Card: and Cheque: options; the menu is followed by a link to a "Payment Methods" page.

• The order.htm page sports a Credit Card Info table that was removed for the order.html page: Joe explains his reason for doing so in the tutorial's A Word of Warning section.

• Gordon wrapped the post-tables[2] tables in a second container table, which Joe also removed.

Other table notes

The tables of the shopcart.zip order.html page are given a width of 400 whereas the tables of the one-at-a-time order.html page (linked at the top of the post) are given a width of 340; I encourage you to use the former width as the latter tables look a bit scrunched.

Some of the tables have headings that could be marked up with the caption element, which is supported by both Netscape 4.x and IE 4.x. (Netscape's HTML Guide for Netscape Navigator 4.x is no longer hosted by Mozilla but, courtesy of the Internet Archive, can still be viewed here. To the best of my knowledge, Microsoft's early Web development materials are not on the Web.)

The tables[1] container table and the content discussed in the next section are horizontally centered by a center element child of the order.html body element.

Pre-tables[1]

Preceding the tables[1] table are three metainformation-type elements.

(1) At the top of the page is a large, red, and italicized This is the Order Form heading.

This is the Order Form 

Clearly, the heading should be marked up as an h1 element:

h1 { color: red; font-size: 48px; font-style: italic; }

...

<h1>This is the Order Form</h1>

The default font size for h1 text is 32px; as specified above, the size="7" font element attribute maps onto a font-size:48px; style declaration.

(2) Next we have the aforementioned tables[0] Please wait while the scripted order form is generated....... message:

<table border="0" width="400"><tr><td align="center" bgcolor="#ff0000">

<font color="#ffffff"><b>Please wait while the scripted order form is generated....... </b></font>

</td></tr></table>

Methinks the message really belongs on an alert( ) box, but if you're going to have it on the page, then it would be semantically more appropriate to put it in a div element:

#waitDiv { width: 400px; text-align: center; background-color: red; color: white; font-weight: bold; }

...

<div id="waitDiv">Please wait while the scripted order form is generated.......</div>

(3) Lastly we have a paragraph containing another "Order Form" heading followed by a sentence giving an email contact and a phone contact in case the user experience goes sour:

<p><font size="6">Order Form</font><br>

<!-- HEY!!!  PUT YOUR EMAIL ADDRESS IN THE LINK BELOW SO THEY CAN WRITE TO YOU -->

<b>In the event of difficulty with this script please email us direct on <a href="mailto:YOUR EMAIL HERE>Email@server.com"</a> or call us on (+44) 01569 763153</b></p>

I myself would throw out the Order Form heading - the size="6" font element attribute maps onto a font-size:32px; style declaration if you want to hold onto it - a font-weight:bold; declaration (vis-à-vis the b element) can be used to bold the remaining text.

The tables[1] table

The tables[1] table contains a single row with a single cell that holds the tables[2]-tables[7] tables, as intimated earlier. Strangely, the tables[1] table and td element start-tags are written scriptically whereas the corresponding end-tags are written as normal markup:

<script language="javascript"><!-- hide from Browsers

document.write("<table width='400'><td align='center'>"); 

...

</script>

...

</td></table></center></body></html>

Moreover, the tables[1] row markup is missing; the HTML tr element requires a start-tag (its end-tag is optional).

In addition to the order form's submit and reset buttons (vide supra), the tables[1] cell contains a small amount of non-table content situated between the tables[2] and tables[3] tables; this content is horizontally centered by the cell's align='center' attribute. The align='center' attribute would also horizontally center the tables[2]-tables[7] tables if the width of the tables[1] table were larger than that of the tables[2]-tables[7] tables. However, all of the tables[1] cell content would still be horizontally centered by the aforenoted <body><center> element in the absence of the tables[1] table, which is consequently excess baggage and can be thrown out.

The tables[2] table

The above tables[1] document.write( ) command is followed by two document.write( ) commands that write out the tables[2] table.

document.write("<table width='400'><tr><tr><td align='right' colspan='3' bgcolor='#ff9999'><font size='+2'>Running Total : $ </td><td colspan='3' bgcolor='#ff9999'> <input type='text' name='total' size='6' value=" + format(parent.all_order_totals( ), 2) + "></font></td><tr>");



document.write("<td colspan='6' align='center'><b>This is your Order Total so far<br><i>(Including Shipping Worldwide)</i>.</td></tr><tr></table>");

Technically, the tables[2] table contains four rows, but the first and fourth rows are empty (their innerHTML returns are an empty string, their firstChild returns are null). The table's second row contains two cells: the first cell holds a large Running Order : $ label and the second cell holds a name='total' text field that displays the user's order total. The table's third row contains one cell that holds a formatted This is your Order Total so far (Including Shipping Worldwide) message.

The second-row cells' colspan='3' attribute serves no purpose and should be removed; subsequently the third-row cell's colspan attribute should be set to 2. (BTW, the content widths of the first and second cells of the second row are 291px and 103px, respectively. How does the browser determine these widths? Your guess is as good as mine.)

The second-row cells' #ff9999 background color has a nonstandard-but-recognized name: it's called "light salmon pink".

Note that the second-row font element is improperly nested. If the browser's default font size is 16px, then the size='+2' font element attribute will give the Running Order : $ label a font size of 24px; the size='+2' attribute has no effect on the font size of the value of the total field.

The (required) end-tag of the third-row b element is missing; as a result, the b element bolds all of the third-row message, which is probably what Gordon wanted but I don't know for sure.

To generate the user's order total, the total field calls on the shopcartindex.html all_order_totals( ) function and then the order.html format( ) function: we'll go through these functions in the following entry.
- posted by A. Peak @ 3:57 PM

Comments:

Use subject matter to get libertine lookup
engine indexing are but some of the canonical steps to start with but,
what close to hosting? justhost So what does it take users' reviews and experts' comments on the functionality of assorted hosting groups.

Feel free to surf to my web page :: justhost

# posted by

Anonymous : 10:02 PM

About Me