Content tree architecture
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.
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.
You can customize the appearance of the content tree using the features and functions on the Configure tab available on the ribbon.
Storefront hierarchy
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 page designs in the sitecore/Content/<tenant>/<site>/Presentation/Page Designs folder.
-
Commerce partial designs in the sitecore/Content/<tenant>/<site>/Presentation/Partial 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
.
Content tree for tenants
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
For storefronts to function properly, the tenant site that the storefront is associated to must have the Commerce Foundation module installed.
Content tree for sites
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.
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.