Figure Cases Product Listing (FIGURE 1)
Figures in comfort asked me to produce a method of ensuring that customers can only select the amount of foam that will fit into the cases.
The previous system allowed customers to choose more foam than would fit, which made it take longer for them to be able to fulfil the order.
This is because some trays are double, triple and even quadruple depth.
The client would first have to contact the customer to explain, costing time and money.
The trays can be different depths,widths and heights. My job was to create a script that filled on the same scale as the real case, so the customer could only get the correct amount of free foam with their order.
FIGURE 1 shows the first page the customer would encounter when purchasing a carry case. The carry case comes filled with the foam the customer desires, free of charge. For more information about these screen-shots, click on an image for a long description.
Once the customer has chosen their desired case by clicking on it, they are given a long description about that case, including its dimensions and uses (SEE FIGURE 2). This is the same as with any product so it can be edited from the administration panel of osCommerce, along with the clients other products.
Product Information Page (FIGURE 2)
The only differences between this page and the regular product information page are:
- The button to add to cart sends the customer to the foam tray wizard as opposed to the shopping cart.
- Product attribute options are hidden. For example colour. The colours available are given in the description and chosen on the confirmation page of the script.
The script uses the product ID to get the dimensions from an additional table in the database.
When the customer chooses add to cart they are presented with a page of foam trays which will fit in that case (SEE FIGURE 3). They are then returned to FIGURE 3 when they have selected a slot for the tray on the next page, unless the case is full.
The foam tray wizard has a start over button returning them to carry case category and cancelling the process.
Foam Tray Page (FIGURE 3)
If the customer navigates away from the script, they will resume selection if they return to the wizard. If the customer logs in or registers during that session, they will be able to continue if they return to the foam tray wizard after logging back in. If they choose add to cart on another case before completing the entire process, the previous session information will be lost.
After choosing their first foam tray, the customer is directed to FIGURE 4. FIGURE 4 shows a number of tables, representing a birds-eye view of each single depth layer of the case.
The customer is instructed to choose the top left hand corner of where they wish to place their tray; filling the cells based on the size of the selected tray, as stored in the database. The customer is returned to FIGURE 3 until all the cells are full. At FIGURE 3 the customer will either be presented with an error if there is no room at the selected cell, or simply the list of available trays to select the next.
Once all the cells are full, the customer is redirected to the final confirmation page (FIGURE 5) detailing the selected trays, case, the description of that case, and the option to choose the colour. Once the customer presses add to cart, they are presented with their shopping cart. This shows the products already in their cart, their chosen carry case, its colour, and their choice of free foam trays.
Slot Selector Page (FIGURE 4)
Foam Tray Wizard Confirmation Page (FIGURE 5)
When the customer checks out as normal, the free trays are displayed to them along the process . On successful checkout, the information is then relayed to Figures In Comfort through the invoices, and order summary pages in the administration panel.
This project went well because now the system will not allow the customer to purchase more trays than fit inside their product. This is a good investment for Figures In Comfort as it cuts phone bills and ensures they don’t send out more foam than their offer allows.
The one big improvement would be to streamline the process so there aren’t as many pages; especially for those with a low-bandwidth connection. One possible solution would be to use AJAX, but the clients budget and the number of hours I had already spent on it, meant this wasn’t implemented.
The client is happy with the result as it solves the problem presented in the brief.
Tags: Figures In Comfort, osCommerce, Script, Shopping Cart, Time Saving
