Module Cart

This  module will add simple cart functionality to the Products module. Once installed, the Cart module will be automatically displayed in the detailed view of the product. The visitor of the website will then be able to put one or more products in the basket along with the desired quantity. There are other modules that you can use instead of the Cart module, like GiftBaskets. For our example Shop, it is enough to use the simple functionality of the Cart module.

Install the module Cart from the list of available modules in the Module Manager. The admin area of this module will be added to Extensions | Cart in the admin console of CMS Made Simple.

Time for action – connecting products and cart

If you now look at your Shop page and open a detailed view of any product, you will discover that there is still no cart functionality in it. The reason for it is that the Products module does not know that the Cart module has been installed and is ready for use. Let’s connect two modules.

1. 1. Open the admin area of the Products module (Content | Product Manager).
   2. Click on the Preferences tab.
   3. Select the Cart module from the field Cart Module.
   4. Click on Submit and open detailed view of any product. You should see the but on Add to My Cart in the detailed view of the product. If the product has some attributes additionally to the quantity field, then the attributes are displayed in a drop-down field besides it.

What just happened?

You have told the Products module what module has to be used for cart functionality. Test it and add some products to the cart right now. The products will be added, but there is no possibility to display the content of the cart for the visitor yet.

Create a new content page called Cart and add the following Smarty tag as the content of the page:

{Cart action="viewcart"}

Save the page, then open the admin area for the Cart module (Extensions | Cart) and switch to the Preferences tab. Select the newly created page in the list of pages, so that the visitor is automatically redirected to the page after he has added the product to it.

There are four templates that you can customize for the module:

Template	Description
AddToCart	This template controls how the quantity field, the button Add To My Cart (see the preceding screenshot) and optionally product attributes with price adjustment look like.
MyCart	This template is used to display the cart status. It is displayed at the place where the Smarty tag {Cart action=”mycart”} is placed. It shows the number of items currently saved in the cart and the link to the cart page.
Viewcart	This template is used for extended display of all products saved in the cart. It shows all products with their quantities and prices and the total order price. Additionally it offers the possibility to start the checkout order process if the module Orders is installed.
Product Summary	This template is used to format the output used for each product summary in the Viewcart template. It allows customizing the product label based on the attributes, product name, and price.

