CMS Made Simple 1.6: Getting Started with an E-commerce Website

Exclusive offer: get 50% off this eBook here
CMS Made Simple 1.6: Beginner's Guide

CMS Made Simple 1.6: Beginner's Guide — Save 50%

Create a fully functional and professional website using CMS Made Simple

$26.99    $13.50
by Sofia Hauschildt | March 2010 | Beginner's Guides Content Management Open Source Web Development

This article by Sofia Hauschildt, author of CMS Made Simple 1.6: Beginner's Guide, covers the Products module which will be the heart of your e-commerce solution. This module is the place where products that you would like to sell in your shop are saved. Generally, it is possible to use any other module for the solution, but this would imply that you have to make some heavy modifications to your templates and, probably, the PHP code of the modules.

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. CMS Made Simple 1.6: Beginner's Guide

  6. 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.

CMS Made Simple 1.6: Beginner's Guide

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.

CMS Made Simple 1.6: Beginner's Guide

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:

Smarty variable

Description

{$hierarchy_item.name}

The name of the hierarchy item

{$hierarchy_item.id}

The ID of the hierarchy item

{$upurl}

The URL to the parent hierarchy item. Only applicable if there are more than one hierarchy level.

{$mod}

The object containing all the information about the module Products. In the template the object is used to get translations:

{$mod->Lang('parent')} returns the translation for the key parent from the translation file.

You can replace this variable with your custom text if your website is monolingual and the language of the website will never be changed.

{$parent}

This array supposes to hold the information about the parent item. However, it is not assigned in the current version of the module and cannot be used.

{$child_nodes}

The array that contains information about all child hierarchy items. The information from this array:

{$child_nodes.id} - ID of the hierarchy item

{$child_nodes.name} - name of the hierarchy item

{$child_nodes.description} - description of the hierarchy item

{$child_nodes.parent_id} - ID of the parent hierarchy item

{$child_nodes. image } - the name of the image file for the hierarchy item

{$child_nodes. thumbnail} - the name of the thumbnail file for the hierarchy item

{$child_nodes. long_name} - the full name of the hierarchy item (including the names of all parents)

{$child_nodes. extra1} - the value saved in the Extra Field 1

{$child_nodes. extra2} - the value saved in the Extra Field 2

{$child_nodes. downurl} - the URL for this hierarchy item

{$hierarchy_image_location}

Path to the folder where images for the product are saved.

{$hierarchy_item}

An array that contains the id of the actual item hierarchy.

CMS Made Simple 1.6: Beginner's Guide Create a fully functional and professional website using CMS Made Simple
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

From the preceding table, you can now combine the HTML and Smarty tags and create your own template. Create a list of hierarchy items for the sidebar with the sample template as shown in the following code snippet:

{if isset($child_nodes) && count($child_nodes)}
{foreach from=$child_nodes item='node'}
<h3>
{if isset($node.downurl)}
<a href="{$node.downurl}
title="{$node.name}">{$node.name}</a>
{else}
{$node.name}
{/if}
</h3>
{if !empty($node.description)}
<div>{$node.description}
</div>
{/if}
{/foreach}
{/if}
<!-- This tag will be automatically added to the page content.
It uses the default summary template for products. -->
{Products hierarchyid=$hierarchy_item.id}

This template goes through each hierarchy and displays its name as a HTML heading h3.It will also show a description field of the hierarchy item below the heading. The last Smarty tag in the template shows the summary list of the products limited to the hierarchy item selected in the sidebar. The template of this summary list is the default summary template. The products summary list will automatically replace the page content.

Before you customize the summary template, open it (Content | Product Manager, tab Summary Templates, template Sample) and find out what the major parts of this template are. It consists of:

  • Drop-down list of categories
  • Page navigation
  • List of products with the add-to-cart functionality for each product

At present, you can see only the list of products, no categories, no page navigation, and no cart functionality.

Displaying the drop-down list of the categories does not work in the actual version of the module the way it is added to the sample template:

{if isset($catformstart)}
{$catformstart}
{$catdropdown}{$catbutton}
{$catformend}
{/if}

It is still possible that this functionality will be added in a later release of the module. At present, you can completely delete this part or replace it with the Smarty tag shown as follows:

{Products action="categorylist"}

