With the Products module, you can manage:

• Products
• Product attributes that will have an impact on the price (like size or color)
• Categories
• Product hierarchy
• Custom fields

This module is the basis for all other modules that you will use later on. After all, you cannot start a shop if you do not have any place to store the products.

Install the Products module with the Module Manager. Pay attention to the Dependencies section of the module before installing it. There are two (CGExtensions and CGSimpleSmarty) modules that provide convenience APIs, reusable forms, and Smarty tags for use in other modules. If you are not a programmer, you probably will not need to do anything with these modules besides adjusting some preferences if you ever need them. In the workshop described here, you just need to install them.

Time for action – adding the first product

After the Products module is installed, we will display it on the page Shop and add the first product to it as follows:

1. Create a new content page Shop (Content | Pages | Add New Content).
2. Add the Smarty tag {Products} into the field Content of the page. If you see the page in browser, it will not show anything at this time as you have not added any product to the shop so far.
3. In the admin console of CMS Made Simple, click on Content | Product Manager.
4. Under the Products tab, click on the Add A Product link and add your product as shown in the following screenshot:



5. Click on Submit and see the Shop page on your website.

What just happened?

You have added the first product to the Products module. This product is displayed on the page with the Price and Weight (we can delete this field later on). Click the product link to see the detailed view of the product. The template looks very technical, but with some HTML, CSS, and Smarty knowledge you can change its look and feel later on. Let’s concentrate on the functionality of the module first and not on the design.

Add some more products in the Product Manager and see the list of products on the Shop page. Pay attention that the detailed view of every product is displayed in the same way. In the Products module, there are some fields like Price and Weight already defined. But you will need to add your own fields.

Creating custom fields

Usually one or more pictures of the product can be found in an online shop. However, there is no special image field where you can upload the product picture. Luckily, you can add as many custom fields as you need. In the next step, you will create a custom field, where the image of the product can be uploaded. In the admin area of the Product Manager, choose the tab Field Definitions and click on the link Add A Field.

Name is a kind of technical field that is not displayed to your visitors. You should not use any special characters or spaces in the name of the field. Use only letters and numbers, no dashes, slashes, or anything else non-alphanumeric.

The Prompt field is the label of the field that you will see in the admin area of the Product Manager during adding or editing products. You can use any characters in this field.

The Type of the field should be Image. By selecting this type you ensure that the field is displayed as a field for file uploads in the admin area. This field will also be validated, so that only images can be uploaded here. Additionally, thumbnails for the uploaded images (small preview versions) will be created automatically after upload.

Let the field be public by selecting the checkbox for Is this a public field? It means that the content of the field (the image itself) will be shown to the visitors of your shop. If you make it private, only the administrator of the website can see the field in the admin area of the module.

Save the field. This field is automatically added to the detail template on the page and the editing view of the product in the admin area of the Product Manager. To test the field, open any product for editing in the admin area, and the field Product image (Prompt), and upload an image for the product using this field.

Control the display of the field in the detailed view of the product on the website. The small preview version of the product is added to the section Custom Fields of the detailed view. We still do not care of how it looks like, but how it works. We will change the detailed view of the product when we are ready with all the custom fields and the product hierarchy.

Image already exists

When you try to upload the same image twice you will get an error saying that the image has been already uploaded. To control what images are already saved for the product and delete them, open Content | File Manager in the admin console. Find the folder Products and then the folder name product_[ID]. The ID of the product is displayed in the list of products in the admin area. Click on this folder and remove the images already uploaded. Now, you can upload the same image in the admin area of the Product Manager.

Define your own fields

Create as many custom fields as you need to display and manage the product. With the Type of the field you decide how the field is displayed in the admin area. The output of the field on the page can be fully customized and does not depend on the type.

If you need a Product Number field, create a new custom field (Text Input) with maximum length of 12 characters and make the field public. Then edit each of your products and enter a number in this field. You can adjust the order of the fields under the Field Definitions tab. Again, this order only applies to how the admin area for the product management looks; the output on the page can be completely different.

Creating a product hierarchy

Next, let us create a product hierarchy. In the official shop that I am trying to reproduce here, there are four hierarchy items:

• Shirts (short)
• Shirts (long)
• Home & Office
• Mugs

You should understand the difference between product categories and product items in the Product Manager module. Product categories are kind of tags for the products. It is not possible to arrange them in the hierarchy. However, you can assign one product to multiple categories if you like. In contrast to the categories, a product can belong to only one hierarchy item. That means the structure above should be implemented as a hierarchy and not as categories. One product cannot be a shirt and a mug at the same time.

We will use categories later on to mark the products as:

• New
• Popular
• Discounted

Categories will allow you to make one product both new and discounted at the same time. A hierarchy would not, as multiple assignment is not possible.

In the admin area of Product Manager, click on the Product Hierarchy tab and create four hierarchy items displayed in the first list. It is your choice if you want to add any description or image to the hierarchy or leave it empty.

Once the hierarchy is created, go through your already created products and assign them to the proper hierarchy item. The hierarchy can now be displayed in the sidebar navigation on the page. Open the main page template (Layout | Templates) and find the section with sidebar navigation. Add the Smarty tag for the product hierarchy shown as follows:

{Products action="hierarchy"}

Customizing product templates

The display of the product hierarchy template is very technical. Let’s customize all the templates for the module. There are three of them:

• Summary Templates
• Detail Templates
• Hierarchy Report Templates

Let’s start with  the Hierarchy Report Templates. This template defines how the hierarchy in the sidebar is displayed. In the admin area of the Product Manager, click on the Hierarchy Report Templates tab and find the list of existing templates for the hierarchy. The template Sample is the one that is used by default. You can customize this template or create your own by clicking on the New Template link. I choose the second way. It is generally advisable not to change sample templates, but create your own and set them as default. This way you can delete anything from the custom template and use the Sample template for reference if you need parts removed from the custom template. For the template name, I chose My Shop. However, you can use any name you wish.

In the Template Text field, the sample template code is already suggested. Leave this code as it is and submit the new template. Now you see two templates in the list. Make the template My Shop the default one by clicking on the red cross in the Default column. Let’s see what we have in the template and what we actually need. Open the new template for editing: