ssossossosso
Documentation Home »User Guide »Web Catalogs
current version

Web Catalogs

This topic contains the following sections:

Overview

Web catalog is a content management tool that helps build highly personalized custom versions of your websites by mixing in category pages, product pages, landing pages and pre-existing system pages in different variations based on the customer account information, their customer group or language preference.

With OroCommerce web catalog and content tree, you can organize the target website structure to gain improved purchasing experience and use a set of in-place SEO tools to make it reachable for your target audience.

The Web Catalog content nodes may be of the following types:

  • System page – one of the standard eCommerce website pages (e.g. sign in, user profile, open orders, etc).
  • Product – direct link to product details.
  • Product Collection – a dynamically generated group of products that are stored as a data segment.
  • Category – a category of the master catalog.
  • Landing page – a custom landing page created in the Marketing > Landing Pages section.

To view all web catalogs, navigate to Marketing > Web Catalogs in the main menu.

Configuration

You can control the frequency of the product collections indexation. By default, product collections are indexed every hour.

Note

Indexing simple filters that rely only on the product attributes happens via the message queue. Indexing task is queued immediately after the product collection node is saved. After the index task is processed, the product collection (or the part of product collection) is available on the Front Store immediately.

Indexing more complex filters (e.g. those that involve relationships with other entities) is separated from the common reindexation process and happens on a dedicated schedule via cron.

To change the default product collections indexation frequency:

  1. Navigate to the system configuration (click System > Configuration in the main menu).
  2. Select Commerce > Product > Product Collections in the menu to the left.

Note

For faster navigation between the configuration menu sections, use Quick Search.

  1. To customize the Indexation Cron Schedule:

    1. Clear the Use Default box next to the option.
    2. Select the desired frequency from the list.
  2. Click Save.

Create a Web Catalog

Note

See a short demo on how to create a web catalog in OroCommerce, or keep reading the step-by-step guidance below.

To create a new web catalog:

  1. Navigate to Marketing > Web Catalogs in the main menu.

  2. Click Create Web Catalog.

    The following page opens:

  3. Fill in Name and Description for the Web Catalog you are creating.

  4. Click Save on the top right of the page.

The new web catalog is created.

Now you are ready to organize catalog content into the desired structure that will define the navigation and menu look and feel on the OroCommerce store frontend:

  1. Click the Edit Content Tree on the top right of the page.

  2. In the page that opens, fill in the details of the homepage node of the web catalog as described in the Set Up the Homepage, First Level Menu, and Sub Menus section.

    The content selected in the content variants of the homepage node is shown when the buyer navigates to the OroCommerce front store. The *homepage node also acts as a parent node for the web catalog menu and sub menu items. It is recommended to use Oro Frontend Root system page as a root node of your web catalog.

  3. Under the homepage node, create main menu content nodes (e.g. first level of the main menu in the front store) as described in the Set Up the Homepage, First Level Menu, and Sub Menus section. It is recommended to create a dedicated landing page for main menu nodes of your web catalog.

Once the main menu nodes are saved, create sub-menu content nodes. These will be shown as the second level of the main menu on the OroCommerce Store Front:

  1. Ensure that the appropriate main menu node is selected in the content nodes structure to the left.

  2. Click Create Content Node on the top right of the page.

    The following page opens:

  3. Set up the sub-menu node as described in the Set Up the Homepage, First Level Menu, and Sub Menus section.

  4. Click Save on the top right of the page.

This way you can set up as many sub-menu nodes as you need.

Note

You can drag the existing content nodes to a different position within the content tree on the left of the page, as illustrated below:

Set Up the Homepage, First Level Menu, and Sub Menus

Concepts

The homepage that is shown when a buyer navigates to the web store is configured by the very first node created in the web catalog (homepage node).

The first level of the main menu in the front store is represented by root content nodes in the management console.

Front Store:

Management Console:

Root content nodes are nested under the homepage node.

After you set up the first level of the main menu, you can set up the second level for it, as well as many other sub levels for them, depending on the structure envisioned by you for the store.

The steps for node configuration provided below apply to the homepage, main menu and sub menu content with the only difference in the way you launch the node configuration:

  • For homepage node — You will be offered to fill in the homepage details once you start editing a blank content tree.
  • For menu and sub-men nodes — To create a menu or sub-menu node, select the parent node you would like to place it in, and click Create Content Node.
  • To launch editing the existing content node configuration, select it in the content nodes tree.

Content Node Configuration

