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>
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:
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.
When working with virtual category pages, it is highly recommended that other category and page properties are provided in the eSales Apps. This should be integrated to the virtual category page template and includes information such as category hierarchy (Navigation Integration), page title, meta descriptions, preamble texts and the category title. 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.
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.
<div class="wrapper"> <esales-navigation-tree></esales-navigation-tree> <esales-navigation-page></esales-navigation-page> </div>
<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>