Create a webshop in CMS Made Simple

Create a basic webshop using Products, Cart2 and Formbuilder modules. This method will provide a fully functional webshop, but without payment handling and order management. If you do need these, this tutorial will still be a good starting point for building your webshop in CMSMS.

Working example

Local demo webshop »

How to use

In the CMSMS Admin area you open Module Manager and install the dependency modules:

CGExtensions
CGSimpleSmarty
CGEcommerceBase
JQueryTools
CGSmartImage (optional for i.e. image scaling)

And the handling modules themselves:

Products
Cart2
FormBuilder

1. Cart2 module

In the Admin navigation you will find a new top level button called "E-commerce".
There you open the "Cart2" module.
Click at the bottom of the page at the button "Set as cart module". It will install Cart2 as your cart module.

2. Calguys Ecommerce Base module

Also in the "E-commerce" Admin navigation you will find the "Calguys Ecommerce Base" module.

Under the tab "Supplier Settings" the "Products" module needs to be selected as your supplier module.
Under the tab "Configuration" the "Cart2" module already is selected as your default cart module.
The address fields in the first tab can be used all over the website as described in this tutorial:
https://cmscanbesimple.org/blog/reuse-of-cgecommercebase-address-data.

3. Products module

The Products templates are maintained in the core Design Manager. We will use only 2 types:

Products::List View
Products::Detail View

Create the templates:

Products::List View-template

This template needs to be marked as the default one of its type!

{foreach $items as $entry}
<div class="ProductsListItem">
<h3>{$entry->product_name}</h3>
{$entry->details|summarize:'20'}<br />
<br />
<h4 class="float_left">{$currency_symbol} {$entry->price|number_format:2|replace:'.':','}</h4>
<a href="{$entry->detail_url|lower}" class="ProductsButton float_right">More info »</a>
</div>
<div class="clear"></div>
{/foreach}

Products::Detail View-template

This template needs to be marked as the default one of its type!

<h3>{$entry->product_name}</h3>
{$entry->details|default:''}
{if $entry->price > 0}
<h3 style="float_right">{$currency_symbol} {$entry->price|number_format:2:',':'.'}</h3>
{Cart2 sku=$entry->sku}
{/if}
<a href="shop" class="ProductsButton">« Back to store</a>

4. Cart2 module

The Cart2 module has a few types of templates, you will also find them in the core Design Manager.
A little explanation:

Cart2::Add to Cart Form:
This is the button you add in the detail template of the Products module. The visitor can click it to add the item to the cart.
Cart2::My Cart Form:
A button you can put i.e. in the websites header area. A kind of shortcut button to the view cart page... Inside the button you can display the number of items in the cart.
Cart2::View Cart Form:
A table like view of the items that are in the cart. It can also contain input fields and buttons to change and update the cart content.

Create the templates:

Cart2::Add to Cart Form-template, named "Cart2 Add to Cart Button"

This template needs to be marked as the default one of its type!

{if isset($cart_error)}{cgerror}{$cart_error}{/cgerror}{/if}

{$formstart}{strip}
<button type="submit" name="{$submitname}" class="ProductsButton">
+ Add to cart
</button>
{/strip}{$formend}

Cart2::My Cart Form-template, named "Cart2 My Cart Button"

This template needs to be marked as the default one of its type!

{if $cart_itemcount > 0}
<a href="cart" class="ProductsButton">Cart ({$cart_itemcount})</a>
{else}
<a class="ProductsButton">Cart (empty)</a>
{/if}

Cart2::View Cart Form-template, named "Cart2 Cart Form - View"

This template needs to be marked as the default one of its type!

In this example I used the default Cart template supplied after installing the module. Note it can be different at later module releases!

{* viewcartform template *}
<style>
.viewcartform th {
text-align: left;
}
</style>

