MENU

Create a webshop in CMS Made Simple

  Previous article Next article  

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.

NOTE - This tutorial is work in progress.
Support me, for supporting you! Buy me a cup of coffee!

  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 (will enable CMSMailer)

 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}&nbsp;{$entry->price|number_format:2|replace:'.':','}</h4>
    <a href="{$entry->detail_url|lower}" class="ProductsButton float_right">More info&nbsp;&raquo;</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}&nbsp;{$entry->price|number_format:2:',':'.'}</h3>
  {Cart2 sku=$entry->sku}
{/if}
<a href="shop" class="ProductsButton">&laquo;&nbsp;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!

   

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

   

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

   

 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&nbsp;&raquo;</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'}

Form Template

...

   

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.

   

  Working example



  Comment Form

Click here to open the form


  0 Comments

No comments yet...

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Create a webshop in CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.7
  Last updated: 23-06-2018
  Comments: 0
  http://cms.ms/pK57

Advertisement



Ads help me to help you! Thanks!

Ads help me to help you! Thanks!

Ads help me to help you! Thanks!