The Shopping Cart Form You now know enough of XHTML-FML to create a contact information form, so it's time to move to more complex markup. You can take some of what you've learned so far to create an interactive, generic shopping cart complete with on-the-fly calculations, images, and cross-layer navigation – all with FML.

Start with a single product You're about to start a completely new segment of your e-commerce order form so you should save your contact information form (contactform.xhtml) and open a new file. Save this new file and call it

shoppingcart.xhtml. The first step is to set up a toggled <x:pulldown> menu with several <x:option> elements having numerical values of 0–6. The eighth <x:option> element should utilize the same onclick event handler as the preceding editable list used more as the option content (not value). The <x:textinput> element should strictly validate for a numerical value and should utilize the same onchange event handler as the previous editable list. Finally, you need to add the item the person is purchasing along with a brief description about it. This is your initial source code inside the body of a new XHTML-FML document:

   <x:form>
   <p>&nbsp;</p>
   <table  bgcolor="lightblue" style="border-color:blue"  border="2">
   <tr>
   <td colspan="2"  align="center">Key</td>
   </tr>
   <tr>
   <th>Dollars</th><th>Coins</th>
   </tr>
   <tr>
   <td>$.10</td><td>Copper  Pieces (CP)</td>
   </tr>
   <tr>
   <td>$1</td><td>Silver  Pieces (SP)</td>
   </tr>
   <tr>
   <td>$10</td><td>Gold  Pieces (GP)</td>
   </tr>
   <tr>
   <td>$100</td><td>Platinum  Pieces (PP)</td>
   </tr>
   </table>
   <p>&nbsp;</p>
   <table style="border-color:blue"  border="2" bgcolor="lightblue" cellpadding="10"  width="85%"
   align="center">
   <tr>
   <td>
   Fiery Avenger
   </td>
   <td>
   A powerful magic sword, <br /> the blade  is a red-hot flame
   </td>
   <td>
   <x:toggle id="editamount"  shared="yes">
   <x:pulldown id="amount"  send="yes">
   <x:option  value="0">0</x:option>
   <x:option  value="1">1</x:option>
   <x:option  value="2">2</x:option>
   <x:option  value="3">3</x:option>
   <x:option  value="4">4</x:option>
   <x:option  value="5">5</x:option>
   <x:option value="6"  onclick="toggle:editamount">More</x:option>
   </x:pulldown>
   <x:textinput size="5"  id="more" onchange="toggle:editamount"  ctype="num" validation="strict" />
   </x:toggle>
   </td>
   </tr>
   </table>
 </x:form>

Now that you have your product and the ability to choose an amount, you need to set a price and something to calculate a total. Enter two new elements: <x:textoutput> and <x:calc>. You use <x:textoutput> to set the price. It's a static amount, so there is no need for a user to modify it. Next you insert the <x:calc> element to add up the sum of the price and the amount. Note that <x:calc> does not actually output anything directly to the browser per se. The second <x:textoutput> wrapped by the <x:calc> inherits the value of total and prints it.

   <td>
   <x:textoutput id="price"  value="10000" send="yes" /> PP
   </td>
   <td>
   <x:calc id="total"  term="amount * price" send="yes">
   <x:textoutput />
   </x:calc> PP
   </td>
   Let's add a new item with a  different price appearance:
   <tr>
   <td>
   Honey Mead
   </td>
   <td>
   Made with the best Royal Jelly<br />
   (Wasp Honey)
   </td>
   <td>
   <x:toggle id="edit2amount"  shared="yes">
   <x:pulldown id="amount2"  send="yes">
   <x:option  value="0">0</x:option>
   <x:option  value="1">1</x:option>
   <x:option  value="2">2</x:option>
   <x:option  value="3">3</x:option>
   <x:option  value="4">4</x:option>
   <x:option  value="5">5</x:option>
   <x:option value="more"  onclick="toggle:edit2amount">More</x:option>
   </x:pulldown>
   <x:textinput size="5"  id="more2" onchange="toggle:edit2amount"  ctype="num" validation="strict" />
   </x:toggle>
   </td>
   <td>
   <x:textoutput id="price2"  value="1.60" send="yes" /> SP
   </td>
   <td>
   <x:calc id="total2"  term="amount2 * price2" send="yes">
   <x:textoutput />
   </x:calc> SP
   </td>
 </tr>

Notice how even though this mead costs 1 Silver Piece and 6 Copper Pieces, it keeps rounding up to a whole number. You easily can fix this problem by adding the digits element to the <x:calc> element.

   <x:calc id="total2"  term="amount2 * price2" send="yes" digits="2">

