Overview of Avensia Storefront starter site for Dynamics 365 for Operations

The features of Storefront 365 Starter Site have been created as a fully functioning webshop with all common e-commerce features implemented. The purpose of the start site is:

A baseline to use in fit and gap analysis. Install the start site in the client environment using the client setup of a retail online channel, and let the client browse the solution as a step in a fit and gap analyse.
A demo environment where the partner or client can demonstrate e-commerce features.
A best-practice web shop that developers use as a foundation of the actual client implementation. Use the source code of the start site to develop a solution where all client requirements are included.

The business logic in the start site is e-commerce features common in both B2C and B2B e-commerce solutions. The business logic handles the web page features in Storefront 365, such as filtering the category page, displaying search result, displaying product information and similar content. All business logic regarding prices, discounts, customers and similar are handled by Dynamics Retail Server or Commerce Runtime for earlier versions of Dynamics 365 for Operations.

Storefront 365 aims for using business logic already available in the platforms. Blocks and controllers created for Storefront 365 relays call to appropriate platforms, such as the Retail Server and the Episerver Commerce framework. The controllers of Storefront 365 are extendable and replaceable if customizations are needed.

The Storefront 365 Starter Site is available for download in the Resource section of the partner web. The features are described as user stories for all functional requirements fulfilled by the starter site.

Storefront 365 consists of two components.

Integration Framework. Storefront 365 Integration Framework is made up of two main components. It’s the Stage Job and the Catalog Import Job. The jobs are scheduled and executed in Episerver and query the online channel for changes that are imported into Episerver.
Starter Site. Storefront 365 starter site is a fully functioning e-commerce site with all common e-commerce features implemented. It uses Dynamics Retail Server and Episerver features for the shopping experience. The starter site is used for fit-and-gap analyse and as a best-practice foundation to develop the final solution.

The catalog import job validates, transforms and moves the information of a published retail online channel into Episerver. The start site uses the channel information in a fully functioning online shop.

The starter site has been created for demo scenarios and as a foundation for customer solutions. The starter site reduces the investments needed to create an online retail experience since all e-commerce features already are implemented. Storefront 365 uses the business logic in Dynamics 365 through the Dynamics Retail Server and uses the standard features of Episerver CMS and Commerce. There are no customization or encapsulation of the business logic. This ensures that the retail online channel supports all retail business logic defined in Dynamics 365. All CMS features in Episerver are supported since Storefront 365 uses the standard framework of Episerver. This ensures that other solutions and add-ons in Episerver are supported.

Storefront 365 is distributed as NuGet packages from Episerver. This ensures that the developers of a Storefront 365 solution always will have access to the latest versions and that they are compatible with the solution. Storefront 365 starter site is available for download on Avensia Storefront partner site. The download includes all source code for the starter site and its features. Episerver is included in the solution as NuGet-packages that are automatically downloaded by Microsoft Visual Studio when the starter site solution is loaded.

Storefront 365 Starter Site Overview

The Storefront 365 starter site has been created using Episerver Quicksilver. Quicksilver is a best-practice e-commerce solution distributed as a part of Episerver Commerce. This ensures that all Episerver partners are well aware of the architecture and the source code of the Storefront 365 starter site. The starter site contains all e-commerce features needed in a high-performance webshop. The features are using the Dynamics Retail Server for all business logic to ensure that all retail features in Dynamics 365 are available in the online channel.

Storefront 365 starter site uses the Episerver Framework. Episerver Framework is the foundation that all Episerver products are using. The framework ensures that the CMS and Commerce features in Episerver are fully supported by Storefront 365. The Storefront 365 solution includes Episerver core components are NuGet packages and restores the dependencies to guarantee that the latest Episerver version is used.

The Storefront 365 Starter Site

This is a brief summary of the pages and features of Storefront 365 starter site. The starter site contains by default the following pages defined as pages with page types and templates in Episerver:

