Sitecore SXA Practical – Process of analyze and implementing a Sitecore SXA website

High Score Labs News • Jun 15, 2022

Introduction: We have already discussed about the “Define” and “Design” stage in the first article. We have already discussed about the requirements and we documented it. The client has already given UX design keeping Sitecore CMS in mind with proper component structure.

nput from first two phase:

Define Phase:

Site must be accessed from different geographic location across the globe
Site must have multi-lingual features
Easy to implement component structure
Easy to use Experience Editor mode with content entry

Design Phase:

UX is provided by the client with HTML
For this article purpose we are using default Helix project layout. Following is the Git repo –

GitHub – Sitecore/Helix.Examples: Developer-focused examples of implementing the Sitecore Helix practices.

Analysis Phase:

Sitecore SXA provides lot of out of the box features
As an architect we need to define the strategy –
- To use the given set of components or create own custom components e.g., use promo component
- Define Page Design / Partial Design structure.

Definitions:

Page design in SXA is a selection of partial designs that help you to structure your pages. You can, for example, make sure the headers and footers are always in the same place. You can also create a page design to set up a page structure for specific pages, such as a blog page, a landing page, a product page, and so on. Content authors can then place content in these preset layouts.

Partial Design: SXA uses sets of renderings, called partial designs that make up a webpage. You can use the partial designs to create the design elements of your pages quickly for a consistent style. For example, you can create parts of your page once, such as headers and footers, and then use them everywhere on your site. You can also change a partial design for a specific page, for example, if you need a slightly different header on a particular page. Partial designs can inherit from each other, so you can build increasingly complex designs from a basic set of reusable partial designs.

Define different structures of the all the pages and come up with page design and combination of partial design to be used on each page design.

E.g. Homepage, Blog Listing Page, Blog Article can become page design and components on each of the pages can be created as partial design.

Define features and prioritize component structure based on that
Reduce redundancy and reuse maximum using variant definitions

Define structure keeping most viable features / product in mind so that content structure can be ready in parallel with development.

Implement the requirements

After identifying the various design elements. We have identified various pages:
- Global Components
  – Header
  – Footer
  – Lists e.g., Services list, product list
- Home
  – Hero Banner
  – Product List Carousel
  – News Carousel
- Product List Page
  – Product List Component
  – Filter Component
  – Search Component
- Product Detail Page
  – Title, Descriptio
  – Pricing section
  – Related product list component
- Individual new article
  – new title
  – news image
  – new Content with various column structures
  
  Homepage / News or Blog Page: As per standard practice homepage and blog/news page should be consistent and it has to have minimal content changes. It can be good candidate to create a common page design for homepage and break it down to various components created with partial design.
  - Homepage: Page Design structure
    - Header
  e.g.
  - Desktop View
    - Logo: Image
    - Main Navigation: Text Links
  - Mobile View
    - Logo: Image
    - Burger Menu: Text Links
    - Content
      - Carousel with CTA Text
      - Product List Carousels
      - News CardsFooter
    - Blog / News: List Page Design structure
      - Header
      - Blog / News Title with Short Description
      - Pagination
      - Search component
      - Filter Component
      - Blog Tags
      - Blog Author section
      - Relevant Blog list
      - Footer
    - Blog / News Article Page: Page Design structure
      - Header
      - Blog / News Description Short
      - Blog / News Description Long
      - Blog / News Image with different column sizes
      - Footer
    This article describes process of analyze and implement structure of pages by using Page Design and Partial design concepts with Homepage and Blog / News page examples. Based on requirement of other pages (e.g. products, services) should be broken down further so that it can be reusable across the pages.