Giving a value of 2 to the digits element tells Mozquito to round up based on the first two digits after the decimal point. In order to show the example of decimal point rounding, you add a second product. You may not have noticed that the source code has nearly doubled in length from 80 to 112 lines. If you cut-and-paste, you may also miss the fact that not only do you have to change most of the values, but each id must be different as well. Annoying, isn't it? Think of how tedious it is if you have to add 100 items or more. Thankfully, there's a new element to come to the rescue called <x:template>. You simply define the entire table row as part of a template and then use the <x:insert> element any time you want to make use of your template – a much easier process than the original solution. First, you need to remove the table from the <x:form> element, place it inside <x:template>, and give the template element an id value of item. (Don't forget to add the </x:template> after the table closes.)

   <x:template id="item">
   (Item Table)
 </x:template>

Next, back in the <x:form> element, you add the <x:insert> . Each instance of this element gets its own id value and references the template with an attribute:

   <x:form>
   (Monetary Key Table)
   <x:insert id="eq1"  template="item">
   <x:insert id="eq2"  template="item">
 </x:form>

Here's what your FML looks like with it all put together. Note that you've temporarily removed the second item table altogether.

   <?xml version="1.0"?>
   <!DOCTYPE html PUBLIC  "-//OVERFLOW//DTD XHTML-FML 1.0//EN"
   "http://www.mozquito.org/dtd/xhtml-fml1.dtd">
   <html  xmlns="http://www.w3.org/1999/xhtml" xmlns:x="http://www.mozquito.org/xhtml-fml">
   <head>
   <title>Untitled</title>
   <meta name="generator"  content="Mozquito Factory 1.2" />
   </head>
   <body>
   <x:template id="item">
   <table style="border-color:blue"  border="2" bgcolor="lightblue" cellpadding="10"  width="85%"
   align="center">
   <tr>
   <td>
   Fiery Avenger
   </td>
   <td>
   A powerful magic sword, <br /> the blade  is a red-hot flame
   </td>
   <td>
   <x:toggle id="editamount"  shared="yes">
   <x:pulldown id="amount"  send="yes">
   <x:option  value="0">0</x:option>
   <x:option value="1">1</x:option>
   <x:option  value="2">2</x:option>
   <x:option  value="3">3</x:option>
   <x:option  value="4">4</x:option>
   <x:option  value="5">5</x:option>
   <x:option value="6"  onclick="toggle:editamount">More</x:option>
   </x:pulldown>
   <x:textinput size="5"  id="more" onchange="toggle:editamount"  ctype="num" validation="strict" />
   </x:toggle>
   </td>
   <td>
   <x:textoutput id="price"  value="10000" send="yes" /> PP
   </td>
   <td>
   <x:calc id="total"  term="amount * price" send="yes">
   <x:textoutput />
   </x:calc> PP
   </td>
   </tr>
   </table>
   </x:template>
   <x:form>
   <p>&nbsp;</p>
   <table bgcolor="lightblue"  style="border-color:blue" border="2">
   <tr>
   <td colspan="2"  align="center">Key</td>
   </tr>
   <tr>
   <th>Dollars</th><th>Coins</th>
   </tr>
   <tr>
   <td>$1</td><td>Copper Pieces  (CP)</td>
   </tr>
   <tr>
   <td>$10</td><td>Silver Pieces  (SP)</td>
   </tr>
   <tr>
   <td>$100</td><td>Gold Pieces  (GP)</td>
   </tr>
   <tr>
   <td>$1000</td><td>Platinum  Pieces (PP)</td>
   </tr>
   </table>
   <p>&nbsp;</p>
   <x:insert id="eq1"  template="item" />
   <x:insert id="eq2"  template="item" />
   </x:form>
   </body>
 </html>

This is great because instead of duplicating the huge table, you add only four new lines of code. But something's still missing. In order to make use of the template, you have to dump the table containing the Honey Mead item. How can you get that back in there while still making use of the code-reducing template element? Simple. You use the <x:prop> element. Every time you use the <x:insert> element, you can have a series of <x:prop> elements that feed the template the different data for each new item. In the template, replace the item property mentions with id values surrounded by pipe symbols (|). For example:

 <x:textoutput id="price"  value="10000" send="yes" /> PP

changes to

   <x:textoutput id="price"  value="|cost|" send="yes" /> PP

Under the <x:insert> element, add the price variables:

   <x:insert id="eq1"  template="item">
   <x:prop  name="cost">10000</x:prop>
   </x:insert>
   <x:insert id="eq2"  template="item">
   <x:prop  name="cost">1.60</x:prop>
 </x:insert>

Once you add in all the other fields and data, here's what the full FML form looks like:

   <x:template id="item">
   <table style="border-color:blue"  border="2" bgcolor="lightblue" cellpadding="10"  width="85%"
   align="center">
   <tr>
   <td>
   |item|
   </td>
   <td>
   |description|
   </td>
   <td>
   <x:toggle id="editamount" shared="yes">
   <x:pulldown id="amount"  send="yes">
   <x:option  value="0">0</x:option>
   <x:option  value="1">1</x:option>
   <x:option  value="2">2</x:option>
   <x:option  value="3">3</x:option>
   <x:option  value="4">4</x:option>
   <x:option  value="5">5</x:option>
   <x:option value="6"  onclick="toggle:editamount">More</x:option>
   </x:pulldown>
   <x:textinput size="5"  id="more" onchange="toggle:editamount"  ctype="num" validation="strict" />
   </x:toggle>
   </td>
   <td>
   <x:textoutput id="price"  value="|cost|" send="yes" /> PP
   </td>
   <td>
   <x:calc id="total"  term="amount * price" send="yes" digits="2">
   <x:textoutput />
   </x:calc> PP
   </td>
   </tr>
   </table>
   </x:template>
   <x:form>
   <p>&nbsp;</p>
   <table bgcolor="lightblue"  style="border-color:blue" border="2">
   <tr>
   <td colspan="2"  align="center">Key</td>
   </tr>
   <tr>
   <th>Dollars</th><th>Coins</th>
   </tr>
   <tr>
   <td>$1</td><td>Copper Pieces  (CP)</td>
   </tr>
   <tr>
   <td>$10</td><td>Silver Pieces  (SP)</td>
   </tr>
   <tr>
   <td>$100</td><td>Gold Pieces  (GP)</td>
   </tr>
   <tr>
   <td>$1000</td><td>Platinum  Pieces (PP)</td>
   </tr>
   </table>
   <p>&nbsp;</p>
   <x:insert id="eq1"  template="item">
   <x:prop  name="cost">10000.00</x:prop>
   <x:prop name="item">Fiery  Avenger</x:prop>
   <x:prop name="description">A  powerful magic sword with a burning flame for a blade</x:prop>
   </x:insert>
   <x:insert id="eq2"  template="item">
   <x:prop  name="cost">1.60</x:prop>
   <x:prop name="item">Honey  Mead</x:prop>
   <x:prop name="description">Made  with the best Royal Jelly (Wasp Honey)</x:prop>
   </x:insert>
 </x:form>

This is great, but it's still missing something. It would be convenient if you could also set up a running grand total of what you've purchased so far. This is quite simple. After the group of <x:insert> elements, set up another <x:calc> equation. This time, add the values of the total for each <x:insert> element:

   Total:
 <x:calc id="grandtotal"  term="eq1.total + eq2.total" digits="2">
 <x:textoutput />
 </x:calc>

Be sure to wrap your table around it:

   <table style="border-color:blue"  border="2" bgcolor="lightblue" cellpadding="10"  width="85%"
   align="center">
   <tr>
   <td colspan="5">
   <strong>Total:
   <x:calc id="grandtotal"  term="eq1.total + eq2.total" digits="2">
   <x:textoutput />
   </x:calc>
   </strong>
   </td>
   </tr>
   </table>
 

Layers Earlier I mentioned the convenience of templates, inserts, and props if you have a huge database of items that you want to add to your form. Even if you have only a few, it's still a convenient way to get the job done. Along the same lines, why list all your items on one page? You can take advantage of the <x:toggle> element that you've already used for editable lists to create multiple pages within one FML document. To do this, place an <x:toggle> element with an id attribute value of navigate just above your first <x:insert> element and below the <x:form> element. Place the corresponding </x:toggle> under the last </x:insert> element.

   <x:toggle  id="navigate">
   <x:insert id="eq1"  template="item">
   <x:prop  name="item">Fiery Avenger</x:prop>
   <x:prop  name="description">A powerful magic sword with a burning flame for  a blade</x:prop>
   <x:prop name="cost">10000.00</x:prop>
   </x:insert>
   <x:insert id="eq2"  template="item">
   <x:prop  name="item">Honey Mead</x:prop>
   <x:prop  name="description">Made with the best Royal Jelly (Wasp  Honey)</x:prop>
   <x:prop  name="cost">1.60</x:prop>
   </x:insert>
 </x:toggle>

Underneath the "grand total" table, place two <x:button> elements using the event handler onclick as follows:

   <x:button value="Back"  onclick="toggle:navigate,-" />
   <x:button value="Forward"  onclick="toggle:navigate,+" />

After you make these changes and additions, save your file and push it through to your browser.

Cleaning up Now that you've covered most of FML, you can finalize the shopping cart portion of your e-commerce order form by adding some images. Using the <x:prop> element, you can preload images for each item. As an example, modify the location of the |item| variable and add a new element <x:img>:

   <td>
   |item|
   </td>
   to
   <td>
   |item| &nbsp;<br  /><x:img src="|image|" alt="|item|"  width="50" height="50" preload="yes" />
 </td>

Note the reuse of the |item| variable for the value of the alt attribute. Also, for <x:img> elements, it is a requirement to set the width and height. In order to prevent long load times as you move from item to item, add an attribute preload set to the value of yes. This loads all the <x:prop>-set images at once. Don't forget to add a <x:prop> element for |image|:

   <x:toggle id="navigate">
   <x:insert id="eq1"  template="item">
   <x:prop  name="cost">10000.00</x:prop>
   <x:prop name="item">Fiery  Avenger</x:prop>
   <x:prop name="description">A  powerful magic sword with a burning flame for a blade</x:prop>
   <x:prop  name="image">http://www.eqmaps.com/itemicons/2hslash003.jpg</x:prop>
   </x:insert>
   <x:insert id="eq2"  template="item">
   <x:prop  name="cost">1.60</x:prop>
   <x:prop name="item">Honey  Mead</x:prop>
   <x:prop name="description">Made  with the best Royal Jelly (Wasp Honey)</x:prop>
   <x:prop  name="image">http://www.eqmaps.com/itemicons/potion001.jpg</x:prop>
   </x:insert>
   </x:toggle>