Start page. The default landing page of the starter site. Also, the page where web site specific properties are set.
Category page. Filters products part of a specified category. The page includes filtering options for the visitor.
Product details page. Displays all details of a product. Includes functions to add to cart and add to wish list.
Product kit details page. Similar to a product detail page but with the additional features to display a kit and its components and to let the visitor select substitutions for the components.
Check out page. The full checkout flow of a shopping cart.
Order confirmation page. Confirms the submitted order. There is one confirmation page for logged in customer, and a similar page for guests.
Search result page. Displays a search result when the visitor searches the web site for products. Looks and feels like a category page.
Store page. Displays all stores on a map with links to a store-specific page.
Promotions page. Displays all discounts active in the online retail channel. Includes a link to a Promotion Page.
Promotion page. Each promotion is clickable to display more information about a specific discount and the products that are included in the discount.
Login customer page. Log in the customer using its username and password.
Register customer page. Registers a new customer and creates a customer entity in Dynamics 365 for Finance and Operations, and creates an account in Azure Active Directory B2C.
My pages
- Order history page. Displays all sales orders and sales transactions of the logged in customer.
- Change password page. The logged in customer changes its password.
- Wishlist page. Displays a wishlist with its content. Includes features to add items to the shopping cart and to remove items from the wishlist.

Identity Provider

The starter site uses Azure Active Directory B2C identity provider by default. The identity provider is used for all user accounts for registered users. The identity provider is queried for the customer and responds with a token that guarantees that the user is validated and authenticated. The token is used by Storefront 365 starter site and Dynamics Retail Server in subsequent calls.

If a visitor is not logged in are all calls to Dynamics Retail Server without security token, which is interpreted as an anonymous user. Retail Server then uses the default customer of the retail online channel.

NOTE!

The default implementation of the OAuth 2.0 framework does not implement redirection. This means that there is no call-back from the identity provider where the user may enter credentials and permit the web site to use its account. This is mandatory if Facebook, Google or any other single-sign-on feature will be used. There is no support for OAuth 2.0 in Dynamics AX 2012 R3.

Search Engine

Storefront 365 starter site supports any search engine that is supported by Episerver. The starter site is distributed with Episerver Find search engine as the default implementation. The search engine supports:

Queries that the start site uses when web pages are rendered.
User search with autocomplete feature in the web site.
Facets used for filter groups in category page and search result page.
Returns search result in relevance order.

The search engine is indexed from Episerver CMS Admin interface using one of two Episerver jobs. The indexing jobs are by default only indexing the product catalog in Episerver Commerce Catalog. Any changes made in the catalog, by Storefront 365 Integration Framework, or any other source, must be indexed in the search engine before it is exposed in the web site. There is an administration web page available in Episerver Administration for the Episerver Advance search engine used by the Storefront 365 starter site.

During a client implementation project will the search engine be indexed with more information than the product catalog information. In most cases is the search engine indexed with images, categories, product information and CMS content. It is commonly redundant information in the search index to allow the web sites to get instant access to the information without having to do lookups in the database.

NOTE!

A common mistake made with Storefront 365 is that product information is updated in Dynamics, and imported to Episerver using Storefront 365 Integration Framework but it is not available or visible in the web site. That is because the search engine wasn’t indexed after the product information was imported to Episerver. The web page rendering queries the search engine for information, and if any product information is missing in the search index will it not be available in the site. Episerver Advance incrementally updates the search index directly when triggered by the product catalog. There is an Episerver job included in Storefront Tools that may be used to manually start the index update if large updates of the product catalog have been made.

Merchandiser Software

Merchandiser software is a service that uses the behaviour of the visitors on the web site to determine what information is relevant to display. The relevance is based on the behaviour of the visitor but also on statistics of the sales orders. Storefront 365 starter site uses Episerver Perform for product recommendations.

The merchandizer algorithm is, of course, a well-hidden secret in the service used, and differs between the actual product used, but it is often based on parameters such as:

The visitor behaviour. What the has visitor clicked on, searched for, viewed.
Statistics. How the visitor order history looks like.
All visitors. The behaviour and statistics of all visitors are included in the calculation.
The web site structure. The controls and components used in the web site are ranked by the merchandizer based on where in the structure it is clicked. The distance to the sales order is one of the factors used.
Cart content. The items that have been added to the cart.

The merchandizer is used for:

