Best practices for e-Commerce customization

Sam JarawanPrincipal Program ManagersDynamics 365 Commerce

Agenda• Development environment

• Updating and Deploying

• Module and theme development customization options

• Performance

• Security

Development environment

• Tools & SDKhttp://aka.ms/CommerceOnlineChannelExtensibility

• Configure environment against1. Cloud hosted e-Commerce site2. Cloud-hosted Retail Server

Updating SDK/Module Library

• Check available/compatible versions in online docs• Commerce scale unit vs module library versions

• Update SDK/module library• Edit package.json file• Pull latest files ‘yarn’

• Build customization extension• ‘yarn msdyn365 pack’

• Upload and Deploy extension within LCS

Module customization options

1. Code free changes2. Custom theme development3. Data action override4. Clone a module library module5. Create a custom module

Code free changes

• Module configuration properties• Style presets• CSS overrides

Custom theme development

• Modify module CSS• Module view overrides• Module definition overrides• Override module library component

• Create a new theme• yarn msdyn365 add-theme THEME_NAME

• Copy (clone) the fabrikam theme• yarn msdyn365 clone fabrikam THEME_NAME

Data action override

• Module library modules use pre-existing data actions to fetch data

• Replace a provided data action with a custom data action

• Override the registered action by creating a new action with the same action ID

• Create a custom data action• yarn msdyn365 add-data-action custom-get-address

• Replace the default template code with your code

Clone a module library module

• Cloning will create a new copy of module• Will NOT pick-up future release changes• Pages will need to be re-configured to use new module

• CLI commandyarn msdyn365 clone MODULE_LIBRARY_NAME NEW_NAME

Custom modules

• Create a custom module using • yarn msdyn365 add-module MODULE_NAME

• Data Action Mocks• Page Mocks

Performance

• Viewport configuration• Minimize HTML/CSS/JS file sizes• Caching• Browser hint meta tags• Perf analysis

Viewport configurationTheme settings fi le: \ThemeName.theme.settings.json…

"content-block": {"properties": {

"full-width": {"friendlyName": "Hero","description": "Image on background with text overlay","type": "layout","properties": {

"image": {"friendlyName": "Hero Image Settings","description": "Image settings for the hero","type": "imageSizes","properties": {

"xs": {"width": 800,"height": 600

},"sm": {

"width": 1200,"height": 900

},"md": {

"width": 1600,"height": 900

},"lg": {

"width": 1600,"height": 700

},"xl": {

"width": 1600,"height": 700

}}

}}

},

Minimize HTML/CSS/JS file sizes

• Reduce JavaScript by excluding unused modules

/src/settings/platform.settings.json

{

“dataActionTimeoutInMs”: 4000,

“minClientChunkSize”: 30000,

“excludeModules”: ["<EXCLUDED_MODULE_NAME1>","<EXCLUDED_MODULE_NAME2>" ],

“namespaceExtentions” : [ ],

“enableChunkByModulePackage”: false,

“chunkingGroupPreference”: [ ]

}

Minimize HTML/CSS/JS file sizes

• JavaScript chunking (10.0.17)

/src/settings/platform.settings.json

{

“dataActionTimeoutInMs”: 4000,

“minClientChunkSize”: 30000,

“excludeModules”: [],

“namespaceExtentions” : [ ],

“enableChunkByModulePackage”: true,

“chunkingGroupPreference”: [

["module1", "module2”],

[ "module3", "module4"]

]

}

Caching

• Data action caching ship with default values• Custom data actions -> ensure you add cache settings

/src/settings/cache.settings.json

Browser hint meta tags VIA site builder

• DNS pre-fetch URLs• Tells the browser to perform DNS lookup on a page in the

background while the user is browsing• Once user clicks a link, the DNS lookup has taken place reducing

latency• Site builder – Site settings -> extensions

Perf analysis

• Ensure you do some basic perf analysis on main pages of site• Home page• Category • Product Detail Page• …

• Many free/paid tools available• Basic testing: Browser F12 debugger tools to see requests

Security

• Content security policy (CSP) support• Nonce support• Restrict e-com site form loading inside external website

ADDITIONALINFORMATION

ADDITIONAL RESOURCES

ARTICLESDynamics 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

Configure theme style presets // aka.ms / CommerceConfigureStylePresets

CONTACT Commerce Yammer Group // aka.ms / CommerceYammerGroup

Commerce Forums // aka.ms / CommerceForums

UPCOMING

TALKS

Dynamics 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