At this point we have enough information to build a navigable online shop, assuming that we have a list of CDs, records and tapes to sell.
The site will be built using frames, because we are going to use JavaScript to store a list of items the customer has ordered. If it was done with separate pages, you would lose this information every time the user navigated to a different page, unless cookies were used to store this data. The problem with doing this is that you end up with a lot of duplicated code in each page for loading and saving cookies.
The screen will be split into two distinct areas. The smaller area will allow the user to select product type and category, and to view a list of items. The larger area will be for display of the individual items themselves. More or less, it will look something like this:
| [Product Type] |
[Item Name] [Item Price] [Item Picture] [Item Description] |
| [Category] | |
|
- Item 1 - Item 2 - Item 3 - Item 4 - Item 5 |
Looking at this, we need several HTML documents:
index.html: This will include JavaScript code for storing a list of items ordered, and will define the left hand (navigation) and right hand (content) frames.
main.html: This will include the initial content of the content frame, something along the lines of "Welcome to FOMS".
navframe.html: This will define the three frames (product type, category and item list) in the navigation frame.
product.html: This will include a drop down list where the user can select the desired product type.
cat-cd.html, cat-record.html, cat-tape.html: These three files will include drop down lists for all of the categories in each product type.
item-initial.html: This will include the initial contents of the item list frame, which is to say nothing.
item-cd-blues.html, item-cd-techno.html, ..., item-record-classical.html, ...: These files will contain a list of items available in each category for each product type.
item-0001.html, item-0002.html, ..., item-0983.html, ...: These files will contain the actual item name, description and picture for each item.
If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome.
