CMSMS Quick E-Commerce...

Revised: April 25/2010 -- Add info for CGEcommerceBase

People have been asking about the e-commerce solutions available for CMS Made Simple, so I thought I would drop a note or two about the available solutions. There are currently two seperate and distinct solutions available for CMS Made Simple.

• The solution created by Ted and myself.  Consisting of the Products, Cart and Orders module, along with different addon tax calculation, shipping calculation modules. and payment gateway modules.
• The solution created by Duclet that I really don't know anything about.

This guide will be about the suite that was created by Ted and Myself.  It will illustrate how to setup a basic e-commerce system that is flexible, stylable, and extendable.  I will not delve too much into templating, or explaining each and every last option in each module, but will illustrate how to get a bare-bones basic site going.

So here goes:

First, Install the modules

At the very least, you will need the following modules:

• CGExtensions (A toolkit I use to build all of my modules with)
• FrontEndUsers (The module that handles users and the login process)
• CGSimpleSmarty (A Set of smarty plugins)
• CustomContent (A different set of smarty plugins for displaying different content to different users)
• Products (The product management suite)
• CGEcommerceBase (The core Ecommerce glue)
  
• Cart (The basket management stuff)
• Orders (Order processing and management)

You may also want some of these modules for shipping, taxes, and payment

• FRShipping (Calculate shipping cost based on order weight)
• FRTaxes (Calculate simple flat rate taxes)
• DestinationBasedShipping (Calculate shipping cost based on destination state)
• warehouse_taxes (Calculate taxes based on location of origin)
• PriceBasedShipping (Calculate shipping price based on pre-tax order total)
• PaypalGateway (Simple paypal payment processing)

A third set of optional modules:

• SelfRegistration (Allow users to register themselves with your site)
• GiftBaskets (A replacement for the Cart module that allows multiple different baskets with a different shipping address for each)
  
• ManyBaskets (Similar to the GiftBaskets module this module allows maintaining multiple different baskets but stores basket information in the database for repeated retrieval)

The first question you're going to ask is: 'Why are there so many modules?'. The answer to this is quite simple, it allows for greater flexibility in the use of the modules (you can use some of the modules for different purposes or use a different combination of modules to achieve a different style of e-commerce site, etc), and of course it means less duplication of code, If you don't need payment processing then you don't have to install a payment gateway module.   If you require a different type of shipping or tax calculation, just plugin the appropriate module.  As well, there are now two cart modules to allow for different behaviour in the cart.

