Customers expect relevant, personalized, and assistive experiences. Having different storefronts, both online and offline, provide an engaging experience throughout shopping sessions. In this talk, we will show how Episerver can be used as a hub for integrating a physical store with an existing digital platform. You'll learn how to create a progressive web app and use web technologies like the Web NFC API and Payment Request API. We'll also present how you can hook everything up using Episerver's Profile Store and show you the power of the Service API and Content Delivery API.

1. DEVELOPING A
MODERN
STOREFRONT
- Episerver Meetup

2. 2
For Partner Close-Up only

3. We love innovation!
Patrick van Kleef
• “How ‘smart stores’ will improve the
customer
shopping experience”
• “Exploring the City of Amsterdam with Azure
Durable Functions and the Custom Vision
Service”
• “Use the power of Azure Functions and
Cognitive Services to collect Geolocation
information”
patrickvankleef.com
github.com/patkleef
Brian Weeteling
• “Trying out Docker: Containerized alloy demo kit”
• “Don't worry, take a shower. Automating my
mechanical ventilation”
• “Mozilla Web of Things: turning my home
ventilation
into a Web Thing”
brianweet.com
github.com/brianweet

4. “A storefront is a physical or virtual
store where customer can purchase
products”

5. 5
For Partner Close-Up only

6. DEMO

7. 7
For Partner Close-Up only

8. 8
For Partner Close-Up only

9. Progressive Web App
• Definition by Google
• Reliable - load instantly, load while offline
• Fast - respond quickly to user interactions
• Engaging - can give it a real app feel, full page, push notifications, background sync
• PWA is nothing special
• Focus on using best practices for web
• Enhance new browser without hindering old browsers
• Support on iOS since 2018
• HTTPS

10. 10
For Partner Close-Up only
File: manifest.json – web app metadata

11. 11
For Partner Close-Up only
File: _Layout.cshtml – register sw.js
File: sw.js – load workbox library

12. 12
For Partner Close-Up only
File: sw.js – page accessible offline / lie-fi

13. 13
For Partner Close-Up only
File: sw.js – offline tracking

14. Web NFC
• Examples of real life use cases
• Payment / debit card
• Public transport card
• Identity card
• Device to device communication
• Open standard for NFC communication
(W3C draft)
• Read from and write to NFC tags

15. 15
For Partner Close-Up only
File: write-nfc.ts

16. 16
For Partner Close-Up only
File: read-nfc.ts

17. Code example
17
For Partner Close-Up only

18. The future of standardized payments
• “Up to 80% checkouts on mobile contains a single product”
• Open payment standard for the web (W3C)
• Easy and consistent
• Fast purchase experience. Visitors don’t have to enter the same information for every
site.
• Consistency
• Accessibility, screen readers, font sizes, colors, etc
• Addresses and payment method stored in the browser (account)
• Supported payment methods
• Cards, Google Pay, Android Pay, Apple Pay, Samsung Pay, Stripe

19. 19
For Partner Close-Up only

20. 20
For Partner Close-Up only

21. 21
For Partner Close-Up only

22. 22
For Partner Close-Up only

24. Headless CMS - Service API
• Integrations PIM, ERP, other third party systems
• Features
• Bulk operations (content, catalog, media)
• Restful operations (catalog, content, order, customer)
• Install and configure
• Nuget packages
• Authentication

25. 25
For Partner Close-Up only

28. 28
For Partner Close-Up only

29. Profile store
• Features
• Collect authenticated and anonymous profiles
• Page view / event tracking
• Scope
• Segments
• Visitor groups
• Install and configure
• NuGet Packages
• EPiServer.Insight.Cms, *.UI
• EPiServer.Profiles.Client, *.Common
• EPiServer.Tracking.Core, *.Cms, *.Commerce, *.PageView
• <appSettings />

30. 30
For Partner Close-Up only

31. Thank You!
Patrick van Kleef
patrickvankleef.com
linkedin.com/in/patkleef
twitter.com/patkleef
Brian Weeteling
brianweet.com
untappd.com/user/brianweet
github.com/patkleef/DemoModernStorefront