To create or configure the content node in the web catalog:

  1. In the General section, fill in the content node title.

    For the homepage node, the title is mentioned in the content nodes tree in OroCommerce Management Console.

    For the menu and sub-menu nodes, the title is mentioned in the content nodes tree in OroCommerce Management Console and shows as a menu or sub menu caption in your OroCommerce Front Store (depending on the level in the content tree).

    If necessary, translate the title into the languages supported in your OroCommerce configuration. To manage title translations, click next to the Titles box and follow the content translation guidance here.

  2. Set Rewrite Variant Title to override the native title of the alternative content that you are mapping to this catalog node with the content node title specified in the previous step. When the content variant has no title of their own, the option is ignored and the content node title is used.

  3. For the menu and sub-menu nodes, enable the Slug Prototypes box. The default slug prototype is autogenerated. Edit the value to customize the default.

    To ensure that slug prototype translation is localization-friendly, manage slug prototype translations: click next to the Slug Prototypes box and follow the guidance on content translation.

  4. In the SEO section, fill in the meta description and meta keywords to help search engines show your web content to the relevant audience. Similarly to the title, meta information can also be translated.

  5. In the Restriction section, define the visibility of the web catalog.

    By default, the web catalog is displayed for any localization, on any website, and for any customer.

    To make OroCommerce apply a web catalog to the front store only for the particular combination of these facts, create a restriction by selecting all or some of the following: target localization, website, and customer or customer group.

    Note

    Only one field must be chosen for customers at a time, either a customer group and a customer.

    Warning

    Never leave the restrictions for non-default variant empty. This may cause unexpected priority collision between the default and non-default variant.

    For the menu and sub-menu nodes, the settings are inherited from the parent node. To modify the inherited default settings, clear the Inherit Parent box, and specify the necessary restrictions.

  6. In the Content Variants section, add the default content item to be displayed on the OroCommerce front store when the node-level restriction conditions are met:

  • Select the type of content to be displayed on the front store from the list on the right.

  • Configure the content node as described in the Configure Content Variants for the Content Node section.

    If necessary, create alternative content variants by selecting a content type from the list on the top right of the Content Variants section and providing the set of conditions (localization, website, customer or customer group) to restrict this variant specifically for those cases. To switch the default content variant to a different item, select it using an option to the left of the content variant name.

Configure Content Variants for the Content Node

This section provides an overview of the content node types and a brief guidance on their set up.

Note

The first content variant that is added to the node is marked as the default variant. When you add more content variants, please, specify the restrictions next to the content variant details. These restrictions will limit the use of this content variant only to specific cases.

Add a System Page (Web Catalog Content)

System page is one of the standard pre-designed pages of OroCommerce Store Front (e.g. Requests for Quotes, Open Orders).

To add a system page to the menu on the OroCommerce Store Front:

  1. Select the Add System Page in the Content Variants list.

    The following section shows:

  2. Select the system page from the list.

  3. This step applies only to the content nodes with more than one content variant.

    When your system page is not selected as a default variant for the content node, there is a Restrictions section beneath the selected system page. In this section, you can define the condition when the system page overrides the default content variant. See the Configure Content Visibility section for more information.

  4. Click Save when you are done filling in the web catalog content node or keep adding the content variants.

Add a Product Page (Web Catalog Content)

Product page node is a direct link to the product details in OroCommerce Store Front.

To add a product page node to the menu on the OroCommerce Store Front:

  1. Select the Add Product Page in the Content Variants list.

    The following section shows:

  2. Select the product from the list. To use search, start typing the product name or SKU in the box. To use filtering, click on the bars, and select the filtering conditions in the Manage filters section.

  3. This step applies only to the content nodes with more than one content variant.

    When your product page is not selected as a default variant for the content node, there is a Restrictions section beneath the selected product. In this section, you can define the condition when the product details override the default content variant. See Configure Content Visibility section for more information.

  4. Click Save when you are done filling in the web catalog content node or keep adding the content variants.

Add a Category (Web Catalog Content)

Category node is a direct link to the product category with the list of products in the OroCommerce Store Front.

To add a category node to the menu on the OroCommerce Store Front:

  1. Select Add Category in the Content Variants list.

    The following section shows:

  2. Click next to Sub-Categories to select the required option from the list.

    The available options are:

    • Include, show as filter – Used to include all the products assigned to the subcategories of the selected category in addition to the products that are already assigned directly. The subcategories of the first level with at least one product will be displayed as a category filter in the OroCommerce Store Front.

    • Do not include – Used to include the products assigned only to the selected category. In case the category has a subcategory, its product items will not be displayed.

  3. Select the category from the product catalog tree. To use search, start typing the category name in the box. Use > and v to expand/collapse the tree node.

  4. This step applies only to the content nodes with more than one content variant.

    When your category is not selected as a default variant for the content node, there is a Restrictions section beneath the tree of categories. In this section, you can define the condition when the selected category overrides the default content variant. See Configure Content Visibility section for more information.

  5. Click Save when you are done filling in the web catalog content node or keep adding the content variants.

