It seems like you're using an older browser. Things might not work as expected.

Storefront AX uses Episerver digital platform to implement a retail online store created and configured in Dynamics AX Retail. Storefront AX uses the business logic in Dynamics 365 for Operations through the Retail Server, or Dynamics Commerce Runtime (CRT) in AX 2012 R3, to ensure that all retail features in Dynamics AX are available in the publishing site.

This article describes Avensia Storefront for Dynamics AX 2012.

Avensia Storefront consists of two components.

  • Avensia Storefront Integration Framework.
  • Avensia Storefront Starter Site.

The connector 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 start site has been created for demo scenarios and as a foundation for customer solutions. The start site reduces the investments needed to create an online retail experience since all e-commerce features already are implemented.

Avensia Storefront uses the business logic in Dynamics AX through the Dynamics Commerce Runtime (CRT) in AX 2012 R3, 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 AX.

All CMS features in Episerver are supported since Storefront Dynamics uses the standard framework of Episerver. This ensures that other solutions and add-ons in Episerver are supported.

Start Site Overview

The Storefront AX Starter Site has been created using Episerver based on Quicksilver[1]. 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 Storefront AX Starter Site.

The starter site contains all e-commerce features needed in a high performance online web shop. The features are using the Dynamics Commerce Runtime (CRT) for all business logic to ensure that all retail features in Dynamics AX are available in the online channel.

Storefront AX start site uses the Episerver Framework[2]. 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 Avensia Storefront.

[1] https://github.com/episerver/Quicksilver

[2] http://world.episerver.com/documentation/EPiServer-Framework/

The Starter Site

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

  • Start page
  • Category page
  • Product details page
  • Product kit details page
  • Cart page
  • Checkout page
  • Order confirmation page
  • Search result page
  • Register customer page
  • My pages
  • Order history page

The start page

The start page is the default landing page for the site. The start page consists of a header, a content area and a footer. This template is used for all pages in Storefront AX.

Avensia-Storefront-Start-page-1.png

Page header

In the page header there is a selection of Market. A market is defined in Episerver and used to group features in Episerver, such as campaigns. The market is a feature only used in Episerver. It is not used by Dynamics AX and the market information is not sent to Dynamics AX.

Languages are available from the channel definition in Dynamics AX. The default language is used by the site. The visitor can change language to any language available in the channel. Translations made in Dynamics AX will be used when the visitor selects another language.

The visitor can sign in and use the My Pages link in the page header. The visitor signs in on the same page that is used to register a new customer. My pages features are only available to users that are signed in.

Navigation is defined by the Navigation Hierarchy assigned the retail online channel in Dynamics AX. The navigation hierarchy is imported by Storefront AX Integration Framework to the Episerver Catalog. The web editor defines the navigation bar in the CMS editor by using the categories from the product catalog and links to content pages created by the editor.

Currency is defined for the channel in Dynamics AX and displayed in the navigation bar as the default currency. The currency is used for all prices and orders created. If more currencies are needed, an extension of the starter site is required.

Content area

The start page contains a carousel block with images created in the CMS of Episerver. Beneath the carousel there is a product list block. The product list block displays product information fetched from the product catalog in Episerver. That is information that has been imported by the Storefront AX Integration Framework.

A block is a visual or functional component that the web editor drags and drops on the web page to add features and content.

The content area is available for the web editor to edit with the Episerver CMS Editor to update and add new content to the page.

Page footer

The page footer is a placeholder of information normally displayed in a page footer. The page footer in the start site has no functions implemented.

The Category page

The category page filters the product catalog in the search engine for all products in a selected category. The result includes all products in sub categories. The category page uses the same page template as all other pages in the start site.

Avensia-Storefront-Category-page.png

Sort by

Products can be sorted by the selection made by the visitor. The sort options available are defined in the start site.

Filters

The products in the category can be filtered to narrow the result of the category. By default are sub categories of the selected category available as filters.

The Product Detail Page

The product page displays detailed information about a selected product. The product information is fetched from the Dynamics Commerce Runtime (CRT) and from Episerver. The product page uses the same page template as all other pages in the start site.

Please note that all information that are fetched from Episerver originally was imported from Dynamics AX by the Storefront AX Integration Framework. The information is stored in Episerver to make it searchable and to support commerce features of Episerver.

