E-commerce templates

Created by Vidar Langberget

Developing templates in Relatude e-commerce is very easy, and is more or less the same as developing templates in the CMS.

Introduction

The e-commerce module uses the same template system that underpins the rest of the products running on top of the Relatude Adaptive Framework, WAF. There are no restrictions on design at all. If something is possible to achieve in html/javascript/css, you're able to do the same thing in Relatude.

So developing a template in the e-commerce solution is exactly the same as developing a CMS template, except that you have to support the operations needed on an e-commerce site. For example, a method to add the current product to the shopping cart, or listing the contents of the shopping information are e-commerce specific functionality. 

You can use both Webforms and MVC to develop e-commerce templates. There is more functionality out of the box for Webforms from controls that ship with solution than for MVC, but you get access to the exact same API that the controls in Webforms use to develop your MVC solution.

Webforms templates

Initial releases of the e-commerce solution only supported Webforms, so there are several server controls shipping with the solution, that makes it very easy to create e-commerce solutions.

In the ethos of the whole Relatude platform, the e-commerce server controls are fully templated controls that give you total freedom over the look and feel of the controls.

The solution contains three main controls that can be used to create a lot of the frontend functionality needed:

 

ShoppingCartDetails control

The ShoppingCartDetails control is used to display the contents of the shopping cart in a template. It can be easily customized to your needs. It displays the order items and 

 

ShoppingCartStatus control

 This control is used to display the summary of the contents in the shopping cart, usually on all pages in the shop.

 

AddToCart control

This control is used to add a product to the shopping cart. If you add the control to the template used by a product the control understands which product to add to the cart. It it is used on a page with multiple products or a page that isn't a product, you need to specify the nodeid of the product that should be added to the cart when the button is clicked. You can have as many instances of this control as you want on the same page. Just set the NodeId property to a different value for each of them.

MVC Templates

The Relatude E-commerce module supports MVC, but rather than using the Webform controls, you need to talk directly to the API and data model, and handle all rendering yourself. There are a few methods you need to use to build an MVC e-commerce solution:

 

Get cart (order node)

In order to create a shoppingcart and related views of the cart, you need to fetch the cart (it's an Order node, but with status set to "Basket"). The easiest way to fetch it is to use the static class WAFShopHelper. It has a method called GetCurrentOrder():

public static Order GetCurrentOrder(HttpRequest request,HttpResponse response)

 

Add product to cart

There is a Webforms control that can add a product to the cart. In MVC you have to call the API function to do it. There are a few variants of this method:

public static int AddProductToCart(int productId, int quantity, Guid orderGuid, int userId)

 

This is the most commonly used version of the AddProductToCart method. It returns the node id of the OrderItem node that was created to store what was added to the cart.

public static int AddProductToCart(int productId, int quantity, Guid orderGuid, int userId, List<CartBundleOption> selectedBundleOptions)

 

Relatude E-commerce supports bundles. Bundles can have a number of bundleoptions. This method can be called if you want to add a product bundle to the cart.

public static void AddVariablePriceProductToCart(int productId, double priceIncVat, Guid orderGuid, int userId)

 

Relatude also supports what we call variable price products. Variable price products are products with no set price. This can be used for donations for example, of a user defined amount. The product could for example be "Donations for Hurricane Cathrina", and marked as a variable price product.

Get current shop

Sometimes you need to lookup some settings on the shop. Since Relatude supports multiple shops in one installation, you need to fetch the shop in the site you're currently on. The easiest way to do that is the following method:

WAFShopHelper.GetCurrentShop()

 

Get current currency

Relatude E-commerce supports multiple currencies in one shop. But only one of them can be used at a time for a given user. That means a session has to have currently used currency. WebShopHelper contains a method to return the correct currency:

WAFShopHelper.GetCurrentCurrency();