Setting up a new shop

Created by Vidar Langberget

There are two main ways of configuring the a new shop in Relatude. There is an automatic wizard that will create a basic shop setup. If you use Webforms, it can generate the needed templates. The other way is to do it manually. Both ways are shown below:

Adding a shop

Adding a new webshop to your Relatude installation is very easy. The first step is to make sure the e-commerce module is installed in your installation. The module is represented by a shoppingcart icon:module

 

If the module isn't installed, install the module from the Settings dialogue in the System module. 

When the module has been installed, go to the module. It is now empty. Go to the Actions menu, and select the "Add new shop" menu item to create a shop for the current site:

addshopwizard1

Clicking that menu item creates the shop and opens a wizard dialogue that can help you to automatically configure the shop.

NB! The wizard creates Webforms templates, so if you're using MVC, you should configure it manually.

You can also see a row of sub tabs inside the module, below the dialogue that contains the shop functionality:

addshopwizard2addshopwizard2addshopwizard2

If you rather would like to configure the shop manually, close the wizard. If not, go through the various steps. Depending on what you want, choose the appropriate section below: 

Shop setup wizard

The first step of the wizard asks you if you want to use the wizard, and if it should create some basic test data and add some basic css for the presentation of the test data:

addshopwizard2_1

 In the next step, you have to select the masterpage that you want to use as the basis for the e-commerce templates that the wizard creates. The wizard scans your website for masterpage files and displays all the options in the dropdown control:

addshopwizard3

Then you have to choose which content placeholder you want to use in the templates. The dropdown lists all the content placeholders in the selected masterpage. Click Next when you've selected the appropriate placeholder.

addshopwizard4

The last step of the wizard is to specify the folder that the wizard should create the templates in. The default suggestion is a Shop folder inside a Templates folder. When you have selected the correct folder, click the "Start automatic setup of shop" button:

addshopwizard5

When the wizard completes all the configuration, this dialogue pops up:

addshopwizard6

Assets created in the wizard

While it's convenient to use the wizard to configure the webshop, it's important to understand exactly what the wizard does. It's not any magic at all, just a set of simple operations. 

First of all, the wizard creates all the needed templates for your shop. If you used the suggested folder for template creation, the Templates/Shop folder should contain the following files:

wizardresults1

 The wizard also creates a template node for each of the template files (aspx files):

 wizardresults1_01

The shop itself has a number of settings that must be configured before it will work. Most of those can be found on the Settings tab. After the wizard has run, the following properties has been set:

wizardresults6

In order to configure a lot of the settings here, the wizard had to create a number of nodes:

  • Default currency (USD). Change to your own requirements
  • Shipping method - Replace or add any others you need
  • Payment method - Replace or add any others you need
  • Dashboard boxes - Create your own custom boxes if you need other information in the dashboard.
  • Setting up the checkout flow. This involves creating nodes and setting the templates for the shopping cart, checkout page, payment and shipping selection page and the order received page. This is just the default setup. The checkout flow can be completely customized, and single page checkout is fully supported.
  • The test products and product category.

 

The test products, product category and the nodes that make up the checkout flow are created in the site tree, directly under the Site node:

wizardresults1_1

Manual configuration

Setting up the shop manually isn't rocket science, but it involves a little bit of work.

From the previous section, we can summarize what we need to create in order to get the shop up and running. First you need to create the aspx files for the templates needed in the system. The following assumes you want to use the default steps in the checkout flow. If you want fewer or more steps, alter the steps below to suit your plans:

  • Product category template aspx file
  • Product template aspx file
  • Shopping cart page template aspx file
  • Payment & shipping template aspx file
  • Checkout template aspx file
  • Order received template aspx file

 

Well discuss the contents of the aspx files in the "E-commerce templates" article. If you want to get something up and running quickly, you can look at the e-commerce templates in the Explore Norway demo site. They are extremely basic, and should be easy to understand.

When you have created all the aspx files for the templates, you need to create the template nodes in Relatude to make them usable:

  • Product template node
  • Product category template node
  • Shopping cart page template node
  • Checkout template node
  • Payment & shipping template node
  • Order received template node

 

 You also need to create a few other types of content:

  • Shipping method - at least one
  • Default currency
  • Payment method - at least one

 

The last thing to do before creating the actual products and categories, is to set the relevant settings on the Settings tab of the shop module. Most of the settings are adding relations to the content you have created in the previous steps.