Sort order. Displaying product lists in a sort order where the most relevant products are displayed topmost.
Banners. Displaying banners that are relevant to the visitor based on the order history and cart content.
A/B testing. The merchandizer displays two or more components, such as banners, and determines which one that makes the highest conversion. The best component is then displayed more often than the others.
Recommendations. The merchandizer creates recommendations that are displayed as product lists on the web site. The recommendations are not only based on statistics but also refined with relevance. It is not the product that sells most that are the most popular – it could be a consumable. Often used recommendations are:
- Those who bought this also bought.
- Those who viewed this also bought.
- Most popular products.
- Panels. Panels are virtual containers that are filled with products. The products are added in the most relevant order. The panels are displayed in the most relevant order on the page. The panels are not visual objects but are displayed by the web site in an appropriate way.

The Start Page

The start page is a landing page that is used when the visitor navigates to the root of the web site. The start page is most often used to attract and inspire the visitor of the web site, so it finds products that it is looking for and is interested in.

In Episerver, the start page is a web page created as a page type of Start Page Type. The start page is the topmost page node in the web site hierarchy and must be created directly in the root node. The start page contains three content areas that the web editor uses to create content. The web editor will drag and drop Blocks with features and content into the content areas.

The Content Tab

In All Properties view, there is a Content Tab that is used to configure the start site.

Start title

The property is used to set a title of the start page. The title is displayed in the web browser title. The default title is Avensia Storefront. The start page title is only displayed for the start page. For all other pages in the web site is the page title for each page displayed.

Title Format

The property Title Format is used to set a format of the page title of all pages except the start page. The format is a string where the placeholder {title} is used where the actual page title should be displayed.

Example

For the category page displaying products in the category Computers will the page title be Computers. The default value of the format string is an empty string. An empty string will display the page title without any formatting.

The format string of the page will behave like the following examples.

Expression

Result

{title} – Avensia Storefront

Computers – Avensia Storefront

ASF – {title}

ASF - Computers

Right Menu

The Right Menu is used to display a shortcut menu in the start page top right corner of the page header. In the web site, it is referred to as the top right menu. The content of the menu can be edited by the web editor by editing the Start Page properties. The top menu is used as an extra navigation feature for specific features in the site. The option to sign in or sign out from the web site is part of the Right Menu and can’t be edited. The page must be published before the menu is displayed. The Right Menu can’t be previewed.

Main Menu

The main menu is a CMS block that is statically placed in the page header of the web site. The main menu bar is displayed in all pages of the web site but is not available as a block type to be used by the web editor. The web editor may, however, configure the main menu in the same way as it configures any block. The main menu is configured on the start page. The start page is the only place where the main menu can be configured. The configuration of the main menu includes adding, editing, moving and removing menu items that will be displayed to the visitors. The main menu is edited in one of two ways as any block in the CMS Editor.

Click the block. The menu bar items dialogue is opened.
View the All Property page of the page. The main menu dialogue is displayed as a part of the start page properties.

NOTE!

In the start site for Dynamics AX 2012 R3 is the main menu bar only editable through the All Properties page of the start page. There is no block frame in the R3-version of the start site.

The navigation bar is edited in the property page of the start site. In the dialogue are all menu items displayed and the web editor may add, remove, edit or move the items in the menu.

Adding. Add a new menu item by clicking Create a new link. A dialogue is opened where the new item is defined by the web editor.
Moving. Drag and drop the items in the dialogue to the sort order required.
Editing. Click the context menu in the rightmost side of the item to edit, and select Edit. The menu item dialogue is opened and the item may be edited.
Remove. Click the context menu in the rightmost side of the item to edit, and select Remove.

The menu items in the main menu have a destination of a specific type.

Page. The menu item will redirect the visitor to a page within the web site. The page must exist before the item is added to the menu. The page is selected using the browse button.
Media. The specified media from Episerver Assets Manager is opened and exposed to the visitor. The media must exist before the item is added to the menu. The media is selected using the browse button.
Catalog content. The visitor is redirected to a category page that displays all products in the category selected for the menu item. The category is selected using the browse button. The category hierarchy is fetched from the Episerver Commerce Catalog, that has been created by Avensia Storefront Connector using the Navigation Hierarchy setup for the channel in Dynamics.
E-mail. A new mail is created using the mail address defined for the menu item. The visitor’s default mail client is opened. This type of menu item is not implemented by Avensia Storefront Start Site.
External link. The visitor is redirected to an URL with a destination outside the web site. This type of menu item is not implemented by Avensia Storefront Start Site.

NOTE!