Add a Landing Page (Web Catalog Content)

Landing Page node is a link to the custom content page created in the Marketing > Landing Pages section.

To add a landing page node to the menu on the OroCommerce Store Front:

  1. Select the Add Landing Page in the Content Variants list.

    The following section shows:

  2. Select the existing landing page from the list. To use search, start typing the keywords in the box to search for the necessary page. To use filtering, click on the bars, and select the filtering conditions in the Manage filters section. Alternatively, you can create a new landing page:

    1. Click + to the right from the Landing page list.

      The Create Landing Page pops up.

    2. Fill in the landing page details and contents as described here.

  3. This step applies only to the content nodes with more than one content variant.

    When your landing page is not selected as a default variant for the content node, there is a Restrictions section beneath the selected landing page. In this section, you can define the condition when the landing page overrides the default content variant. See Configure Content Visibility section for more information.

  4. Click Save when you are done filling in the web catalog content node or keep adding the content variants.

Add a Product Collection (Web Catalog Content)

Product Collection is a filter-based segment that helps you display a custom and dynamic set of products in the web catalog similarly to the category contents.

  1. To add a product collection node to the menu on the OroCommerce Store Front:

    Select the Add Product Collection in the Content Variants list.

    The following section shows:

  2. To name a segment of the product collection:

    Enter the segment name for the product collection in the provided field.

  3. To add a product to the collection via filter:

    In the All Added tab, click Advanced Filter to set up a filter that will limit the products list and include only the necessary products.

    Note

    Advanced Filter is hidden by default.

    Click Preview Results to check whether the products found via the filter match your criteria, or to exclude unnecessary items from the list.

    Note

    To manage the columns displayed Within the products grid, click .

  4. To add a product to the collection manually:

    Click Add next to Advanced Filter to add the selected products manually. This can be used in cases when you have few products to be added and there is no need to set up a complicated filter, or when you need to add specific products that may be out of the filter’s scope.

Manually added items will appear both in the Manually Added and All Added tabs.
  1. To exclude items from the collection:

    To ensure that specific items are excluded from the list of the product collection and will not be included automatically or manually, click Add in the Excluded tab:

    Tick the Selected box to the left of the necessary products, and click Add.

    Note

    You may use filter on the top of the dialog to limit the scope of the products and make it fit into the visible area.

  2. To reset products:

    To clear all filters and reset the product collection to the default state, click Reset Products next to the tabs.

  3. This step applies only to the content nodes with more than one content variant.

    When your collection is not selected as a default variant for the content node, there is a Restrictions section beneath the product collection preview. In this section, you can define the condition when the product collection overrides the default content variant. See Configure Content Visibility section for more information.

  4. Click Save when you are done filling in the web catalog content node or keep adding the content variants.

Set Up a Default Content Variant

The first content variant that is added to the node is marked as the default variant.

When you add more content variants, they have a dedicated restrictions section next to the content variant details. These restrictions will limit the use of this content variant only to specific cases; the default option is used in any other case.

To set up a newly added content variant as default, select the radio on the top left of its type.

Configure Content Visibility

Set Up Visibility of Content Node

By default, the web catalog with all its nodes has no visibility restrictions and may be displayed for any localization, on any website, and for any customer.

The web catalog node inherits visibility settings from the root node or its parent node.

However, you can adjust it to be displayed for particular localization, on a specific website, and/or for the selected customer(s).

To modify the inherited default settings, clear the Inherit Parent box, and specify the restrictions by selecting all or some of the following: target localization, website, and customer or customer group.

Note

Only one field must be chosen for customers at a time, either a customer group and a customer.

Warning

Never leave the restrictions for non-default variant empty. This may cause unexpected priority collision between the default and non-default variant.

Set Up Visibility of Content Variants

Once you add more than one content variant, you will have to apply restrictions to any non-default variants.

These restrictions help you set up the conditions where content should override the default option.

This may be necessary for multiple localizations, where the content item should link to the system page written in the appropriate language. Another example is when your products, product categories or collections differ for various countries, e.g. you might need an alternative product collection for USA and UK. Finally, you might like to limit the offerings based on your customer business and any legal limitations.

Set up a restriction by selecting all or some of the following: target localization, website, and customer or customer group.

Note

Only one field must be chosen for customers at a time, either a customer group and a customer.

Warning

