Checkout and Purchase

One of the most important parts of an online shopping cart is the purchase page. After all, without out this page, all the other parts would be pointless. The checkout and purchase part of an online store lists the items in the cart along with their prices and gives a running total of the cost at the end of the list. I'm sure you're familiar with this type of Web page, so let's start off with a complete working example:

<html>
   <head> 
     <title>Center Park - Store Checkout</title>

     <script language="JavaScript"> 
     <!--
          var total = 0;

          function getCookieValue( name ) 
          {
            var c = document.cookie; 
            var begin = c.indexOf( name ); 
            if( begin < 0 ) return( "" ); 
            begin += name.length + 1; 
            var end = c.indexOf( ";", begin ); 
            if( end == -1 ) end = c.length; 
            return( c.slice( begin, end ) );
          }

          function getItemName( item ) 
          {
             var c = getCookieValue( item ); 
             if( c )
             {
                return( c.split( "," )[0] ); 
             }
             else return( "" ); 
           }

           function getItemPrice( item ) 
           { 
             var c = getCookieValue( item ); 
             if( c )
             {
                return( c.split( "," )[1] );
             }
             else return( "" );

             }

             function fixTotal( n ) 
             {
                n *= 100; 
                var good = parseInt( n ); 
                while( good < n ) good += 1; 
                return( good / 100 );
             }
           // -->
         </script> 
      </head>

<body>
   <b><font size="6">Center Park School Store -</font></b> 
   <font size="4">for all your school paraphernalia needs</font><br><br>

   <form>
     <table width="100%" border="2">
       <script language="JavaScript"> 
       <!--
            for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ ) 
            {
              if( getItemName( "item" + i ) != "" &&  
                  getItemPrice( "item" + i ) != undefined ) 
              {
                 document.write( "<tr><td>" ); 
                 document.write( getItemName( "item" + i ) + "</td><td>" ); 
                 document.write( getItemPrice( "item" + i ) ); 
                 document.write( "</td></tr>" );

                 total += parseFloat( getItemPrice( "item" + i ) );
              }
           }
         // -->
      </script> 
      <tr>

          <td><b>Total</b></td>

          <td>$ 
            <script language="JavaScript"> 
            <!--
                 document.write( fixTotal( total ) ); 
            -->
            </script> 
           &nbsp;</td> 
        </tr> 
      </table> 
    </form>
  </body>

</html>

Most of this example should be familiar to you by now. Two functions, getItemName() and getItemPrice(),

      function getItemName( item )
      {
        var c = getCookieValue( item ); 
        if( c ) 
        {
          return( c.split( "," )[0] );       
        }
        else return( "" ); 
      }

      function getItemPrice( item )  
      { 

        var c = getCookieValue( item ); 
        if( c )
       { 
         return( c.split( "," )[1] );
       }
       else return( "" );
       }

retrieve the individual item information from the cookie file and place them in a table with the use of a for loop.

<script language="JavaScript">
       <!--
            for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ ) 
            {
               if( getItemName( "item" + i ) != "" &&  
                   getItemPrice( "item" + i ) != undefined ) 
             {
                 document.write( "<tr><td>" ); 
                 document.write( getItemName( "item" + i ) + "</td><td>" ); 
                 document.write( getItemPrice( "item" + i ) ); 
                 document.write( "</td></tr>" );  
                

                 total += parseFloat( getItemPrice( "item" + i ) );
              }
           }
        // -->
     </script>

The very last row of the table contains the running total of item prices, which was calculated as they were being displayed with the following statement:

total += parseFloat( getItemPrice( "item" + i ) );

The variable total was declared in the head of the page and set to zero. After every item in the cart has been displayed, the value of the total is displayed at the end of the table, like so:

<tr>
      <td><b>Total</b></td>
        <td>$
      <script language="JavaScript">
           <!--
                document.write( fixTotal( total ) ); 
            -->
           </script> 
         &nbsp;</td> 
      </tr> 
 </table>

One thing that should be included on this page, but was omitted because it is outside the scope of this example, is a form for the shopper to fill in their shipping and billing address (including a form validating function). For a complete and working example, please refer to Chapter 8.