You only need two files to modify the shopping cart, csscart.html and cssstyle.html. Right click on these links and select 'Save link as..' to save them to your own disk and from there you will be able to modify the files and see the effect immediately.
We start off with a fully functional shopping cart with no design.
We identify the various parts that make up the functionality.
We define a series of CSS states which determine what gets displayed when.
We style a set of classes to determine what is highlighted when.
We apply the final styling, again through CSS
Try it yourself, no server or website required.
The source of the iframe is a single page, cart.html.
It is a fully functional shopping cart using AJAX to talk to a database server.
In each step the only change we will make will be to apply a different stylesheet to this file.
Firstly, let's see what logical parts this cart is made of.
Each of the links below provide a description of the parts.
Selecting one of the links will also highlight the part in question in the iframe (you might have to scroll to see it).
Being an AJAX application it might take a few moments for the cart to load. This is the div that is displayed during the loading process.
This div represents the home page and should contain content for when the visitor first comes into the site.
This div contains the categories and subcategories. Two nested DOJO repeater controls are used to populate these nodes with data coming from the server.
This div will always contain a list of products for the selected category and subcategory.
This div will always contain information about the selected product.
This div will contain a list of the items a visitor has added to their cart
This is the form that th visitor needs to submit to complete the checkout process.
When the checkout process is complete this div is displayed
This div provides information about the number of items in a cart and their total cost
Displays a list of comments posted to the Guestbook
The form used by a visitor to post a comment to the Guestbook
Depending on the users action the class of the body tag will change.
We can show and hide parts of the cart on each change.
Below is a list of the classes that are applied to the body tag.
The page is in this state when it first loads and retrieves data from the server.
At this point you would probably only want to display the loader div to tell the visitor that the page is still loading.
This is the only place where you would hide all the permanent items.
Once all data has been loaded and the page is ready to be displayed the state will change to StateHome.
Once page has fully loaded and is ready it goes to StateHome.
In this state you would want to display the home page as well as all the navigation links to allow the visitor to progress.
The page enters this state when the visitor clicks on one of the categories.
In this implementation we display the product list
The page enters this state when the visitor clicks on one of the subcategories.
Once again we display the product list
When a visitor clicks on the details button for a product the page goes into this state
We use the rule below to show the product details page
When a visitor adds an item to their cart the page enters this state
In this implementation we display the product list again
The page enters this state when the user clicks on the 'My Cart' button
so we show them their cart
When the user clicks on the 'Proceed to Checkout' button we show the checkout form
Once the checkout has completed successfully we show the visitor a notice to that effect
When the visitor clicks on the 'Guestbook' button the page goes into this state.
We show the visitor the list of entries captured to the guestbook
When the user clicks on the 'Add Comment' button the page goes into this state
We show the form allowing them to add a comment
Once they have captured the comment the page goes back to 'StateGuestBook'
Besides changing the class of the body tag the application also adds a 'selected' class to various nodes.
By creating a CSS rule for the selected class we can highlighted selected categories, subcategories and products.
We now add the final set of style rules to fine tune the design and layout.