Walkthrough: Configuring direct navigation on an existing site

Current version: 10.1

Direct navigation means that Sitecore displays the catalog item directly. As a result, the presentation, page events, goals, analytic profiles, campaigns, and personalization are all available from the catalog item. This means each category and product in the catalog can be unique in terms of presentation and analytics.

To enable direct navigation for an existing site, you must have override templates that you map to page designs. You can create your own or you can use the templates and page designs provided with the Storefront site template.

Note

For a new site that does not use the Habitat catalog or an existing sites where you create a custom catalog and associate it to the site, you only have to override the templates and enable direct navigation.

This walkthrough describes how to:

Note

By default, direct navigation is turned off for existing sites. For new sites, it is enabled by default. You can enable direct navigation for items using custom templates.

Create override templates

Presentation is usually set on standard values of the Page Type templates. To support unique presentations for individual storefronts in the same solution without needing a set of catalog templates for each site, you can use template-to-page design mapping.

Following Helix guidelines, there are a number of different template types in use as illustrated in the following figure. When you use override templates, the Page Type template becomes a container that inherits from other base templates and the template-to-page design mapping determines the page design. It is the template that defines the data structure and data inheritance required to render a page.

Overview of template types.

With the Storefront site template, the following override templates are provided by default.

The following procedure creates a Commerce Category override template that lets you add presentation details at the category level.

Override template

Base templates

Commerce Bundle

  • /sitecore/Templates/Project/Sitecore/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Bundle

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce Category

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Category Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Category

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce Dynamic Bundle

  • /sitecore/Templates/Project/Sitecore/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Dynamic Bundle

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce Product

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Product

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce Product Variant

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Product Variant

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Note

With the default Storefront implementation, Product Variants are not direct page request targets, only the parent product is. As a result, you can leave the Commerce Product Variant override template field empty.

To create a category template:

  1. In the Content Editor, navigate to /sitecore/Templates/Project/<tenant>, right-click <tenant> and then click Insert, New Template.

  2. On the Select name page, enter Commerce Category as the name for the category template.

  3. In the Base Template field, navigate to Templates/Project/<tenant> and select the Catalog Navigation Page template, and click Next.

  4. On the Location page, accept the default location (Project/<tenant>), click Next, and then click Close.

  5. On the Content tab, in the Data section, in the All list, navigate to the Templates/Foundation/Commerce Experience Accelerator/Commerce Pages folder and double-click the Catalog Category Page to move it to the Selected list.

  6. Navigate to Templates/Commerce/Catalog and double-click Commerce Category.

  7. Navigate to Templates/Foundation/Experience Accelerator/Search/Computed Fields and double-click _SearchableWithoutRelatedItems.

    Data section of the Catalog Navigation Page template.
  8. On the ribbon, click Save.

You must repeat this procedure to create each of the other templates shown in the previous table and ensure the associated templates shown are selected.

Note

You can verify the template assignment by selecting a category in the catalog and, in the Quick Info section, ensuring that the template links to the correct category template.

Create a partial design

Each override template is associated with a page design. To begin with, you must create two partial page designs that you use to create the required page designs.

To create a partial page design:

  1. In the Content Editor, navigate to sitecore/Content/<tenant>/<site>/Presentation.

  2. Right-click Partial Designs and click Insert, Partial Design.

  3. In the Message dialog box, enter Commerce Category Main as the name and click OK.

  4. To apply the same design as the Category page (Shop/*page), navigate to sitecore/Content/<tenant>/<site>/Home/Shop/*.

  5. With the * selected, on the ribbon, on the Presentation tab, click Details.

  6. In the Layout Details dialog box, click Copy To.

    Layout Details dialog box.
  7. In the Target Devices list, select the Default check box.

  8. In the Target Item list, select the partial design you created previously (Commerce Category Main).

  9. Click Copy and then click OK.

  10. Repeat these steps to create the Commerce Product Main partial design. Use Commerce Product Main in Steps 3 and 8.

    Note

    When you create a product page, you must navigate to the /sitecore/Content/Sitecore/Storefront/Home/Shop/*/* item.

Create a page design for each override template

Using the partial designs created in the previous procedure, create a page design for each override template.

To create a page design for each of the override templates:

  1. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Presentation.

  2. Right-click Page Designs and click Insert, Page Design.

  3. In the Message dialog box, in the name field, enter a page design name (Commerce Category Page, Commerce Product Page, Commerce Product Variant Page, or Commerce Bundle Page as shown in the following table) and click OK.

  4. Select the newly created page design and, on the Content tab, in the Designing section, double-click the relevant partial designs as shown in the following table to move them to the Selected list.

    Page design name

    Selected partial designs

    Commerce Bundle Page

    Default Commerce Header

    Default Main Product Page Content

    Default Commerce Footer

    Commerce Metadata

    Commerce Category Page

    Commerce Header

    Category Page Content

    Default Commerce Footer

    Commerce Metadata

    Commerce Product Page

    Default Commerce Header

    Default Main Product Page Content

    Default Commerce Footer

    Commerce Metadata

    Commerce Product Variant Page

    Default Commerce Header

    Commerce Main Product Page Content

    Default Commerce Footer

    Commerce Metadata

  5. To save your changes, click Save.

Map a template to a page design

To map a template to a page design:

  1. In the content tree, go to sitecore/Content/<tenant>/<site>/Presentation and click Page Designs.

  2. On the Content tab, in the Designing section, map the category override templates to relevant page design as illustrated in the following example.

  3. To save your changes, click Save.

You must repeat the procedure for the product variant, static bundle, and dynamic bundles templates.

Override the templates used by the data provider

By default, catalog items are based on global commerce templates, which means you cannot use them in a multi-site setup and with template-to-page design mapping. It is for this reason that you must base the catalog items on tenant-specific override templates.

To override the templates used by the data provider:

  1. In the Content Editor, navigate to /sitecore/Content/<tenant>/<site>/Home/Catalogs.

  2. Click a catalog.

  3. On the Content tab, in the Template Overrides section, for each template type, click in the field and map the override template to a project template in the Templates/Project/<tenant> folder.

  4. For your changes to take effect, on the ribbon, on the Commerce tab, click Refresh Commerce Cache .

Now you can enable direct navigation for the storefront site.

Do you have some feedback for us?

If you have suggestions for improving this article,