Information Source Comment
Product name Episerver Imported from Dynamics AX by Storefront AX Integration Framework.
Ranking Episerver Ranking is not stored in Dynamics AX by default.
Description Episerver Imported from Dynamics AX by Storefront AX Integration Framework.
SKU number Episerver The SKU number is imported from the RECID field of the product in AX.
Brand Episerver Brand is a dynamic attribute defined for all online retail channels in AX.
Variants Episerver Variants are defined in dynamics AX product information management module.
Price Commerce Runtime Price is calculated by the Commerce Runtime (CRT) and is depending on the logged in user and the agreements created in Dynamics AX.
Product images Episerver Imported from Dynamics AX Media Server, or any other source, by Storefront AX Integration Framework.
Relations Episerver Imported from Dynamics AX by Storefront AX Integration Framework.

Avensia-Storefront-Product-page.png

Variants

The variants of the product master are displayed in the combo box and available for the visitor to use. A variant may have an image of its own.

Relations

The relations displayed are defined in Dynamics AX in the Product Information Management module. The name of the relation defined in AX is used as entered in Dynamics AX.

Product kit page

A retail kit is displayed in a product page similar to the product page used for a product master. A product kit contains one or more components, and each component may have zero or more substitutions that the user can select.

Product-kit-page.png

The product kit page in Avensia Storefront start site

The kit product page is similar to the product page with the differences:

  • The kit information displayed is based on a product kit-class defined in Episerver, instead of the product-class used in the product page. A kit contains more information that is unique for the kit.
  • The kit contains one or more components. The components are displayed and populated with the substitutions that are defined for the component.
  • The product kit page does not display any relations even though there are relations defined in the product kit configuration.
  • The product kit page does not display any dynamic attributes, as the Brand attribute displayed in the product page.

The information displayed in the product kit page is:

  • Name. The product kit name as imported from Dynamics AX to Episerver. The selected language is used.
  • Rating. The rating is locally in Episerver and is not available in Dynamics AX.
  • SKU. SKU displays the RecId of the variant corresponding to the component combination selected. The SKU is imported from Dynamics AX.
  • Components. The components are displayed in one combo box each. The combo boxes contains the substitutions configured for each component.
  • Price. The price is calculated by Dynamics Commerce Runtime before displayed in the page, and when the user makes a selection of substitution. The price is depending on price rules defined in Dynamics AX. The price supports B2C and B2B, depending on logged in user and price rules.
  • Product images. Secondary product images are displayed as thumbnails. Images are defined in the Image attribute in the mandatory attribute group SharePointProvisionedAttributeGroup.

The Checkout page

All business logic involved in the checkout process is implemented by the Commerce Runtime (CRT) and depends on the setup of the retail online channel.

Avensia-Storefront-Checkout-page.png

The order Confirmation page

The order confirmation page displays the Sales Transaction created by CRT. The sales transaction will be converted to a Sales Order by Dynamics AX.

Avensia-Storefront-Confirmation-page.png

The Search field

The search field is implemented in the page header available in all pages in Avensia Storefront start page. The search field implements an auto complete feature with matching products and a link to their product pages.

Avensia-Storefront-Search-field-1.png

The Search result page

The search result page is similar to the category page. It uses the same logic and the same layout as the category page.

Avensia-Storefront-Search-result-page.png

Register Customer page

The customer page is used to register a new customer, and to let an existing customer login. The page is navigated to by the link in the page header used in all pages of the start site.

The customer registered is immediately created in Dynamics AX as a Person customer.

Avensia-Storefront-Register-customer-page.png

My Pages

My pages is a collection of pages with personal features for a logged in user. The Storefront AX My Page only contains two pages; the profile page and the order history page. The profile page is not implemented in Storefront AX and is merely a place holder link.

Avensia-Storefront-My-Pages.png

My Pages Profile page

The profile page displays the logged in visitor's profile information fetched from Dynamics AX. The visitor may edit and save the profile information. The Comemrce Runtime access Dynamics AX 2012 R3 HQ directly through Real Time Service calls.

My Pages Order History page

The order history page queries the Commerce Runtime (CRT) for order history of the logged in user. The order history can be expanded by clicking the order reference. The order details are then displayed on an order details page.

Any updates of an order in Dynamics AX are synchronized with the channel and displayed in the order history page as soon as it is available to the CRT. The actuality of the information is defined in Dynamics AX and not in Storefront AX.

Any orders created for the customer in another channel or in the Dynamics AX client interface are available in the order history for the logged in customer.

Avensia-Storefront-My-Pages-Order-history.pngAvensia-Storefront-My-Pages-Order-details.png