The Smarty tag {Cart action=”mycart”} can be added to the navigation of the website, like the link to the Basket in the official shop (http://www.cafepress.co.uk/cmsmadesimple) we are trying to reproduce. It would appear as shown in the following screenshot:

There is nothing else you should know about the Cart module. The next step will be to integrate the checkout process.

Module Orders

This module is designed for processing orders from the cart. This module handles billing and shipping addresses from the customer and either uses an external payment gateway (such as PayPal) to handle the payment process or performs manual e-mail-based invoicing. This module can also optionally collect credit card information and store it in the database for later offline processing.

Even if the module offers the possibility, never collect credit card information in a low security shared hosting environment!

The Orders module keeps track of all orders, and allows for the specification of items like tracking numbers and confirmation on numbers and sending e-mails to the customers related to a particular order.

The functionality of the module can be extended with even more modules that allow configuring different taxes, shipping costs, and promotion actions (like discount or promotion coupons).

This module has a lot of dependencies:

• CGExtensions
• FrontEndUsers
• Products
• CGSimpleSmarty
• CMSMailer
• CGPaymentGatewayBase

From this list of dependencies, you can learn that it is based on the functionality of the module FrontEndUsers. This means that your website’s customers must register before they can start the payment process on your online store. There is no possibility to turn off this registration process and it is required for the checkout step.

Install all modules listed in the preceding dependencies list, then install the Orders module.

Time for action – adding the checkout step

To enable the checkout process provided by the Orders module follow these steps:

1. 1. Create a new content page (Content | Pages | Add New Content) and name it Checkout.
   2. Add the following Smarty tag to the Content field of the Checkout page: {Orders}
   3. Save and view the page in the browser. This page will display either the billing form if the user is logged in or the warning message if the user is not logged in or does not belong to special user group.
   4. To connect the Cart module with the new Checkout page, in the admin console click on Extensions | Cart.
   5. Select the tab Viewcart Form Templates and click on the Sample template (or your own template, if you have created one).
   6. At the very end of the template in the Template Text field, add the following line of code:

      {cms_selflink page="checkout"}

The parameter page should contain the page alias of the page where the Smarty tag {Orders} has been added to the content.

1. Open your shop and add one or more products to the cart,find a link to the page Checkout at the very bottom of the screen.

What just happened?

You have connected the module Cart with the module Orders by placing a link from the cart view to the checkout process. To test the link, add some products to the cart and click the Checkout link at the bot  om of the cart view. If you are not logged in, you will see the following message:

The user is not logged in (or not a member of the required group)

This message can be found in the template of the Orders module. But first, let’s see an overview of the templates delivered with this module. In the admin console, click on Content | Order Manager and find the Templates link above the list of orders:

Template name	Template description
Billing Form	This template controls the first step in the order processing. It displays the form where the customer can enter billing address and one or more shipping addresses.
Payment Form	This template controls the second step in the order processing and is used to display the payment form for manual e-mail based checkout process. You will need this template if you do not use any payment services like PayPal, EMoney, EWay, or Authorize.net.
Confirm Order	This template controls the third step in the order processing and is used to display any information the customer entered in the first and optionally second step, so that the customer can confirm the shipping and invoice addresses or go back and correct them.
Invoice	This template is used in the admin area of the module Orders to print out the invoice or to send it via e-mail to the customer.
Gateway Complete	This template is used to display the status message after the payment has been made with any 3rd party service like PayPal, EMoney, EWay, or Authorize.net.
User Email	This template is used to customize the e-mail with order confirmation sent to the customer when the new order has been submitted.
Admin Email	This template controls the layout and content of the e-mail that is sent to the authorized administrator of the store when a new order is submitted.
Message	There is no sample template for the messages. Here you can define your custom e-mail notifications that can be manually sent to the customers from the admin area of the module. An example for such message can be an e-mail notification that is sent when the order is shipped.

Now, we know where to start and how to proceed with customizing of the templates according to our requirements and payment configurations. Let’s give the customer the possibility to register with or login to the website to be able to complete the checkout process.

Integrating the login screen

The message that indicates that the customer is not logged in is saved in the template Billing Form (the first step in the checkout process).

The user is not logged in (or not a member of the required group).

This is not very user friendly. Whether the user is registered or not we should give him a possibility to log in or to register on this page as shown in the following screenshot:

The login form for registered customers can be displayed with the module FrontEndUsers.

In the admin area of the Orders module, click on the Templates link and create a new template with the name My Shop on the tab. Scroll down to the very bottom of the suggested template text and the last ELSE condition:

...
{else}
 {* user is not logged in, gotta make him *}
 <h3 style="color: red;">{$Orders
>Lang('error_notloggedin')}</h3><br/>
{/if}

This is the place where the message that the user is not logged in is shown. Replace this section with the login screen of the module FrontEndUsers, as shown in the following code snippet:

...
{else}

<h1>Already registered?</h1>
{FrontEndUsers}
{/if}

Save the template and do not forget to set it as Default to see changes on the website. Registered customers can now log into start the checkout process.

But, what about customers who do not have an account? They should be able to register themselves with our website. As it gets a bit complicated I have created the following flowchart:

The billing form checks if the visitor is logged in or not. If yes, he can fill in the billing information; if not, the login form of the FrontEndUsers module (step 3) is displayed. The steps 4 and 5 in the workflow should assist new customers by allowing them to register. These steps can be accomplished with the SelfRegistration module. Read the next section to see how the module can be configured.

Before you continue be sure that:

• The CMSMailer module is configured and is able to send out messages
• There is a user property of type Email Address in the module FrontEndUsers (Users & Groups | Frontend User Management, tab User Properties).
• There is a user group that has the above user properties associated as Required (Users & Groups | Frontend User Management, tab Groups).

Integrating customer registration

This module is designed to allow visitors of the website to register themselves. It optionally sends a confirmation e-mail with an activation link that must be clicked before the registration is complete. Once the registration is complete, a user account is created in the module FrontEndUsers.

Install the SelfRegistration module from the list of available modules in the Module Manager. For the registration page, create a new content page Register and add the following Smarty tag into the content of the page:

{SelfRegistration group="Customers"} 

Pay attention to the part in bold in the above code. The value of the parameter group should exactly reflect the name of user group in the module FrontEndUsers (Users & Groups | Frontend User Management, tab Groups).

Open the Register page of your website and sign in yourself as a new customer with the SelfRegistration module to see how the module works by default. There are some preferences in the module that can make the registration process user friendly. In the admin area of the Self Registration module (Users & Groups | Self Registration Module), click on the Preferences tab.

The SelfRegistration module offers registration with an e-mail verification step or optionally single-step registration without any confirmation. If you do not need the e-mail verificafion, you should deselect the option Require the user to confirm registraion via email on the Preferences tab of the module. The three settings considering the final message work different depending on what registration method you have chosen.

Setting	With verification	Without verification
Don’t display the final message after registration	Prevents the registration form to be replaced by the confirmation message after the form is submitted.	Prevents the registration form to be replaced by the final message after the form is submitted.
PageID/Alias to redirect to after registration is complete	N/A	Redirects to the given page, but replaces the whole content of the page with the final message.
PageID/Alias to redirect to after verification step is complete	Redirects to the given page, but replaces the whole content of the page with the final message.	N/A

According to the workflow, let’s add a link to the registration page for the new customers (step 4). In the billing template of the Orders module, open the template for the Billing Form again, scroll down and add a link to the registration page for the new customers as shown in the following code snippet:

...
{else}

<h1>Already registered?</h1>
{FrontEndUsers}

<h1>New Customer?</h1>
{cms_selflink page=”register”}
{/if}

Pay attention to the parameter page. It should contain the alias of the page where the registration form is displayed. Customize the Registration Template 1 of the SelfRegistration module that displays the registration form. Generally, there are two templates. The first one is for the registration form and the second one (Post Registration Template) contains the message informing the customer that his registration should be confirmed through a link sent to his e-mail address. Other templates that you can customize are as shown in the following table:

Templates	Description
Registration Template 2	This template contains the form where the username, verification code and password will be added to complete registration.
Confirmation Email	Contains subject of the verification e-mail, the plain text and the HTML version of the e-mail sent out after the customer has registered.
Final Message	The message is shown to customer after the registration process is completed. To build the workflow suggested above (step 5) add link to the billing form in this template, so that the user can carry on with the checkout process. It is also advisable to tick the option Login user after registration, so that the login step can be skipped after registration.
Lost Email	This template contains a form for the customers that have registered but did not get verification e-mail. This template is shown at the place where the Smarty tag {SelfRegistration mode=”sendmoremail”} is shown.