Table of Contents

From website to webshop

Welcome to the second tutorial in our introduction series for DynamicWeb 10. In this tutorial, we will show you how to go from the simple content website to a simple webshop.

In order to create a webshop using DW10, you need to get acquainted with two new areas of the application:

  • The Products area which is used to manage the product portfolio
  • The Commerce area which is used to handle e.g. order fulfilment and promotions

In addition to this, we will take a short look at a few paragraph apps - modules attached to a paragraph to do something specific, like showing a product catalog or a shopping cart to a potential customer.

We'll start with the beginning and create some products and show them in frontend.

Note

This tutorial builds on the simple content website you created during tutorial 1 and the BasicDesign repository made available.

Part 1: Commerce Context

When moving from a content website to a webshop, you have to do some initial configuration so that your solution knows which context to place things like products, prices, and orders in.

  1. Create a default currency - please remember to check Default in currency settings
  2. Create a default country - please remember to set the VAT-rate
  3. Open the website Ecommerce-settings and set the default language, currency and country for the website

These default values are important to set for each website, as they are used under the hood by many parts of the system and you will experience errors and crashes if they re not set.

Part 2: Products

When you open the Products-area, the first thing you see is the products dashboard and the left navigation for the Products area. In this tutorial, we will be working directly in SHOP1, the default channel all new solutions are born with. ProductArea

Product groups and products

The general idea with shops (and other channels) is that you create folders - called product groups - and place products in them. You can then publish that group structure to frontend, where the groups become e.g. categories in the webshop.

Create some product groups:

  1. Open the context menu for SHOP1 and click New ContextMenu
  2. Add a Name - make it a category like 'Cups' or 'Chairs' or whatever you want to sell in your webshop
  3. Click Save and close

As you can see if you click around a bit, product groups also feature a bunch of settings which may be useful later on, but don't bother with them now. Instead, repeat the process a couple of times so you end up with at least two product groups.

Next, create some products:

  1. Click on a group, then click the New product-button
  2. Fill in some of the product attributes:
    • Name
    • Number
    • Description
    • Price
    • Stock
  3. There are plenty of other attributes, but don't worry about them now, we will return to product attributes in a later tutorial
  4. Click Save and close

Repeat the process a couple of times so you have at least one product in each product group. Now, in real-world scenarios products are rarely created manually like this, but for the purpose of this tutorial, it will do.

Product index and queries

In order to have great performance in frontend when a solution has tens or hundreds of thousands of products, DynamicWeb 10 uses a Lucene-based engine to index product information. So, before you can show the products in frontend, you need to create a product index by following this guide.

After creating the index, create a simple index query returning all active products in 'SHOP1' on a solution: ProductsQuery

This query is used to fetch the products you want to publish to frontend. We will use it in the next section when configuring the product catalog app.

Finally, open the channel settings for SHOP1 and select the index to be auto-built whenever a product in SHOP1 is saved. Once this is done, any changes you make to products in SHOP1 will be immediately visible in frontend. autoBuiltIndex

Showing products in frontend

To show products on your website, you use a paragraph app called Product Catalog for ViewModel. You add this app to a paragraph somewhere in your content tree, then use the settings on the app to control which products to show and how to present them to the visitor.

To create the Product Catalog, follow these steps:

  1. Open the Content-area
  2. Use what you learned in the previous tutorial to create a new root level page called Products
  3. Add a 1-column row to it, then add a standard paragraph and call it Product Catalog
  4. Switch to the Advanced-tab and select the appOutput.cshtml template as the layout. This template only shows the output of the app you select, not any values entered in the basic paragraph fields
  5. Switch to the App-tab and select the Product Catalog for ViewModel app - then configure it:
    • Query: Select the query you created which returns all active products in SHOP1
    • Templates - List: Select the ProductList.cshtml template
    • Template - Details: Select the ProductDetails.cshtml template
  6. Click Save and close

Now, you didn't add a product image to your products - this is intentional, as we will be covering product attributes and enrichment in a later tutorial. But to make sure the product list looks alright in frontend, you should set a fallback value:

  1. Add an appropriate "missing product image" file to the Files/Images-folder on your solution, you can do this on disk or via the Assets-area
  2. Go to Settings > Areas > Products > Assets > Image Options
  3. Add the image as the Product default images - missing image MissingImage
  4. Click Save and close

Now, when you view the Products-page in frontend or backend, it should look something like this: ProductList

Important