Note: use caution when installing these modules.  Make sure you analyse the dependencies for each module (you can see them by clicking on the 'about' link beside the module when you're browsing modules in Module Manager. Make sure you are running the latest release of CMS Made Simple, and it would be wise to have a 'known good' backup before making changes of this magnitude.

Secondly, Configure the modules.

Most of these modules contain an admin panel with some preferences.  You will have to explore these on your own.  for now, I'll just go through the major steps:

FrontEndUsers (Users & Groups >> FrontEnd User Management):

You will need at least one user group in FrontEndUsers to manage your customers.  So you need to create a group in FrontEndUsers.  In order to do that, you will need to create at least one property.

I typically create a couple of properties... usually one called 'Full Name' of type text, and sometimes a dropdown called 'gender', with options "Male" and "Female".

Next in the groups tab create a new group called 'ecommerce', and associate those properties with that group, and mark each property as 'Optional'.

Next I think we should check the preferences for the FrontEndUsers module, as those preferences can effect the behaviour of the rest of the module.  I suggest you change the maximum username length to 40 or greater, the length of the username field to 40... and check the 'username is email' checkbox. You may also want to ensure that the default group is set, and that 'require membership in at least one group' is also set.  Then click submit at the bottom of the form.

Lastly, because in this tutorial we aren't allowing users to register themselves, we need to create a user.  This should see a link entitled 'Add User' on the users tab in FEU.  Creating a new user should be a straight forward process.

Products (Content >> Product Manager):

You will need to adjust some preferences in the products module.  They are fairly straight forward.

Orders (Content >> Order Manager):

You will need to adjust a few preferences in the Orders module.   At a minimum select the user group that users must be a member of.  You may also want to adjust some address handling preferences (note: these preferences may move to CGEcommerceBase at a future date).

CGEcommerceBase (Extensions >> Calguys Ecommerce Base):

Here you will need to specify some preferences,particularly chose your desired 'Supplier' modules (there is the potential for more than one), and your Cart modules.  Later you will use this interface to select shipping, tax, promotion, and payment modules.

That completes the minimal configuration that you will need to do to get e-commerce working.  You probably noticed that there are alot of other options in there, and you may play with them later.  In particular you will need to adjust the settings for any payment gateway you have chosen.

Then Create Products

Okay, in order to sell things, we need to create products.  Since this isn't an indepth tutorial on the products module (I may write this later).  I'll just briefly describe some steps:

Create a Product Hierarchy

In the Product Hierarchy tab click on 'Add Hierarchy Item', and add a hierarchy item called 'Clothing', and press submit.

Next click on 'Add Hierarchy Item' again, and add a hierarchy item called 'Shirts', and select 'Clothing' as the parent.

Create a hierarchy tree similar to this:

Clothing
  Shirts
  Jackets
Footwear
  Shoes
  Boots

Create some Product Categories:

In the 'Categories' tab create categories like this:

• Suitable for Men
• Suitable for Ladies
• Suitable for Children

Create individual products

in the Products tab, you can click 'Add a Product' and add a product as follows:

Name:  Logo T-Shirt
Price:   19.95
Weight: 0.25
Status:  Enabled
Details: A quality, well fitting T-shirt with our label emblazened on the front.... Support your team!
Hierarchy Position:  Clothing >> Shirts
Categories:  Suitable for Men, Suitable for Ladies

Once you have submitted that form, you'll be returned back to the products tab in the admin panel.  On the right side of each row are three icons.... one for product attributes, another for editing the product, and a third for deleting the product.  Click on the attributes button for our newly created Logo T-shirt

In the page that is displayed, click on the 'Add Attribute' link, to display the add/edit attribute set form.

Create an attribute called 'Size' with the following values

Petite (-1.00), Small, Medium, Large, XL (+1.00), XXL(+1.00), XXXL(+2.00), and click submit.

Next create another attribute set called 'Colour' and add the following options:

Red, Green, Blue, Black, White.

Now I suggest you create at least four or five more products with different hierarchy positions, prices, weights, descriptions, categories and attributes.   This is left as an excercise for you.

At the end of this you should have a suite of configured modules, and a selection of products to test with.

Call The Modules

Here we'll create numerous pages for our various modules.  We really don't need to do this, and there are other ways to setup your display, but this will be a simple way of demonstrating the functionality of the modules.

First create a page entitled 'Login', with the menu text 'Login'.  In the content area of that page add {FrontEndUsers}.  Click Submit.

Next create a page called 'Products', with the menu text 'Products by Hierarchy'.  In the content area of that page add {Products action=hierarchy}.  Click Submit;

Next create a page called 'View Cart' with the menu text 'View Cart'.  In the content area of that page add {Cart action=viewcart}.  Click Submit

Lastly create a page called 'Orders', with the menu text 'Orders'.  In the content area of that page add {Orders}.  Note: You should also unckeck the 'cachable' flag in the options tab for this page.   The Orders module requires users to be logged in to FrontEndusers, and checks this.  This means that the contents of this page could theoretically change for each request, and cannot be cached. Then click Submit.

That's it, that's the minimal amount of stuff you have to do to get an e-commerce site working with CMS Made Simple.    Now we need to try it out.

Try It!

Now, I suggest you click on the 'View site' icon in the top right of the page, and view the changes to your site.   You should see the four pages you created.

Without logging in, you should be able to visit your new Products page, and surf down to the products.   In the detail page for each product, you should see all of the product details (size, weight, description, price, etc)... and you should see a form at the bottom allowing you to add the product to your cart.  If your product has attributes such as Size and Color you will be able to select these attributes, enter a quantity, and then add the item to your cart.

Next, once you've browsed your product tree, and added a few items to your cart, browse to the 'View Cart' you created.  You should see another form that shows the current contents of your shopping cart.  Here you can edit quantities, and remove a particular item from your cart (just set the quantity to 0).

Next you need to login.  Browse to the 'Login' page, and enter the username and password for the user you created at the beginning of this guide.   Once you click 'Login' you should see a welcome message, and the option to sign out, or change settings.  You can explore this later.

Once you are logged in, you can browse to the Orders module.  You should see a form that asks you for billing and shipping information.  Fill that out with some information (it can be fake if you want)... and click 'Next'.  You will then see the Order confirmation page, showing you the details you just entered, and the contents of your cart.  If you have configured a shipping and/or tax module you should see the calculations for tax and shipping prices.

At this point, the behaviour may change depending upon what modules you have installed.  If you have selected a payment gateway, you may see an option to pay for your order via that gateway.  However, we didn't configure a payment gateway in this totorial, therefore If you click 'Next' on this page, you will see an invoice.

Profit!!!

if you return to your admin console, and select 'Content >> Order manager', you will now see the newly created order, and be able to edit it.   You're all set to process the order you just created, and ship yourself some footwear, and clothing!!!

All that is left is to style things up in a way that fits your site, and to do your search engine optimization, and watch the orders start rolling in.

I hope you enjoyed this quick and dirty guide to e-commerce in CMS Made Simple