The link types E-Mail and External Link are not implemented by Avensia Storefront and will not be displayed in the main menu if created. The catalog content may include actual products and variants. Avensia Storefront Start Site has only implemented category menu items. Not product or variant menu items.

Site Structure Tab

The Site Structure Tab in the Start Page properties page is used to define standard pages used in Storefront 365 Starter Site. The pages are used by features in the starter site and must be configured with existing web pages in the site before the starter site can be used.

Checkout Page

The checkout page is used by the Mini Cart and the Notification Bar when the visitor clicks the link “To Checkout Page” in the web site.

Login and Registration Page

The page is used by the page header and by pages that require a logged in visitor, such as My pages. The Login and Registration Page includes both features for login and for registration.

Search Page

The Search Page is used when the visitor enters some search criteria in the search text field in the page header and press the Enter key. The search Page displays the search result of the search criteria.

Stores Detail Page

The Stores Detail Page is used when a visitor clicks a store in the Product Detail Page or in the Stores page. The Stores Detail Page displays the store information for a specific store including a pin on a map.

My Pages

My Pages is a collection of pages with self-service features for a logged in visitor. My Pages consists of Profile Page, Password Page, Order History Page and Wish List Page.

Wish List Page

The wish list page is used to display the wish list content for a logged in visitor. The wish list page is accessed through My pages or through the Notification Bar displayed when the visitor adds an item to the wish list.

Forgot Password Page

The Forgot Password page is used when the visitor clicks the link “Forgot password” in a login form in the starter site. The forgot password page will ask for the visitor’s mail address and send a mail with a link where the password can be reset.

Customer Link Activation Email Page

The Customer Link Activation Email Page is a landing page used by Storefront 365 Flow endpoint when a Microsoft Flow sends a request to Storefront 365. The default implementation of Flow is used for customer registration where a new customer in Dynamics 365 is added as a user with username and password in the identity provider.

The Category Page

A category page is a page that queries the search engine for products that are assigned to a specific category. The category requested is based on the main menu item used when the category page is loaded. The category page loads all products in the category and includes all products in all levels of subcategories in the selected category, by default. The loading is paginated into 20 products per page. New pages are loaded when the visitor scrolls down the product list. This feature is called Infinite Scroll.

The products in the category are fetched from the search index and enriched by the information available in Episerver Commerce Catalog. There is no call to Dynamics Retail Server or Commerce Runtime to fetch product information. All information needed is available in the search index and in Episerver Commerce and Assets Manager.

The category page template is also used for the search result page. The search result page will have the same features and design as the category page.

The category page loads and displays 20 products. There is a button to fetch the next 20 products in the selected sort order in the bottom of the page.

Sort order

The products in the category page are displayed sorted after popularity. It is an example of a sort order that can be selected by the visitor.

Popularity. The sort order is not implemented by Avensia Storefront Start Site since there is no data about popularity available. Using a merchandizer in a client implementation will enable for a sort order based on relevance.
Price. The products are sorted incremental based on the default price. The default price is calculated by Avensia Storefront Connector when the products are imported to Episerver. For each product in the import process is Retail Server, or Commerce Runtime for Dynamics AX R3, called to calculate the price for the default customer of the channel. The default price is loaded into the search index and used for sorting.
Newest First. The products are sorted incremental based on the date and time when the product was imported into Episerver.

Filtering

The products in the category page can be filtered by the visitor by selecting one or more options from the filtering group displayed in the leftmost column of the category page. By selecting one or more filters is the product list limited to the categories selected. The filtering is a server-side filtering feature with a roundtrip to the web server every time the visitor selects a filter option.

The filtering is managed by Storefront 365 and Episerver without any connection to the Dynamics Retail Server or Commerce Runtime.

In Storefront 365 starter site is the filtering group implemented as a filter group with the subcategories for the category displayed in the category page. For each filter, option is the number of products matching the option displayed. The group is created dynamically for the category selected. No configuration is needed.

NOTE!

In client implementation, attributes that are assigned to most of the products in the product listing are candidates for filtering. This kind of filtering is called faceting and is a feature that is implemented by the search engine used in the solution. The dynamic attributes that are assigned to the categories in the Product Information Management module, and inherited to the products in the categories, in Dynamics are often facets in filter groups.

The filters in the filter group are fetched from Episerver Commerce Catalog.