reptile7's JavaScript blog
Wednesday, September 11, 2013
 
Thanks for Doing Business with Us
Blog Entry #302

Our long and winding discourse on the "So, You Want A Shopping Cart, Huh?" tutorial's e-commerce shopping cart concludes with today's post. Our final topic will be the shopping cart's thanku.htm page; a demo will follow.

Post-submission

The "Shopping Cart" tutorial's shopcart.zip package includes a thanku.htm file that, via an

<input type="hidden" name="redirect" value="thanku.htm">

hidden control in the order.html source, is served to the user by the formmail.pl PERL script after the order form has been submitted. The one-at-a-time shopping cart pages offered by the tutorial's The Pages section include neither the thanku.htm document nor the formmail.pl script.

The thanku.htm page displays
(a) a thank-you message and
(b) a table recapping the user's order if the user has ordered anything.
If the user enters a comment or question into the comments textarea box at the order.html page and submits the order form without ordering anything, then s/he'll just see the thank-you message.

Order duly noted

The thank-you message is coded via the HTML below:

<center><table border="0" cellpadding="0" width="100%">
<tr><td colspan="2">
<p align="center"><font size="5"><b>: </b></font><font color="#0000ff" size="5"><b>Thank You</b></font></p>
</td></tr>
<tr><td align="center" colspan="2">
<b><i>We should like to thank you for your order or enquiry and please be assured it will be dealt with promptly.</i></b>
</td></tr></table></center>

Ugh, more dysfunctional table-based layout; as I'm sure Willie Nelson would agree, Mammas, don't let your babies grow up to use HTML editors. Here's how we should code the message:

#thanksPara1 { text-align: center; font-size: 24px; font-weight: bold; color: blue; }
#thanksPara2 { text-align: center; font-weight: bold; font-style: italic; }
...
<p id="thanksPara1">Thank You</p>
<p id="thanksPara2">We should like to thank you for your order or enquiry and please be assured it will be dealt with promptly.</p>
<!-- No, there is no need to precede the Thank You with a colon. -->

Order on the page, revisited

A user goes to the pagetwo.html page and adds, in order, one p2i3 ($4.44) item, one p2i2 ($3.33) item, and one p2i1 ($2.22) item to the shopping cart. The user proceeds to the order.html page, fills out the Customer Information / Details and Shipping Address tables, and submits the order form. At the thanku.htm page, the thanksPara2 paragraph is followed by the following table:

A thanku.htm order table and its captions

The aforedetailed center element's nextSibling is a p element containing a script that writes out the table, the pre-table caption, and the post-table caption:

<p align="center"><br>
<script type="text/javascript"><!-- hide
if (self == parent) { document.write("<font color='red'><b><a href='shopcartindex.html'>Start Page</a></b></font>"); }
else {
    if (parent.all_order_totals( ) > 0) {
        var index = 0; // No use is made of index; throw its statements out.
        document.write("Items Ordered");
        for (i = 1; i < parent.item_num; i++) {
            if (parent.itemlist[i].quan > 0) {
                index = index + 1;
                if (i == 1) {
                    document.write("<table border='1'><td>Item<br>Code</td><td>Item<br>Price</td><td>Item Description</td><td>Quantity Ordered</td><tr>"); }
                document.write("<td>" + parent.itemlist[i].code + "</td><td>" + parent.itemlist[i].price + "</td><td>"
                + parent.itemlist[i].desc + "</td><td align='center'>" + parent.itemlist[i].quan + "</td><tr>"); } }
        document.write("</table>");
        document.write("Your Total order Value was : $" + format(parent.all_order_totals( ), 2)); ... } }

You may recall that when we printed this stuff out on the order.html page, we didn't use a table, specifically, we loaded the order data into text boxes and separated the rows with <br>s: perhaps that was necessary in order to submit the data along with the rest of the order form, but a real <table> with real rows and cells is definitely a better way to go here.

The script has a design flaw in that the table element's start-tag and the table's first row are not written to the page if parent.itemlist[1].quan is 0, as would be true if the user had subtracted the p2i3 item from the shopping cart prior to submitting the order form; in this case, the table output for our example would be:

Items Orderedp2i23.33 Page_2_Item_2 1p2i12.22 Page_2_Item_1 1Your Total order Value was : $5.55

This problem can be solved by placing the document.write("<table border='1'>..."); command outside and before the for loop.

The first row's cells should be marked up as <th>s* as they are all header cells. The line breaks in the Item Code and Item Price headers give the left side of the table a scrunched feel; the table looks much more balanced upon subtracting those line breaks and then inserting a corresponding line break in the Quantity Ordered header, i.e., <th>Quantity<br>Ordered</th>.

*The th element typically bolds its content; you can unbold the headers with a th { font-weight: normal; } style rule.

