Samples Product Information Home Page Download Pricing

Adding a Cart - CleverCart

This tutorial demonstrates creating a cart using templates included with the sample data. For more information on creating a template for use with a cart, view this tutorial: Templates - Carts

 

Adding the CleverCart to any template is very simple. However, this does require adding another table - for the cart - to your mySQL database. On most versions of phpMyAdmin you can create a new table by clicking New under the name of your database in the navigation panel.
If your version does not have this option, refer to the Help or Tutorials provided with your version.

 

The screenshot below shows the table I am creating. I've given it the name myCart and it will have nine columns. When New was first clicked, this page did not display nine rows. I entered a number in the Add _ Column(s) box at the top of the form to increase the number of rows to nine.
You can do the same so that you see the entire table or you can add rows one at a time.

You do not have to use the same names as shown here, you just have to enter the names you use later in CleverCat. A brief explanation of how is column will be used follows.

pIndex - Every table should have a unique, primary index. The Type for this column should be INT, the Index should be PRIMARY and A_I (auto-increment) should be checked.

cartID - This field will be used to uniquely identify a session. If multiple users are adding items to a cart at the same time, this value keeps the carts separate. The Type for this column should be VARCHAR, set Length to 255 and the Index should be INDEX.

invID - The Unique Index value of items in your Inventory table is copied to the Cart table when items are added. The name of this column does not have to match the name in the Inventory table but I'm giving it the same name for clarity. The Type for this column should be VARCHAR, set Length 10 and the Index should be INDEX.

category - Again, the name does not have to match the equivalent in the Inventory table. The Type for this column should be TEXT and the Length set to 255.

desc1, desc2 - In this case, I am using a different names for the two description columns to keep them generic but you can use the same names as in your Inventory table. The Type for these columns should be TEXT.

qty - This column records the number of a given item added to the Cart. Set the type to INT and set the Default value to 0.

price - Set the type for the column which records prices to DECIMAL, the Length to 10,2 and set the Default value to 0.00.

cartDate - This column is optional field but recommended. If you set the type for this column to DATE, and the Default value to CURRENT_TIMESTAMP your cart will automatically record the date and time that items were added. This can be useful for tracking or even for deleting old records after a given period.

Click the Save button after defining your table and return to the CleverCat's HTML Configuration form. Click the Cart Tab and select CleverCart.

For this example I'm using Select Checkbox as the Input Option. You can see examples of each of the three input options on the Cart Samples page.

For the remaining fields, enter the names you used to define the Cart table.

That's all it takes to add the CleverCart to any template. There's a bit of work remaining to be done on your web page to create the inline cart as on the Sample Page but we can create the files now and do some basic testing.

Click the Print button at the bottom-right of the form or exit to the Main Menu and click Print to get to the Printing Menu.

For this test, select only the Baseball Gloves category for printing by checking its Print? box in the category list.

Click the www button to create the files in the Local Output Folder.

This screenshot, shows the same files as in Chapter 6 - PHP Templates plus a few additional ones.
cleverCart.php and cleverCart.js are required files and should be uploaded into the www folder along with the template files.
inlineCart.php, viewCart.php and viewCart.css are sample files which are included with software as a suggested method of implementing the cart. These files will be copied into the folder while the software is running in evaluation mode. You may eventually create your own versions of these files or modify these ones to suit your purposes.

 

As in the previous chapters, upload the files from the Local Output Folder to the www folder on your server and enter the full URL in your browser. Using my example, that would be:

www.mySite.com/Baseball Gloves.php

In this screenshot, a checkbox has now been added to every row of the table.
You can add and remove items from the cart simply by checking or unchecking the checkbox. Of course, this only adds a quantity of 1 of that item to the cart. This may be appropriate for some types of products but you would choose the input option which works best for you.

 

To test that these files are working, first return to the Sample Page to see how they work in a live site.

Select a few items and notice how the text under the View Cart button updates to show you the quantity of items in your cart. This cart counter is produced by inlineCart.php.

Click the View Cart button to see a summary of the products. If you change any of the quantities in the summary to 0, when you return to the product page, you will find that the checkmark has been removed from that item. This summary is produced by viewCart.php.

 

Test your inlineCart.php file by entering its full name in your Browser.

Using my example, that would be:

www.mySite.com/inlineCart.php

Test your viewCart.php file by entering its full name in your Browser.

Using my example, that would be:

www.mySite.com/viewCart.php

Because the files are not all on the same page, you will have to refresh or reload each page to see how changes on one are reflected on another. If the pages are correct after refreshing, you are ready to continue to the next step.

In the next chapter, I explain how all these files are put together to create a fully functional cart on one page.

 

Return to Tutorial Selection or Continue to the next chapter: Inline Frames