Organizing Products by Classes/Sub-Classes using DHTML

In order to organize your products by Classes/Sub-Classes, you will need to do the following. 




Main Classes / Sub Classes:


Computers (Main Class)

-         Desktops (Sub Class)

-         Laptops (Sub Class)

-         Accessories (Sub Class)

-         Storage Devices (Sub Class)




Step 1


You will need to create all your sub-classes by going to Classes > Add a New Class for each sub-class that you would like to add to your site.  In our example above, these sub-classes would be “Desktops”, “Laptops”, “Accessories”, & “Storage Devices”.



Step 2


Now that you have added all the sub-classes to your site, you will need to go to “Products > View/Edit Product” to ensure that all of your existing products are placed into the appropriate sub-class.  You will notice this by clicking on any of your products and then looking at the “Class” field (Drop-Down Box).  You can select the appropriate class from the drop-down box and then click on “Update Product” at the bottom of the page when you are done.



Step 3


Now that you are done placing your products into the correct sub-class, you are ready to create your main class pages.  To do this, you will need to click on “Add Page” from your admin area, and then select “COOL Cart / Catalog” as the page type that you would like to add to your site.  Next, type in a name for your page.  You should name your page according to your main classes.  For example, in the given scenario above, “Computers” will be the page title.  Click on “Add Page” when you are done entering a page title.  From the next screen, you will need to select “Class List” from the options given.  Finally, click on “Submit” when done. 


For each main class that you would like to setup on your site, you will need to repeat the above instructions.


Step 4

You will now need to add individual catalog pages to your site, for each sub-class that you have created previously in “Classes > Add a New Class”.  For example, in the scenario above, you will need to add a new catalog page for each of your sub-classes, which are “Desktops”, “Laptops”, “Accessories”, & “Storage Devices”.


You can repeat the process from the step above (Step 3) to add each of the individual catalog pages to your site.  Once again, you will name your new catalog pages according to your sub-classes.


When you get to the screen where you can select from the four types of ways to categorize your products, click on the radio button corresponding to the "Show Products" choice.  Then, select the corresponding class from the drop down box and leave all other settings intact.  For example, if you named your catalog page "Desktops", you would select "Desktops" from the list of classes. 


Note: when you are finished making your selection, click "Submit" at the bottom of the page.


Repeat Step 4 for each individual (sub-class) catalog page that you would like to add to your site.



Step 5


You have now setup and configured the catalog pages for your main classes as well as your sub-classes, and are ready to proceed to the final step.  The last step would be to organize your pages into a DHTML Navigation Style.  See below for an example of the DHTML concept and how to setup your pages as such.


We have added a new Drop-Down (DHTML) Menu function to our system.  The DHTML Menu feature will allow you to create a mouse-over type effect for sub-pages within a main page.  For example, lets say you currently had the following pages listed on the navigation menu on your website:

- Desktops
- Laptops
- Accessories

- Storage Devices

- Computers

Using the new DHTML feature, you can have these pages organized in a drop-down menu style as follows:

- Computers
   > Desktops
   > Laptops

   > Accessories

   > Storage Devices

As you can see, with the above menu structure your clients will see "Computers" listed on the left navigation menu on your website.  However, when they mouse-over to that page, "Desktops", "Laptops", “Accessories”, & “Storage Devices” will drop-down as sub-pages.  This effect is very similar to that which is currently in the admin area of your website.  For example, in your admin area, you will notice that when you mouse-over "Products", you will see sub-pages such as "Add a New Product" & "Upload a Product Photo".  

Using the < (left) and > (right) arrows next to your page names, in the "List Pages" section of your admin area, you will be able to set your pages as sub-pages under main pages.  You can still use the up and down arrows under the "Rank" column to move pages up and down accordingly.  

*Note: In order to use the DHTML feature, you will need to click on "List Pages" and select the option for "Drop-Down (DHTML) Menu" under 'Navigation Style" and then click on "Submit"