The outer p element and its align="center" attribute are there to horizontally center the table and its captions. However, the p element has an (%inline;)* content model and consequently should not contain a table element**; moreover, the align attribute of the p element is now deprecated. To horizontally center this content today, we should
(1) throw out the p container and give the table a margin-left:auto;margin-right:auto; styling (at least on the Mac platform, this method of centering is supported by neither IE 4.x nor Netscape 4.x), and then
(2) mark up the Items Ordered text as a <caption>, which will automatically center it vis-à-vis the left and right edges of the table, and lastly
(3) put the post-table caption in a separate text-align:center;-ed p element.

**Technically, Gordon's code is not invalid: script element content is classified as CDATA and the script element is itself an %inline; element. We might say that the table-in-a-paragraph structure violates the spirit but not the letter of the DTD.

The user's order total in the post-table caption is processed by the same format( ) function we encountered in our discussion of the order.html page; a local copy of the format( ) function is held by a script element placed between the thanku.htm head and body (in violation of the content model of the html element). The format( ) functionality can again be replaced by a corresponding numberObject.toFixed( ) command, i.e.:

#totalPara { text-align: center; }
...
document.write("<p id='totalPara'>Your order total is : $" + parent.all_order_totals( ).toFixed(2) + "</p>");

Would you like some cookies?

Interestingly, the if (parent.all_order_totals( ) > 0) { ... } clause concludes with a

document.write("<p>If you would like to maintain your order address details (Not your credit card Details), for future visits to this site please do so <a href='javascript:go_with_cookie( );'>here.</a>");

command that writes out a

If you would like to maintain your order address details (Not your credit card Details), for future visits to this site please do so here.

paragraph ending with a link that when clicked calls the go_with_cookie( ) function, a local copy of which sits in the aforementioned </head> ... <body> script element, and thereby sets the set-cookies part of the cart's cookie machinery in motion. How 'bout that: Gordon actually gives the user the option of setting or not setting cookies for the Customer Information / Details data on the order.html page - what a guy, huh?

Mind you, the user may want to be 'remembered' even if nothing was ordered; for this reason the paragraph should be placed outside and after the script element.

As noted in the Other code possibilities section of Blog Entry #298, it is not necessary to call the go_with_cookie( ) function and then the setCookieArray( ) function and then the setCookie( ) function to set cookies for the customer/shipping parts of the order form; a single function will do:

function setCookies( ) {
    for (i = 0; i < parent.textInputValues.length; i++)
        document.cookie = "gifttails" + i + "=" + encodeURIComponent(parent.textInputValues[i]) + "; expires=" + parent.expdate.toUTCString( ) + "; path=/"; }
/* Although the textInputValues array is stocked with field values at the order.html page, its constructor statement should be placed in the [shopcart]index.html source. */

When self and parent are equal

The thanku.htm page is meant to replace the order.html page within the frameset as opposed to the frameset page itself. If the thanku.htm page is accessed outside of the frameset:
(1) The thanku.htm body begins with the THIS IS A FRAME ELEMENT : GO TO Start Page TO LOAD MAIN PAGE message discussed in the welcome.html section of Blog Entry #288.
(2) The Order on the page script's if (self == parent) { ... } clause prints out a separate Start Page link that points to the frameset page.
Do we need both (1) and (2)? Nah - I'd ditch the latter.

Demo (Revised March 2017)

The div below holds a demo for the shopping cart whose structure corresponds to but differs somewhat from that described by the Frame retool section of Blog Entry #299, specifically, I've recast the orderIframe iframe as a display:inline-block; orderDiv div whose content is changed via a document.getElementById("orderDiv").innerHTML = document.getElementById(newDiv).innerHTML; operation.

All of the demo's JavaScript is in the source of the current page; the demo's order functionality is based on the JavaScript changes detailed in Blog Entry #300.

The Order Page One, Order Page Two, and Order Page Three item pages sport buttons that when clicked display small clip art images in a pictureDiv placeholder per the Show me the goods section of Blog Entry #301.

If you go to the Order Form page and fill out the Customer Information / Details and Shipping Address tables and then click the button, your data won't be sent to me but you will be taken to a Thank You page that leverages the code presented in this entry; of course, you'll have to add items to your shopping cart in order to see the Items Ordered table.

Clicking the here link at the end of the Thank You page will set cookies based on your Order Form inputs on your hard disk.

Like Joe's demo, my demo does not feature a Credit Card Info table on the Order Form page; however, I trust you are up to the task of merging my credit card validation demo with the rest of the Order Form source.

This page (well, the file name of its corresponding document) is titled welcome.html.

It contains no shopping cart functions. It simply acts as your welcoming page.

The source of the parent div contains the majority of the shopping cart commands.

Not previously mentioned:
From 1999 to 2005 Gordon offered for download a second-generation version of the shopping cart: we're not going to discuss it but you can view it and interact with it here.

We'll talk about what we're doing next in the following entry.
- posted by A. Peak @ 3:59 PM
Comments:
Great blog here! Also your web site loads up very fast!
What host are you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lol

My web-site; insecure server hosting
# posted by Anonymous Anonymous : 12:23 PM
 
Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)