<div class="viewcartform">
{* if the smarty variable orders_simpleviewcart is not set, then don't provide a form for adjusting quantities *}
{if !isset($cartitems) || count($cartitems) == 0 }
<div class="alert alert-warning">Your cart is empty</div>
{else}

{if isset($formstart) && !isset($orders_simpleviewcart)}{$formstart}{/if}
<table class="table" width="100%">
<thead>
<tr>
<th>{$Cart2->Lang('sku')}</th>
<th>{$Cart2->Lang('summary')}</th>
<th>{$Cart2->Lang('quantity')}</th>
<th>{$Cart2->Lang('unit_price')}</th>
<th>{$Cart2->Lang('unit_discount')}</th>
<th>{$Cart2->Lang('total')}</th>
<th width="1%">{$Cart2->Lang('remove')}</th>
</tr>
</thead>
<tbody>
{foreach from=$cartitems item='oneitem'}
<tr>
<td>{$oneitem->sku}</td>
<td>{$oneitem->summary}</td>
<td>
{if $oneitem->type != 1 || !isset($oneitem->quantity_box)}
{$oneitem->quantity}
{else}
{$oneitem->quantity_box}
{/if}
</td>
<td>{$currencysymbol}{$oneitem->unit_price|as_num:2}</td>
<td>{$currencysymbol}{$oneitem->unit_discount|as_num:2}</td>
<td>{$currencysymbol}{$oneitem->item_total|as_num:2}</td>
<td>{if isset($oneitem->remove_box)}{$oneitem->remove_box}{/if}</td>
</tr>
{/foreach}
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">{$Cart2->Lang('total_weight')}:</td>
<td>{$cartweight|as_num:2}{$weightunits}</td>
<td></td>
</tr>
<tr>
<td colspan="5" align="right">{$Cart2->Lang('subtotal')}:<br>
<em>({$Cart2->Lang('infosubtotal')})</em>
</td>
<td>{$currencysymbol}{$carttotal|as_num:2}</td>
<td></td>
</tr>
{if isset($formstart) && !isset($orders_simpleviewcart)}
<tr>
<td colspan="7">
<input type="submit" name="{$submit_name}" value="{$submit_text}"/>
<input type="submit" name="{$actionid}cart_empty_cart" value="{$Cart2->Lang('empty_cart')}"/>
</td>
</tr>
{/if}
</tfoot>
</table>

{if isset($formstart) && !isset($orders_simpleviewcart)}{$formend}{/if}
{/if}
</div>

Cart2::View Cart Form-template, named "Cart2 Cart Form - Checkout"

This template is a copy of the one above, but in this view I don't want the possibility to adjust/delete the item numbers, so I disabled a few lines here.

{* viewcartform template *}
<style>
.viewcartform th {
text-align: left;
}
</style>

<div class="viewcartform">
{* if the smarty variable orders_simpleviewcart is not set, then don't provide a form for adjusting quantities *}
{if !isset($cartitems) || count($cartitems) == 0 }
<div class="alert alert-warning">Your cart is empty</div>
{else}

{if isset($formstart) && !isset($orders_simpleviewcart)}{$formstart}{/if}
<table class="table" width="100%">
<thead>
<tr>
<th>{$Cart2->Lang('sku')}</th>
<th>{$Cart2->Lang('summary')}</th>
<th>{$Cart2->Lang('quantity')}</th>
<th>{$Cart2->Lang('unit_price')}</th>
<th>{$Cart2->Lang('unit_discount')}</th>
<th>{$Cart2->Lang('total')}</th>
<th width="1%">{*$Cart2->Lang('remove')*}</th> <- PAY ATTENTION!!
</tr>
</thead>
<tbody>
{foreach from=$cartitems item='oneitem'}
<tr>
<td>{$oneitem->sku}</td>
<td>{$oneitem->summary}</td>
<td>
{*if $oneitem->type != 1 || !isset($oneitem->quantity_box)*} <- PAY ATTENTION!!
{$oneitem->quantity}
{*else} <- PAY ATTENTION!!
{$oneitem->quantity_box}
{/if*} <- PAY ATTENTION!!
</td>
<td>{$currencysymbol}{$oneitem->unit_price|as_num:2}</td>
<td>{$currencysymbol}{$oneitem->unit_discount|as_num:2}</td>
<td>{$currencysymbol}{$oneitem->item_total|as_num:2}</td>
<td>{*if isset($oneitem->remove_box)}{$oneitem->remove_box}{/if*}</td> <- PAY ATTENTION!!
</tr>
{/foreach}
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">{$Cart2->Lang('total_weight')}:</td>
<td>{$cartweight|as_num:2}{$weightunits}</td>
<td></td>
</tr>
<tr>
<td colspan="5" align="right">{$Cart2->Lang('subtotal')}:<br>
<em>({$Cart2->Lang('infosubtotal')})</em>
</td>
<td>{$currencysymbol}{$carttotal|as_num:2}</td>
<td></td>
</tr>
{*if isset($formstart) && !isset($orders_simpleviewcart)} <- PAY ATTENTION!!
<tr>
<td colspan="7">
<input type="submit" name="{$submit_name}" value="{$submit_text}"/>
<input type="submit" name="{$actionid}cart_empty_cart" value="{$Cart2->Lang('empty_cart')}"/>
</td>
</tr>
{/if*} <- PAY ATTENTION!!
</tfoot>
</table>

{if isset($formstart) && !isset($orders_simpleviewcart)}{$formend}{/if}
{/if}
</div>

Cart2::View Cart Form-template, named "Cart2 Cart Form - Mail"

This template shows the Cart content in the FormBuilder mail. In most cases the template can be the same as the checkout one.

5. Pages (buttons in your navigation)

In the Content Manager you need to add some pages. For all of them disable WYSIWYG editor.

Shop
Cart
Checkout (not included in navigation and marked not-searchable!)

Shop-page

Add to the page content:

{Products}

Cart-page

Add to the page content:

{Cart2 action='viewcart'}

<a href="checkout" class="ProductsButton">Order »</a>

Checkout-page

Add to the page content:

{Cart2 action='viewcart' viewcarttemplate='Cart2 Cart Form - Checkout'}

{FormBuilder form='order_form'}

6. FormBuilder module

Main

Add the cart content to your email by adding at the bottom of your email template:

{Cart2 action='viewcart' viewcarttemplate='Cart2 Cart Form - Mail'}

Submission Template

When the order form is sent, the cart has to be emptied. This Smarty tag will take care of that. Simply add it to the submission template.

{cgecomm_erasecart}

7. Stylesheet

In this tutorial I added some classes. This stylesheet will give you a head start styling your webshop. (Note, the names might conflict with your existing stylesheets.)

In Design Manager you create a new stylesheet and copy/paste these lines in the content area. Attach the stylesheet to the websites design.

[[* +++ products module +++ *]]

.ProductsListItem {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: #ccc solid 5px;
}

.ProductsListItemClear { clear: both }

.ProductsFloatLeft { float: left }
.ProductsFloatRight { float: right }

a.ProductsButton, a:link.ProductsButton, a:visited.ProductsButton, button.ProductsButton {
display: inline-block;
padding: 6px 12px;
margin: 5px;
background: #f00;
color: #fff;
font-size: 0.875em;
line-height: 1.3em;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: none;
cursor: pointer;
}

a.ProductsButton:hover {
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
}

[[* +++ cart2 module +++ *]]

table {
width: 100%;
margin: 0 0 20px 0;
border-spacing: 0;
border-collapse: collapse;
font-size: 1em;
}

table th {
font-size: 1em;
font-weight: 400;
padding: 20px 10px 10px 10px;
border: none;
text-align: center
}

table td {
padding: 10px;
border: none;
}

table input[type="text"] {
border: #666 dotted 1px;
text-align: center;
}

Working example

Show related articles:

Comment Form

ReviewManager

Click here to open the form

ReviewManager

6 Comments

22-02-2023

Steve Hornibrook

It seems your E-commerce website is not ranking that well, so you are losing sales. Plus when I looked at your site, it could use more content that sells, which means your missing on even more sales.

Fortunately there is a new AI bot that can write the content for you for your site, and its fully optimized to increase your ranking as well, so you get double the sales effort!

you can see the magic of AI in here:

https://ai-copywriter.xyz/

Regards
Steve

address:101 center st ,Arlington,TX
avoid future marketing messages go here:

www.unsubsribe.xyz/

03-09-2022

Jacki Dobson

Hi

Barry here...

Have you tried the AI Copywriter? We love using it to automate email copy, blog posts, newsletters, and more.

Claim 10,000 free credits today at https://aicopywriter.app/

Cheers to your time back,

Barry

unsubscribe by visiting https://unsubscribemeplease.weebly.com/

06-03-2021

Vasyl

Is it possible to add quantity on hand?

06-01-2021

Stefan

:-) ... solved it ...

11-12-2020

Stefan

Sorry ... the add-to-cart button is missing ;-)

11-12-2020

Stefan

Hi there, thank you alot for this detailed tutorial. Works fine, but one thing i can not get to work: There is no "Order"-Button on the Produc Detail page ... maybe you can help :-). best regards, Stefan

Create a webshop in CMS Made Simple

Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.2.12
  Last updated: 29-10-2020
  Comments: 6
  http://cms.ms/pK57

Ads help me to help you! Buy products from these advertisers!