$30 off During Our Annual Pro Sale. View Details »

Introduction to SXA Storefront

RobEarlam
October 17, 2017

Introduction to SXA Storefront

RobEarlam

October 17, 2017
Tweet

More Decks by RobEarlam

Other Decks in Programming

Transcript

  1. Introduction to
    SXA Storefront
    Presented by
    Rob Earlam
    Søren Kerrn
    1
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  2. 2
    ”We provide an out-of-the-box commerce
    storefront built on the Sitecore Experience
    Accelerator (SXA) framework.
    Our SXA Storefront allows brands to quickly deploy
    cloud-based and on-premise storefronts with 40+
    commerce specific component out-of-the-box.”
    Elevator Pitch
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  3. 3
    SXA Storefront technology stack
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  4. SXA Storefront demo
    • Storefront live
    • Storefront scaffolding
    • Storefront at design time
    • Building a landing page
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    4

    View Slide

  5. Architecture and
    extensibility points
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    5

    View Slide

  6. 6
    SXA Storefront solution layers
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    Project
    Feature
    Foundation

    View Slide

  7. 7
    • Storefront Context
    • for multi-site support
    • And access to Commerce Control
    Panel settings
    • Communication
    • Between components on client
    side
    • with Commerce Engine through
    Connect
    Commerce Foundation layer - responsibilities
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    • Catalog management
    • Catalog item resolving from URL
    • Generation of catalog URLs
    • Caching of data
    • Infrastructure
    • Provider interfaces and default
    providers
    • Base classes
    • Handling of exceptions

    View Slide

  8. 8
    Commerce Foundation layer – Client side services
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    Application/Services
    Foundation
    Features/
    components
    Broker
    /service

    View Slide

  9. 9
    On product detail page – publisher subscriber pattern
    1. Product variant selection
    2. Add-2-cart
    Commerce Foundation layer – Inter-component communication
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    Features
    Broker

    View Slide

  10. 10
    • IoC magic
    • Rendering models and JSON models
    • Repositories
    • Managers
    • Providers
    • Methods are public virtual except on controllers for easy override
    Extensibility points
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  11. 11
    • Providers
    • Checkout provider
    • Model provider
    • Variant Definition provider
    • Item type provider
    Extensibility points continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  12. Technical demo
    Example of how to create custom commerce components for
    commerce 9 and SXA Storefront
    12
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  13. SXA Storefront benefits
    What is it we provide and how can
    you take advantage of it!?
    13
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  14. 14
    • SXA
    • Parallel site co-production
    • Pre-built components
    • Wireframing mode for building sites before design
    • Theming - export and import visual designs
    • Multi-tenancy support
    • Built on modular architecture principles (Helix)
    SXA Storefront benefits
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  15. 15
    • Commerce
    • 40+ pre-built components
    • Storefront accelerator solution - full B2C – with 2 themes
    • Based on Sitecore Commerce 9
    • Benefits from the analytics features coming with commerce for xDB
    SXA Storefront benefits - continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  16. 16
    Commerce specific: 43 page events, 4 goals and
    2 outcomes
    Commerce personalization conditions
    1. Cart Total condition
    2. Total Product Quantity condition
    3. Specific Product Quantity condition
    4. Current Product Stock Count (by Location)
    5. Current Product Stock Status (by Location)
    6. Specific Product Stock Count (by Location)
    Commerce artifacts and personalization rules
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  17. 17
    3 engagement automation plans with custom conditions and actions:
    1. Abandoned Cart
    2. Products Back In Stock
    3. New Order Placed
    Commerce Components: Default campaigns
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  18. 18
    Commerce Components: Abandoned Cart campaign in SC9
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    Marketing automation in SC 9

    View Slide

  19. 19
    1. Orders
    2. Products
    3. Missed sales opportunities
    4. Abandoned carts
    5. Shopping cart activity
    Commerce Components: Experience Profile reports
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  20. 20
    Commerce reports for Experience
    Analytics
    1. The Orders report
    2. The Campaigns report
    3. The Products report
    4. The Categories report
    5. The Customers report
    6. The Shopping cart activity report
    7. The Filtering and sorting report
    8. The Regional settings report
    9. The Internal search report
    10. The Payment and shipping report
    Commerce Components: Engagement Analytics reports
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  21. 21
    Product Roadmap
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  22. 22
    • Two Sitecore packages (WDPs)
    • Commerce Foundation and commerce feature components
    • Storefront + themes
    • Installation Guide
    • Component documentation
    • Description of the individual components and their control properties
    • SXA Storefront Guide
    • Description of the functionalities and page types as well as configuration options
    • Developer Guide
    • A FAQ
    Deliverables for the Commerce 9 Symposium release
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  23. 23
    • A supported product
    • Pricing
    • SXA Storefront comes at no charge
    • Selling
    • SXA Storefront will be included in the Sitecore Commerce 9.0 product release
    Support, Pricing and Selling
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  24. FOR DISCUSSION PURPOSES ONLY. Sitecore Confidential
    and Proprietary. © 2017 Sitecore Corporation A/S. All rights
    reserved. Sitecore® and Own the Experience® are registered
    trademarks of Sitecore Corporation A/S. All other brand and
    product names are the property of their respective owners.
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    24

    View Slide

  25. 25
    Meet the team
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  26. Appendix slides
    Component behavior in design vs
    runtime mode
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    26

    View Slide

  27. 27
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  28. 28
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  29. 29
    Azure PaaS Support
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    • Provision Sitecore Commerce in Azure with very little
    effort
    • Seamless integration with Azure resources
    • Use standard Azure tooling
    • Ability to push content and develop customizations
    • Options for
    • Deploying with an empty catalog
    • Deploying with our catalog populated for easy test drives

    View Slide

  30. 30
    Design-time behavior
    and look-and-feel
    differs from runtime
    Lorem ipsum text and
    mock images
    A comp. must always
    be visible at design
    time
    Design time behavior vs runtime
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  31. 31
    Product list comp –
    showing mock images
    and text
    No category or search
    result given
    Design time behavior vs runtime continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  32. 32
    When navigating to a
    category – Product list
    will show actual
    products
    Same for Childcategory
    Navigation
    Design time behavior vs runtime continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  33. 33
    When navigating to a
    category – Product list
    will show actual
    products
    Same for Childcategory
    Navigation
    Design time behavior vs runtime continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  34. 34
    At design time
    • Add-2-cart is
    disabled
    • Variant is active ->
    price and inventory
    will update
    Design time behavior vs runtime continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  35. 35
    At design time:
    Forms cannot be
    submitted– buttons
    are disabled
    Category links and
    search box works
    Design time behavior vs runtime continued
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  36. Appendix slides
    Q&A session material
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    36

    View Slide

  37. 37
    • Commerce Account
    1. Address Editor
    2. Address List
    3. Change Password
    4. Forgot Password
    5. Login
    6. Profile Editor
    7. Profile View
    8. Registration
    • Commerce Cart
    1. Add-To-Cart
    2. Mini Cart
    3. Shopping Cart Lines
    4. Promotion Code
    5. Shopping Cart Total
    • Commerce Catalog
    1. Product List
    2. Product List Header
    3. Product List Pager
    4. Product Facets
    5. Product Images
    6. Product Information
    7. Product Inventory
    8. Product Price
    9. Product Variant
    Commerce Components: 40+ components to drag’n’drop
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.
    • Commerce Catalog (continued)
    ▪ 10. Category Navigation
    ▪ 11. Subcategory Navigation
    • Commerce Checkout
    1. Billing
    2. Confirm
    3. Delivery
    4. Order Confirmation
    5. Start Checkout
    6. Step Indicator
    • Commerce Orders
    1. Order Details Header
    2. Order Details Lines
    3. Order History
    4. Order Totals Details
    5. Recent Orders
    • Commerce Shared
    1. Language Selector
    2. Message Summary
    3. Search Bar
    • Commerce (metadata)
    1. AntiForgery
    2. Metadata

    View Slide

  38. 38
    • Language selector
    • The languages are read from the Commerce Control Panel which is shared with CE
    • Login
    • Creates account in 3 places: CE, Sitecore User, Contact through Commerce Connect.
    Cannot use the standard Login for this purpose
    • Top Bar Links
    • Shows login name when authenticated
    • Might at some point be replaced with Link List
    • Catalog navigation vs navigation
    • Navigation comp. works with direct navigation only whereas Catalog Navigation supports
    wildcard (”*”) navigation as well as direct navigation
    Commerce components vs SXA components
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide

  39. 39
    • Checkout is broken down to one page/item per step
    • Edit capability - data entered during checkout is remembered
    • Exit checkout and return will re-populate the checkout steps
    • Steps and order of steps are not fixed
    • New steps can be injected
    Storefront checkout features
    © 2001-2017 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks
    of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

    View Slide