The output of the category list can be changed by customizing the CategoryList Templates in the admin area of the Products module. In my example, I have added the categories to the sidebar just above the hierarchy item as shown in the following code snippet:

{Products action="categorylist"}
{Products action="hierarchy"}

The second line of code in the last example already exists in your template. The first line adds the links to the different categories that have assigned products. In the brackets behind the name of the category, the number of assigned products is shown. If you have assigned some products to categories, it should look as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

To define how many products should be shown on one page and to see how the page navigation for the product list looks like by default, add the parameter pagelimit="" to the Smarty tag {Products}. We have placed this tag in the page Shop at the very beginning of the workshop. Open the page (Content | Pages) and add the parameter to the tag as shown in the following code:

{Products pagelimit="2"}

Be sure that the whole number of products is greater than the value set here. Otherwise, you will not see the page navigation and cannot customize it. The page navigation in the module Products does not support SEO friendly URL, so if you do not have many products, you can completely delete the navigation from the template and do not limit the number of products per page. The number of products shown on one page is limited to 100000 products, if you do not limit it explicitly. But I would not recommend displaying more than about 20 products per page. It is not user friendly and will significantly impact the performance of your shop.

The last part in the template is the cart functionality. The Products module does not contain any cart functionality. There is another module that is perfectly integrated into it. The module in question is called Cart and will be installed in the next step. We cannot change the display of the Cart module at this time, so we will leave the tag as it is.

The last question is how to display the product image in the summary list of products. In the Summary template, you will find a Smarty comment made by the developer of the module saying The summary template has access to custom fields via the $entry->fields. The values of the custom fields can be generally accessed by the following lines of code:

{$entry->fields.image->value}
{$entry->fields.number->value}

The part of the code in bold corresponds to the technical name of the field. To get thumbnails of the images automatically created by the module during the upload use:

{$entry->fields.image->thumbnail}

So let's put it together and create a complete template for the summary view of products including custom field containing the thumbnail of the product. Create a new summary template and name it My Shop. Add the template code as shown in the following code snippet:

{Products action="categorylist"}
<ul class="products-summary">
{foreach from=$items item=entry}
<li>
<a href="{$entry->detail_url}">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{$entry->file_location}/{$entry->fields.image
>thumbnail}" alt="{$entry->product_name}"/></a>
<br/>
<a href="{$entry->detail_url}">{$entry->product_name}</a>
<br/>
{$currency_symbol}{$entry->price}
</li>
{/foreach}
</ul>

Save the template and set it as default. The variable in bold in the template is the custom field containing the image of the product. I have named the field image as I have created it. If you have chosen another name, you have to adjust it here.

The list of products can be styled with CSS. To display the products one by one, open the stylesheet used in your main template (Layout | Stylesheets) and add the following style definitions to it:

ul.products-summary
{
list-style: none;
}
ul.products-summary li
{
float: left;
padding: 15px;
text-align: center;
}

This is just an example; you are free to add any styles that will fit into your own design.

The size of the thumbnails created while uploading product images can be changed in the tab Preferences (Content | Product Manager). On this page, scroll down to the section Image Handling Settings and adjust the values as you like.

If you have used my templates so far, your summary template and hierarchy should look as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

The last step will be customization of the detailed view of the product. Create a new template called My Shop under the Detail Templates tab in the admin area of the Products module. Then set the template as default.

In the detail template, you will find a section for the product attributes. We did not discuss it so far. The products can have different attributes, like size or color for the t-shirts. These attributes may or may not have an impact on the price. For each product, the attributes are added separately. It does not make sense to add size or color to the mouse pad, if we have only one model.

Let's create the attribute for the color of the long t-shirt. Assume that we have two colors available: white and grey. The color does not change the price of the product. In the admin area of the Products module, click on the Products tab. In the list of products, at the end of each line there is an icon for Edit Attribute Sets. Click on this icon in line with the product to which you would like to add attributes.

On the next screen, click on Add Attribute. Enter the name of the attribute. This name contains the generic term like Color. In the Label field enter the name of the attribute in the same way as it should appear on the website. As the color of the t-shirt does not change the price of the product, enter 0 in the field Price Adjustment and click on Update. Add another label for the color Grey. It should look as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

