Skip to content

Category Page Integration

This section caters for integration of facet-able product listings containing a specific set of products, well suited for category pages. The content of the product listings are restricted by filters. Filters are either supplied as component properties or they can be defined in the eSales Apps for any given page.

Category pages with the content filter supplied as component properties, are referred to as pre-defined category pages. This is a quick way to incorporate eSales driven product listings to any page and suitable for non-standard category pages with unique templates.

Another integration approach is virtual category pages - a tighter, more powerful category page integration. It enables merchandisers to create and manage category pages through the eSales Apps with changes instantly propagated to the site.

Pre-defined category pages

To include a product listing with a filter on a page, add the primary product list component along with compatible facet and sorting components, positioned as desired. These components should be present on all eSales driven category pages, with the appropriate filter set for each page.

<div class="wrapper">
  <esales-facet-list></esales-facet-list>
  <esales-facet-chip-list></esales-facet-chip-list>
  <esales-sort-by></esales-sort-by>
  <esales-primary-product-count></esales-primary-product-count>
</div>

<esales-primary-product-list data-custom.category="Shorts"></esales-primary-product-list>

Tip

Additional category and page properties are recommended to be handled externally when working with pre-defined category pages. This includes navigation structures as well as SEO information.

Virtual category pages

Virtual category pages is an integration approach which enables merchandisers to dynamically set up new category pages on targeted URLs, with custom product selections defined in the eSales Apps. To enable this, all URLs of the pages that are potential virtual category pages, must include the components that make up the category page.

A recommended approach is setting up a space for virtual categories. This means hosting the template for the category page on a set of known paths, such as the sub-pages for one or more URLs:

  • www.esalesdrivensite.com/collections/*
  • www.esalesdrivensite.com/men/*
  • www.esalesdrivensite.com/women/*

The definition of the virtual category space, e.g. the pages hosting the category page templates, is handled externally and controlled by the integrator. The virtual category space may well exclude specific paths for already-defined pages, and can for example be used as the base template of the site. The definition of the virtual category space limits where the merchandiser can or cannot create new category pages, hence the merchandiser must be aware of this definition.

Tip

When working with virtual category pages, page properties including product selections, page title, meta descriptions, and more are defined in the eSales Apps, see Category and Landing Pages. This facilitates the integration process as well as eases the day-to-day work of the merchandiser. Initial setup of page and navigation information migration will be assisted by Apptus personnel.

SEO properties

When SEO handling is enabled in the eSales Apps, any SEO properties that are provided in the eSales Apps for different pages will automatically be added to the document by the script:

  • Sets page title
  • Adds meta description
  • Adds meta keywords

If SEO information is handled in a separate system, simply disable this functionality in the eSales Apps and / or omit this information in the page configurations in the eSales Apps.

Virtual page templates

When the page and navigation information is set up, all that needs to be added is the category page template. The URL of the page is what decides what content is loaded and can merchandised in the eSales Apps. The Navigation page component can be used to get a standard category page layout that includes faceting, sorting, etc. or lower level components can be used to create a custom layout.

Standard template

<div class="wrapper">
  <esales-navigation-tree></esales-navigation-tree>
  <esales-navigation-page></esales-navigation-page>
</div>

Custom template

<div class="header">
  <esales-breadcrumbs></esales-breadcrumbs>
  <esales-category-title></esales-category-title>
  <esales-preamble></esales-preamble>

  <esales-facet-list></esales-facet-list>
  <esales-facet-chip-list></esales-facet-chip-list>
  <esales-sort-by></esales-sort-by>
  <esales-primary-product-count></esales-primary-product-count>
</div>

<div class="wrapper">
  <esales-navigation-tree></esales-navigation-tree>
  <esales-primary-product-list></esales-primary-product-list>
</div>

Custom page IDs

When using facet states to create URL paths and pages, there is a risk of cluttering the Category and Landing pages interface with pages with identical product selections and settings. A page, for example /shirts, can easily be merchandised. Pages created with facet states, for example based on /shirts with size as the facet state, will result in multiple pages, e.g. /shirts/small, /shirts/medium, /shirts/large etc. This makes merchandising the facet state based pages in the same manner as the base page a time consuming task.

To avoid this, a meta tag with the name esales-page-id can be added to the pages that states in its content which base page that settings, lists, and product selections should originate from. A facet state based page with this tag will not appear in the Category and Landing pages interface.

<meta name="esales-page-id" content="/shirts"></meta>

Last update: May 6, 2021
×
Copyright

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE