Sitecore Experience Commerce

Walkthrough: Configuring direct navigation on an existing site

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.

Important

If you are upgrading to the latest version of Sitecore, configuring direct navigation as part of the upgrade is optional and only required if you intend to use direct navigation. If you are not using direct navigation, you must, however, configure the global commerce templates to inherit from the _SearchableWithoutRelatedItems template for performance reasons. Otherwise, the time it takes to index catalog content increases exponentially to the number of items in the catalog.

To enable direct navigation for an existing site, you must create override templates and the associated page designs, map these to the page designs, and then override the templates.

Note

For a new site that does not use the Habitat catalog as well as 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.

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.

TemplateStructure.png

You must create the following four override templates with their associated base templates.

Override template

Base templates

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 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

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

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

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.

    CommerceCategoryData.png
  8. On the ribbon, click Save.

You must repeat this procedure to create each of the other three 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.

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.

    LayoutDetailsPageDesigns.png
  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).

    CopyToUpgrade.png
  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.

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, navigate 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 Category Page

    Default Commerce Header

    Commerce Category Main

    Default Commerce Footer

    Commerce Metadata

    Commerce Product Page

    Default Commerce Header

    Commerce Product Main

    Default Commerce Footer

    Commerce Metadata

    Commerce Product Variant Page

    Default Commerce Header

    Commerce Product Main

    Default Commerce Footer

    Commerce Metadata

    Commerce Bundle Page

    Default Commerce Header

    Commerce Product Main

    Default Commerce Footer

    Commerce Metadata

    PageDesignsUpgrade.png
  5. To save your changes, click Save.

To render catalog items, you must map the override templates to the page designs. The following procedure maps presentation details at the category level.

To map a template to a page design:

  1. In the content tree, navigate 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.

    CategoryTemplateMapping.png
  3. To save your changes, click Save.

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

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.