Click on Submit once you have entered all possible values for this attribute. See the detailed view of the product with defined attributes. All possible values are listed in the template. When you install the Cart module later on, you will not only be able to display the attributes, but add them to the cart as well. The price will be automatically adjusted in the cart view.

You should now be able to customize the detail template yourself.

Follow these steps:

  1. Create a new template and do not overwrite the sample one. The Sample template can be used for future reference if you delete any part from your custom template.
  2. Analyze the template. Try to figure out its major parts and usage of other modules in it.
  3. Write down all the Smarty variables used in the templates in a table as shown previously for the Hierarchy Report Templates.
  4. Figure out, what values are saved in these variables. If the variable contains an array, use the Smarty modifier print_r to get all array values from it. For example, {$entry|print_r} will output all the values contained in this variable.
  5. Use HTML and Smarty to markup the template.
  6. Add stylesheet definitions to change the appearance.

Creating detail view for product

Follow the list above and create your own template for the detailed view of the product. Delete everything you do not need in the template; for example, the Weight field. Assign custom fields (Product image and Product number) the same way you did in the summary template. Check the values of the variables with the modifier print_r if you are not sure what you have to use.

My detail template looks as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

The template code I have used for the detailed template is shown in the following code snippet:

<div class="products-detail">
<img align="left" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{$entry->file_location}/{$entry
>fields.image->value}" alt="{$entry->product_name}"/>
<h1>{$entry->product_name}</h1>
<h2>{$currency_symbol}{$entry->price}</h2>
<div>{$entry->details}</div>
{* print out attributes *}
{if isset($entry->attributes)}
{foreach from=$entry->attributes key='name' item='attribset'}
<p><strong>{$name}:</strong>
{foreach from=$attribset key='label' item='adjustment'}
{$label} ({$currency_symbol}{$adjustment}),
{/foreach}
</p>
{/foreach}
{/if}
{* include the cart *}
{if isset($cart_module_tag)}
{eval var=$cart_module_tag}
{/if}
</div>

Summary

In this article, you covered the Products module that allows you to create and edit products for the online shop. This module is a basis for the e-commerce suite.

In the article CMS Made Simple 1.6: Orders and Payments in an E-commerce Website, we will cover other modules.


If you have read this article you may be interested to view :

CMS Made Simple 1.6: Beginner's Guide Create a fully functional and professional website using CMS Made Simple
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Sofia Hauschildt

Sofia Hauschildt is a tutor for web mastering and web development, who started designing and developing professional websites in 1995, just before her graduation in computer science. With experience as a Data Warehouse developer and ERP consultant she became a self-employed tutor. During her career she has been contracted by IT and management academies, the German army, several city administrations, and international companies like Siemens. Her work as a tutor is always focused on practical training combined with a theoretical background in order to get fast and handy results.  In her publications she shares not only solid knowledge but her personal experience and shows a simple and powerful way of creating websites for ambitious beginners. Building websites is an amazing chance to communicate with the whole world and to discover it as well.

Books From Packt


Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

MediaWiki 1.1 Beginner's Guide
MediaWiki 1.1 Beginner's Guide

iReport 3.7
iReport 3.7

Apache MyFaces 1.2 Web Application Development
Apache MyFaces 1.2 Web Application Development

Grok 1.0 Web Development
Grok 1.0 Web Development

Drupal 6 Attachment Views
Drupal 6 Attachment Views

OpenX Ad Server: Beginner's Guide
OpenX Ad Server: Beginner's Guide

Drupal 6 Performance Tips
Drupal 6 Performance Tips


Your rating: None Average: 4 (3 votes)
Other Corrections by
There is also a hyphen missing from the detail template in this line: {$entry->product_name}. Should be:{$entry->product_name}, Also, using 'align' in an img element causing the page to invalidate. Align should be applied via css. and lastly sure would be nice if we could put line breaks in these comments to break up our comments into logical chunks.
A missing - by
Hi there there is one little thing missing that makes it crash. Original: {$entry->fields.image >thumbnail} Corrected: {$entry->fields.image ->thumbnail} Great tuto, Thanks
assign different templates to different products? by
Hi, I've just read your help article about Prosuct Manager in CMSMS. All the ay through, it refers to setting 1 template as the default. If you wish to have some hierarchy items behave in a different way, when clicked on, to go to the summary page, can you assign a different template to it please?

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
i
1
H
F
Z
N
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software