e-Commerce Module

Library Overview

Anupama Raju

Principal Program Manager

Dynamics 365 Commerce

Agenda Introduction to Modules

Configuring a module

Demo

Module Library

Introduction to Module Library

Commerce Architecture

Headquarters

Retail

Products

Loyalty

Promotions

Catalog

Employees

Channel mgmt

Assortments

Inventory availability

Order capture

Pricing

……

Customers

Inventory Mgmt Order Mgmt Procurement Supply Chain Warehousing HR/AP/AR/GL

External Services

Shipping

Tax

Gift card

Content

Management System (CMS)

Site Builder

C1 Store Persona C2 Shopper C1 Admin Persona Touchpoint

Commerce engine

Custom

Extensions

Merchandising

– Catalog, Inventory

Pricing,

Discounts,

Promotions

Customer,

loyalty

Employee,

Shifts

Order, Cart,

Checkout,

Wishlist

…

Commerce Runtime (CRT)

Modern POS Cloud POS

Surround

Apps

Surround Apps

Administration

Recommend

-ations

Ratings &

reviews

Fraud

Protection

Web Storefront

Web Storefront

Customer-facing website rendering system

Includes Module library which is a

collection of modules that provides a rich

set of out-of-box capabilities

E.g. Promo banner, Cart, Video player

Modules are building blocks of a page

Header

Cookie compliance

Promo banner

Navigation menu

Content block in a

Carousel

Text block

Modules

• Modules are built on the React.js framework, and uses a

combination of server-side and client-side rendering to deliver

responsive web experiences.

• Every module has an intent, in other words some business logic.

E.g. Render a product information, render an image with a link,

• Themes can be applied to the modules in the module library to

change their look and feel. E.g. Fabrikam theme.

• Highly customizable and delivers scalable solution for online

business

Configuring a module

Page outline WYSIWIG canvas Property panel

Modules can be configured with data

Modules can be configured

with data in property panel

E.g. Content Block can be

programmed with heading,

image, links etc.

Module can be data-driven

Modules can be data-driven by

Data Actions

JavaScript functions fetch and

map data using Commerce API

Engine.

E.g. Buy Box shows product

information

Data actions

Data actions offer improved performance through the following

features: Integrated application-level and request-level caches enable state sharing scenarios.

Built-in utilities support batching to minimize the number of external requests that your

application requires.

Automatic deduplication helps guarantee that multiple data action calls aren't duplicated.

Core set of data actions provided out-of-box

Highly customizable

Module properties

In addition to data, modules can have

certain properties that can be configured in

the module property panel.

These properties allow a site author to opt-

in to features

Tip: Use fragments if a module is used on multiple page

Tip: Refer to module documentation for available properties for each

module

Site Settings->Extensions

Additional configurations

Site settings determine a workflow for the entire site.

E.g. Inventory settings apply to the entire site and leveraged by multiple modules

These settings are defined in appsettings.json

Tip: When updating to latest SSK package, you must also

merge the appsettings.json file for the respective release.

Demo

Module Library

Module library

80+ modules available in module library

Can be broadly classified based on their usage as,• Container

• Marketing

• Header and Footer

• Product browse

• Product details page

• Shopping bag

• Checkout

• Find in Store

• Account management

• Compliance

• HTML head

Containers

• A module that hosts other modules

inside it.

• Define the layout of the modules that it

contains• Should modules within a region appear side by

side or below each other

• Should modules go full-bleed on screen or

maintain a gutter

• E.g.: Container, Container with 2-

column, Container with 3-column

E.g. Store locations

page

Container with 2-columns

Width set to 33% and 67% for

each column respectively

Hosting Store selector and Bing

Maps modules

Marketing

• Modules that allow you to show

promotional or marketing content

• Data configured within Sitebuilder

(CMS)

• Standalone modules, can be used on

any page

• Used on home page and storytelling

content on any page

Content block

Text block

Carousel

Video player

Promo banner

Iframe

Accordion

Tab

Header and

Footer

• Modules that define the header and

footer of the page

• Header allows multiple modules such