At the time of writing this, there's a bug where we save the path to the default image to the wrong global setting. If you experience this error, you can fix it this way:

  1. Go to Settings > System > Global Settings
  2. Search for NoPicture
  3. Copy the value (a path) from the setting /Globalsettings/Ecom/Picture/NoPicture/Large to the setting /Globalsettings/Ecom/Picture/NoPicture/Large_path
  4. Click Save and close

Part 3: Cart & Checkout

It's usually not enough to show products to users - you want them to be able to add products to cart and check out too. In this section you will:

  • Create a shopping cart with a checkout flow
  • Create a payment method & shipping method
  • Complete an order

Creating a shopping cart

First things first - you may have noticed that the product list you created has an Add to cart button. In the template file - ProductList.cshtml - we use the Add-cart command to tell the system to add this product to cart when we click it, only - it doesn't do anything yet.

That's because we don't have a Shopping Cart app on the website yet, the component which receives cart commands, keeps track of the shopping cart contents, and handles the checkout process.

Create a shopping cart:

  1. Create a new page under the Products page - call it Shopping Cart
  2. Go to the Page settings and switch to the Advanced-tab:
    • Set the navigation tag to cart
  3. Add a 1-column row to the page, then add a standard paragraph and call it Shopping Cart
  4. Switch to the Advanced-tab and:
    • Select the appOutput.cshtml template as the layout
  5. Switch to the App-tab and select the Shopping Cart app
  6. In the app settings, use the Steps-section to create the checkout flow:
    • Create a step called Information using the Information.cshtml template
    • Create a step called Addresses using the Address.cshtml template
    • Create a step called Payment and Shipping using the PaymentShipping.cshtml template
    • Create a step called Checkout and check the IsCheckout checkbox, don't select a template
    • Create a step called Receipt using the Receipt.cshtml template
  7. Click Save and close

You may have noticed that we added a step called Payment and Shipping. This is the step where a customer chooses how to pay for an order and how/if they want it shipped to them. But we haven't created any payment or shipping methods yet, so that's the next step.

Payment & shipping methods

DynamicWeb 10 allows you to create payment methods and shipping methods which are then available for the customer to select in frontend (provided they are available in their country, of course).

A payment or shipping method may integrate with an external payment or shipping service. If it does, you need to have an account with them and each provider - the piece of software which handles the integration - needs to be configured accordingly. That is, however, outside the scope of this tutorial, and so we will create two unintegrated methods:

First, create a payment method:

  1. Go to Settings > Areas > Commerce > Order Management > Payment
  2. Click New payment
  3. Add a name - call it 'Invoice'
  4. Click Save and close

Then create a shipping method:

  1. Go to Settings > Areas > Commerce > Order Management > Shipping
  2. Click New shipping
  3. Add a name - call it 'Pickup in store'
  4. Click Save and close

If relevant, you can use the countries-tab to limit the payment method to only some countries, and the fees-tab to set up, well, fees.

Completing an order

Ok, so now everything is set up for you to complete a purchase from frontend:

  1. Open your website URL in frontend
  2. Open the Products-page and add some products to cart
  3. Click the shopping-cart icon in the navigation to see the cart
  4. Proceed through the checkout flow until you reach the receipt

And - that's it, you've completed an order!

Part 4: Order Fulfilment

Once an order has been completed, it will appear under the Orders-node in the commerce area - ready to be processed. OrderList

Processing an order in DynamicWeb means moving it through an order flow, a set of steps corresponding to a step in the order fulfilment process. A solution is created with a default order flow with some basic steps, but in real-world scenarios, you need to adapt the steps to fit with the fulfilment process of the customer running the webshop.

To change from one order state to another:

  1. In the order list, select one or more orders
  2. Open the action state and select Change flow and state
  3. Select an appropriate order state: OrderFlow
  4. Click OK

For each order state, you can set up notification emails to notify the customer or a key account manager that an order has been received. You can also create multiple order flows and select the default order flow in the channel settings for your channel, in this case SHOP1.

Read more about order management in DynamicWeb 10 here.

Next steps

This concludes the second tutorial in our introduction series for DynamicWeb 10. In this tutorial, we covered the following:

  • How to create currencies, delivery countries, and set the Commerce-context for a website
  • How to create product groups and products
  • How to create and configure a product index and a query
  • How to create a product list using the Product Catalog for ViewModel app
  • How to create a shopping cart with a checkout flow
  • How to create payment methods and shipping methods
  • How to complete an order from frontend
  • How to handle order fulfilment in the DynamicWeb 10 backend

So that's quite a mouthful! In the next tutorial, we will teach you how to go from a simple webshop like this to an integrated webshop.

To top