Working with Sitecore Experience Accelerator (SXA) to identify the list of SXA OOTB/Custom components required to build the SXA based website.
We all are working with different clients for requirements analysis and some of the clients will provide detailed requirements including wire frames and some will provide one liner or only use cases related details.
In the above scenarios it’s always good to analyze the requirements in details, to decide the implementation approach (ASP.NET MVC,
SXA, Sitecore Headless, Sitecore JSS) and identify the development efforts.
In this post, I will be explaining how to analyze the website requirements to come-up with components/renderings identification, integrations, estimations and then implementation approach by using business requirements and identify that it will be good to go with Sitecore Experience Accelerator (SXA) or not.
The Contents of the post are:
•
Requirements
-
Shared Wire frames
•
Our Understanding and Scope of Work
•
Solution Approach
>
Custom Template Details
• Requirements: Go to top
Contoso Insurance has a requirement to investigate and better understand customer behavior and attitude to purchasing new insurance products online. In order to achieve this, we want to create a web site which will provide positive user experience by making it simple for site visitors to find and share information, increase engagement levels, increase repeat visits and increase overall site traffic.
New Website should serve the following purposes: The high-level requirements are-
Shared Wire frame: Go to top
• Our Understanding and Scope of Work: Go to top
As a part of this post we will be considering analysis of Home and Product Listing page, so scope of work includes:
- Solution design by considering implementation of Home and Products landing page using Sitecore 10 Experience Platform and need to identify that Sitecore Experience Accelerator (SXA) will be best fit or not
- Identification of Components/Renderings required to implement Home and Products landing page
- Sitecore Information Architecture – High Level
- Use of Helix Principles while designing the solution
• Solution Approach: Go to top
o Identification of Components: For identification of components we need to do the analysis of requirements which will help us in identifying utilization of SXA OOTB components and Custom components.
Home Page: Go to top
Product Listing Page: Go to top
With the help of above analysis, we got to know that more than 70% of requirements can be achieved by utilizing SXA Out-of-the-box (OOTB) components and rest of the components can be custom built where third party integration or any custom logic needs to be implemented, so we can consider the
SXA to build the website.
Go to top
Some important inputs which needs to consider whenever we are proposing Sitecore based implementation:
- Future roadmap of the client
- Are they looking for Single-page application (SPA)/ Progressive Web Apps (PWA)? If yes then consider Sitecore Headless Implementation by considering the Enterprise Tech Stack..
- If more than 70% of the requirements can be achieved using SXA OOTB components then good to go with SXA based implementation instead of ASP.NET MVC based implementation
Go to top
o Custom Component Details : It’s always good to document high level implementation details about custom components so that development team can take this as a base during implementation phase
- Add as Favorite: Go to top
The purpose of this custom component is to add the Product Page as favorites product for the logged-in user, and the high-level implementation logic details are:
=>We assume that the Identity and Access management (IAM) system will be available to authenticate the user
=>During user login, we will be creating the Virtual User in Sitecore and tracking the logged-in user by identifying the contact
Approach-1: Preferred Approach
* To store the Favorite Product we will be utilizing the
Custom Facets in the Contact Profile
* We will be using Custom Facets for storing the List of Product Page GUID’s
* Once user land on any of the page where Add as Favorite/Bookmarked button component added:
>We will be checking that user logged-in or not
>If user logged-in then access List of existing Favorite/Bookmarked items from Custom Facet and verify that existing page guid present or not, if yes then disable the Add as Favorite button otherwise enable
>Once user click on Add as Favorite/Bookmarked button then validate user logged-in or not, if not then show the login message otherwise access the Custom Facet for current logged-in user by identifying the contact and store the page guid in the Custom Facet
Here we are utilizing the Contact’s Custom Facet because this functionality is for logged-in user(identified user) and
Sitecore providing xDB/xConnect (available to Content Delivery) which can be utilize to store the individual contact profile details and can be retrieve using xConnect API’s.
Approach-2:
* To store the Favorite/Bookmarked Product we can also utilize the Custom Database
* The Custom Database will store the List of Product Page GUID’s with respect to every user
* We can access the records in
two ways one is by creating the
Database Stored Procedure’s and second by creating the
Custom Search Index
* Once user land on any of the page where Add as Favorite/Bookmarked button added:
>We will be checking that user logged-in or not
>If user logged-in then access List of existing Favorite/Bookmarked items from Custom Database Stored Procedure or Custom Search Index and verify that existing page guid present or not, if yes then disable the Add as Favorite button otherwise enable
>Once user click on Add as Favorite/Bookmarked button then validate user logged-in or not, if not then show the login message otherwise use the Custom Database Stored Procedure to store page guid for logged-in user in the Custom Database
Here we can have complete control over the database and apply any data orchestration as per our need in near future, but maintainability will increase for the solution
Go to top
- Favorite Product Listing: Go to top
The purpose of this custom component is to display the list of Favorite Product for the logged-in user, and the high-level implementation logic details are:
=>We assume that the Identity and Access management (IAM) system will be available to authenticate the user
=>During user login, we will be creating the Virtual User in Sitecore and tracking the logged-in user by identifying the contact
Approach-1: Preferred Approach
* To store the Favorite Product we will be utilizing the
Custom Facets in the Contact Profile
* We will be using Custom Facets for storing the List of Product Page GUID’s
* Once user land on any of the page where Favorite Product Listing component added:
>We will be checking that user logged-in or not
>If user logged-in then access List of existing Favorite/Bookmarked items from Custom Facet and get the Product details from Sitecore to display Product Name with Url otherwise don’t display any information i.e. blank DOM element
>If user click on the Product Item link from listing, then user will be redirected to Product Details page
Here we are utilizing the Contact’s Custom Facet because this functionality is for logged-in user(identified user) and
Sitecore providing xDB/xConnect
(available to Content Delivery) which can be utilize to store the
individual contact profile details and can be retrieve using xConnect
API’s.
Approach-2:
* To store the Favorite/Bookmarked Product we can also utilize the Custom Database
* The Custom Database will store the List of Product Page GUID’s with respect to every user
* We can access the records in
two ways one is by creating the
Database Stored Procedure’s and second by creating the
Custom Search Index
* Once user land on any of the page where Favorite Product Listing component added:
>We will be checking that user logged-in or not
>If user logged-in then access List of existing Favorite/Bookmarked items from Custom Database Stored Procedure and get the Product details from Sitecore to display Product Name with Url otherwise don’t display any information i.e. blank DOM element
>If user click on the Product Item link from listing, then user will be redirected to Product Details page
Here we can have complete control over the database and
apply any data orchestration as per our need in near future, but
maintainability will increase for the solution
Go to top
- Purchase History: Go to top
The purpose of this custom component is to display the list of purchase history (in backend system) raised by the user for products, and the high-level implementation logic details are:
=>We assume that the Identity and Access management (IAM) system will be available to authenticate the user and API which will provide purchase listing for particular user will also be available for consumption
Approach:
* The list of purchase will be available using existing API’s
* Once user land on any of the page where Purchase Listing component added:
>We will be checking that user logged-in or not
>If user logged-in then pass the required parameters to existing API which will provide purchase listing for particular user and get the Product details from Sitecore to display Product Name with Url otherwise don’t display any information i.e. blank DOM element
>If user click on the Product Item link from listing, then user will be redirected to Product Details page and implementation of product details
Go to top
Go to top
o Page Structure : In this section we will be defining the required Page Design and Partial design Home/Product listing page and this analysis will be helpful during implementation phase to decide the structure of complete website in terms of re-usability
Go to top
Go to top
Go to top
o Sitecore Information Architecture : In this section we will be defining the high-level Content Information Architecture with respect to our implementation. This item can also be shared with client’s confidence about understanding of their requirements in details
Go to top
Go to top
The high-level details about required templates to build the custom components are: this activity generally will be done during implementation phase and we need to document these details, so that if any team member starting work on any of the components then they can check the details of existing templates hierarchy and use:
Go to top
With the help of above analysis at the end you will be having inventory in place which will provide clear understanding of requirements, components details, utilization of SXA OOTB components and Custom components, and required Sitecore Information Architecture including template details.
I hope this post will help an individual in deciding which Sitecore based implementations (ASP.NET MVC, SXA, Sitecore Headless, Sitecore JSS) approach will be best suited for their implementation and how can we come-up into decision that
Sitecore Experience Accelerator (SXA) approach will be best suited.
Go to top
Comments