as Navigation menu, Search, Store

selector, Site selector, Mini cart,

Notifications etc.

• Typically configured as a page

Fragment in Site builder

Header

Navigation menu

Search

Site selector

Notifications

Mini cart

Footer

Footer category

Footer category items

Breadcrumb

Product

browsing

• Allows you to browse a set of products

• Search results: • Used on list pages

• Displays results from a search or category

browsing

• Includes refiners

• Product collection: • Displays a list such as Recommendations, Curated,

Related etc.

• Can be configured on any page with the

appropriate data source (list).

Search results

Product collection

Product details

page

• Modules used on the product details

page

• Buy box displays product information,

price and allows the user to add to

bag

• Buy box hosts several other modules

such as Media Gallery, Social Share,

Store selector etc.

• Allows user to Pick up in store.

• Buy box also leverages several site

settings – Order quantity, Inventory,

Add to cart etc.

Buy box

Media gallery

Text block

Social share

Product details

Store selecto

Reviews

Ratings histogram

Write review

Find in store

• Store selector module allows a user to

view and select a store for pickup. • Select a product for pickup in store

• View all stores associated with the channel

• Map module provides integration with

Store selector to show a map view.

• Can be used on BuyBox, Cart, Header

and standalone.

• Integrated with Bing Maps REST APIs.

HQ: Bing maps should be enabled in

Commerce Parameters with Bing Maps API

key.

Store selector

Map

Checkout pickup information

Shopping bag

• Displays items added to shopping bag

by the user

• Cart and Mini cart module

• Leverages several site settings – Order

quantity, Inventory etc.

Mini cart

Cart

Checkout

• Allows user to checkout and place an

order

• Includes several modules that capture

Shipping, Pickup, Contact info and

Payment

• Payment module supports Adyen and

Paypal payment connector

Checkout

Checkout section

Shipping address

Delivery options

Pickup information

Payment

Gift card

Gift card balance check

Loyalty

Terms and conditions

Contact

Order confirmation

Sign-up

• Allow you to sign-in or signup for an

account. Requires AAD B2C setup.

• Sign-in, Sign-up, Password reset,

Password reset verification,

• Allow you to signup for loyalty using

Loyalty sign-up module.

Account

management

• Allows user to mange their account

information

• Account management home page

shows a summary of the user/order

information

• Multiple pages/modules to provide

account/order details

Account generic tile

Account address tile

Account welcome tile

Account loyalty tile

Account wishlist tile

Order history

Order details

Wishlist

Account management shipping

address

Account profile

Account profile edit

Account loyalty

HTML head

modules

• Used in the HTML head of the page

• SEO optimization – Page summary,

Category page summary, Product page

summary

• Metatags for HTML output – setting an

icon for the page

• Script injection – Inline script, External

script

Additional resources

ADDITIONAL RESOURCES

ARTICLESModule library // aka.ms / modulelibrary

Dynamics 365 Commerce architecture overview // aka.ms / CommerceArchitecture

Setup an online channel // aka.ms / CommerceSetupOnlineChannel

E-Commerce site overview // aka.ms / CommerceECommerceSiteOverview

Online channel extensibility // aka.ms / CommerceOnlineChannelExtensibility

CONTACT Commerce Yammer Group // aka.ms / CommerceYammerGroup

Commerce Forums // aka.ms / CommerceForums

UPCOMING

TALKSDynamics 365 Commerce TechTalk Series // aka.ms / CommerceUpcomingTechTalkSeries

PAST

TALKS

Dynamics 365 Commerce Overview // aka.ms / CommerceTechTalkOverview

Dynamics 365 Commerce Architecture Overview // aka.ms / CommerceArchitectureOverviewTalk

Dynamics 365 E-Commerce Architecture Deep Dive // aka.ms / CommerceECommerceArchitectureDeepDive

Dynamics 365 Creating a new E-commerce Web Site // aka.ms / CommerceCreateECommerceWebSite

Dynamics 365 Set up a B2C Tenant for E-Commerce Site // aka.ms / CommerceSetupB2CTenant