Never leave the restrictions for non-default variant empty. This may cause unexpected priority collision between the default and non-default variant.

To apply content to more than one localization, website, and customer group or customer, click Add and set up additional conditions where content should override the default option.

Once you are done creating a web catalog, update your web-catalog configuration to enable it for the necessary level (either globally or per website), and, if necessary, tune the individual catalog nodes visibility to hide/show the node or particular content variant for specific localization, on a particular website, or for certain customer.

Enable a Web Catalog Globally

To enable a web catalog globally:

  1. Navigate to System > Configuration > Websites > Routing.
  2. In the Web Catalog section, select the required web catalog that should be displayed on the front store.

Note

When a Web Catalog is selected, it populates the main menu and sub-menus on the OroCommerce Front Store. If there is no Web Catalog in OroCommerce, the Master Catalog structure is mimicked.

Enable a Web Catalog for a Website

To enable a web catalog for a specific website:

  1. Navigate to System > Websites in the main menu.
  2. For the necessary website, hover over the more actions menu to the right of the necessary website and click to start editing the configuration.
  3. Select System Configuration > Websites > Routing in the menu to the left.

Customize Web Catalog Contents for Localization, Customer or Customer Group

To customize your web catalog contents visibility:

  1. Navigate to Marketing > Web Catalog in the main menu.
  2. For the necessary web catalog, hover over the more actions menu to the right and click to start editing the catalog content tree.
  1. In the Restriction section, define the visibility of the web catalog.

    By default, the web catalog is displayed for any localization, on any website, and for any customer.

    To make OroCommerce apply a web catalog to the front store only for the particular combination of these facts, create a restriction by selecting all or some of the following: target localization, website, and customer or customer group.

Note

Only one field must be chosen for customers at a time, either a customer group and a customer.

Warning

Never leave the restrictions for non-default variant empty. This may cause unexpected priority collision between the default and non-default variant.

Build a Custom Web Catalog From Scratch (Sample)

For illustration purposes, a sample web catalog set up is provided below.

Create First Level Menu

A website that distributes beauty and skincare products to shops worldwide is to have the following sections in its main menu:

  1. Health and Pharmacy
  2. Beauty and Skincare
  3. Fragrance
  4. Baby and Child
  5. Toiletries

These sections will serve as the first level of the front store main menu. In the management console, they will be called the root nodes.

To set up root content nodes in the management console, we:

  1. Navigate to Marketing > Web Catalogs.
  2. Click Create Web Catalog
  3. Name the catalog Web Catalog 2017 and save it.
  4. Click Edit Content Tree.
  5. Name the first node Web Catalog 2017. Root nodes will be linked to it.
  6. Fill in the SEO section.
  7. Set the necessary restrictions.
  8. Add a landing page in the content variants section that would be linked to the menu.
  9. From this node, create the first level menu by clicking Create Content Node.
  10. Name it Health and Pharmacy.
  11. Fill in the SEO section.
  12. Set the necessary restrictions (or inherit parent restrictions).
  13. Add a landing page linked to Health and Pharmacy.
  14. Click Save.

This way, we create all the required first level menus.

Note

Make sure that you create first level nodes from Web Catalog 2017 in the nodes section on the left of the page.

Create Sub-level Menu

Once all fist level nodes have been created, we can create the sub-menu nodes (second level menus) that would populate root nodes.

Each of the main menu sections will have the following second level menus:

  1. Health and Pharmacy: Vitamins and Supplements, Lifestyle and Wellbeing, Women’s Health, Men’s Health, Baby and Child Health.
  2. Beauty and Skincare: Makeup, Nails, Facial Skincare, Body Skincare, Hair, Fashion Accessories.
  3. Fragrance: Perfume, Aftershave.
  4. Baby and Child: Pregnancy and Maternity, Feeding, Bathing and Changing.
  5. Toiletries: Hair, Dental, Washing and Bathing.

To set up content nodes in the management console:

  1. Select the root node you are creating the sub-node for. In our case, it is Health and Pharmacy.
  2. Click Create Content Node.
  3. Name the second level menu Vitamins and Supplements. This will be linked to the root node.
  4. Fill in the SEO section.
  5. Set the necessary restrictions (or inherit parent restrictions).
  6. Add a product collection to Vitamins and Supplements.

This way, we create all the required second level menus.

Each of such levels can be populated with more levels, or nodes, if necessary, and each node can have a page (system, landing, product), a product collection, or a category mapped into it.

Note

You can drag the existing content nodes to a different position within the content tree on the left of the page, as illustrated below:

Once the catalog is enabled (globally or per website), you will be able to see it on the front store.

Browse maintained versions:
current1.4