Content tree architecture

Abstract

Overview of the Content tree as it applies to SXA Storefront.

You can use the Storefront site template to customize the look and feel in the Experience Accelerator or you can create a storefront from scratch using the features and functions of the Content Editor. Either way, it is important to understand the structure of the content tree and the purpose of the folders and files it contains.

Sitecore uses a hierarchical database model that organizes data in a tree structure using a parent/child relationship model where there is a one-to-many relationship between items (that is, each parent can have many children but each child can only have one parent).

Any type of item in the content tree can contain other items. Using folders as containers, you can structure the site so that it is easy to navigate and understand. This is important because building an online storefront requires that many different people work on it and each person must be able to navigate and understand site content. For example, in the Habitat sample catalog, product items are organized into departments so that anyone working on the web site can easily locate a product item. This organization is then translated to the storefront website where the customer can access each department easily from the navigation at the top of the website.

Habitat_Master content tree

There are four common folders added to the site item when you use the Create a new SXA site dialog box to create your storefront site. These are: a Data folder for shared content, a Media folder for site-specific media items, as well as a Settings node and a Presentation node for configuration and presentation details at the site level. When you include the Commerce Storefront Components in site creation a Commerce item is added to the content tree, which contains Commerce Control Panel settings. Defined catalogs for existing storefronts (created prior to Sitecore 9.0) are also stored here.

Tip

You can customize the appearance of the content tree using the features and functions on the Configure tab available on the ribbon.

The first step when you build a storefront is to create a tenant and a site. During tenant and site creation, Sitecore automatically adds various items to the content tree:

To support direct navigation from the content tree to the Experience Editor, Sitecore also creates:

  • Commerce category templates in the sitecore/Templates/Project/<tenant> folder.

    Commerce templates
  • Commerce page designs in the sitecore/Content/<tenant>/<site>/Presentation/Page Designs folder.

    Commerce pages in the Page Designs folder.
  • Commerce partial designs in the sitecore/Content/<tenant>/<site>/Presentation/Partial Designs folder.

    Commerce partial designs in the Partials Designs folder.

The main storefront web pages are located directly beneath the Home item in the order that the pages are to appear on the web shop menu. The placement of the items beneath the Home node determines the URL and is constructed using "hostname" + "Sitecore path". The root item is defined in the settings. If you prefer, you can create URL aliases. In the following image, the URL is www.Storefront.com/WelcomePage.

Storefront WelcomePage folder.

By default, the tenant item contains path definitions for templates, themes, and media. For example:

  • sitecore/templates/projects/<new tenant>

  • sitecore/media library/themes/<new tenant>

  • sitecore/media library/project/<new tenant>

  • sitecore/media library/project/<new tenant>/shared

Important

For storefronts to function properly, the tenant site that the storefront is associated to must have the Commerce Foundation module installed.

The Home item is the home page of the storefront. The web pages that the storefront is built from are stored beneath the Home item. To view a storefront, right-click the Home item and select Experience Editor.

Note

Catalogs are no longer located in the Catalog Management folder. They are now located beneath the Home item for each site.

Home

The following table lists the subfolders for the Home item that are created when you use SXA Storefront. Content tree items that are SXA related are not included.

Item

Description

Status

Account Management

Page type, renders components, performs functionality.

Includes account details, address book, and recent orders.

Optional

Buy Gift Card

Renderings that let the customer make a purchase of products tagged as gift card products.

Optional

Catalogs

Contains all catalogs configured for the site.

You cannot create, edit, or modify catalog category or product data managed by the Business Tools in the Content Editor. However, except for versioning and assigning security, you can modify page data including custom meta data, tags, page design, and navigation as well as standard Sitecore data such as presentation, analytic attributes, and appearance settings.

Note

You can also indirectly sort catalog items by navigating to the sort-order field, when viewing standard fields, configure a numeric value, and sort items.

Required

Category

The category navigation wildcard page, which includes the breadcrumb, footer, main, sidebar, and sitemap navigation.

Required

Checkout

Checkout page where the customer confirms the order, defines shipping and billing details.

Optional

Company

List to pages (About, Jobs, Corporate Sales).

Optional

Forgot Password

Allows customers to reset their passwords by providing their account email addresses. The system sends a random password and a link to the Change Password page.

Optional

Landing Pages

Carousel of landing page images.

Optional

Login

Inserts a login form that lets the customer log into the storefront.

Optional

Overlays

This is a SXA-specific component that lets you set the overlay content properties.

Optional

Product

Product details wildcard page. Renders details about the product, allows customers to select variants and quantity, and add to cart functionality.

Required

Registration

Inserts a registration form that lets the customer register.

Optional

Search

Displays search results.

Optional

Shop

Wildcard page that maps all URL paths to a common child of that item. You use wildcard items to reuse and share data.

Optional

Shopping Cart

Shopping Cart wildcard page.

Optional

Media

The sitecore/Content/<tenant>/<site>/Media/<site> folder contains all the media items available for the web shop such as images, animations, movies, PDFs and so on. The media items do not exist physically in this folder but are references to the Media Library folders assigned to the site. The following table explains which folders are found within the Media folder by default and what they contain.

Item

Description

Status

Storefront

Contains all the images required by the storefront to render each page.

Optional

Shared

Contains a pointer to /sitecore/Media Library/Project/Sitecore/shared where images are shared across all sites are stored.

Required

Habitat

Contains the images used in the sample Habitat catalog that is delivered with the Storefront site template.

Optional

Data

The Data Commerce folder contains the data sources for the storefront. The Data folder provides a location for shared data source content at the site level and organizes this content by rendering type. Only the components that you selected in the site creation dialog box have a data container folder.

Presentation

The Presentation folder contains settings and presentation details for features selected while creating the site.

Settings

The Settings - Commerce folder contains the catalog configuration, which points to the catalog and defines the start navigation category.