Content and Product Search

The new content search feature allows you to customize what customers/users can search for when using the search field. Earlier the search bar columns were only for searching for products. Now you can create searches for either content or products or both products and content.

Figure 1.1 The content search and search results page

This guide for the manual setup will show how to setup content and product search. If you only want separate content and product search you should check our documentation below.
To setup the content and product search manually, you will have to do some configuration in the backend.

  1. Go to the search result service page. It is located in the Services folder ind the Swift tools folder.

Here you need to make sure, that the properties of the page is configured correctly.

  1. On the Search service page click on properties.
  2. In the top menu bar in the Accessibility section uncheck “Show in searches”.
  3. Click on the Layout pane. Click on the Template dropdown menu.
  4. Choose the “Swift: Swift_PageClean.csthml” template.
  5. Hit Save and close

Now that the page properties are configured correctly it is time to setup the app column.

  1. Add a new paragraph to the page
  2. Add an App column. Name it something like “Content and product search results”.
  3. Go to the app part of the column. Choose a Query publisher as the app type.
  4. In the Queries section
    1. In the query dropdown choose “Content search.query”.
    2. In the Items per page field set it to 5
  5. Scroll to the bottom. In the Template dropdown in the Template section choose the “ContentDropdownResponse.cshtml” file.
  6. Hit Save and close

Now you need to create a Search results page. This page will display the content pages matching with the searched words.

  1. Click on the three vertical dots next to the website name in the content pane.
  2. Create a new page. Call it something like “Search results”. If you like, you could place it at the top e.g. just below the product list. This is done using the sort tool.
  3. When you have created the page, make sure it is hidden.
  4. Enter the Visual Editor of the Search results page.
  5. Add a 1 column row. On the empty row add an App column and call it something like “Search results”.
  6. Go to the app part of the column and choose the query publisher.
  7. In the Queries section in the query dropdown menu, choose “Content search.query”
  8. Scroll to the bottom. In the Template dropdown in the Template section choose the “Content.cshtml” file.
  9. Hit OK and exit the Visual Editor

Next up you need to create a navigation tag on the Search results page.

  1. Click on properties.
  2. In the Options pane click on navigation.
  3. In the navigation tag field, write “ContentSearch”. Hit OK.
  4. Click Save and close.

The last thing to do is to make sure the content index is built.

  1. Enter the Settings.
  2. Go to Repositories -> Content. In the indexes click on the Content builder.
  3. In the Builds section build both “ContentIndex” and “ContentIndex 2”.
  4. Hit Save and close.

As mentioned in the guide above, the manual setup is when the search field should search for both products and content. The output of the search field depend on the setup of the service page linked to. You could change the settings on the existing service page. This means that you would only need one page. Alternatively you could create three different service pages. One for products, one for content and one for both. This would allow you to use the Search field in different ways. You could e.g. have a main search field searching both content and products and also have a content search field in the footer. 

Here are two quick guides showing how the service page should look should you want searches for only products or only content. 

  1. Go to the service pages folder: Swift tools -> Services.
  2. Create a new page and call it something like “Product search”. Make sure it is hidden in menu.

Again you should make sure that the properties of the page are configured correctly.

  1. On the Search service page click on properties.
  2. In the top menu bar in the Accessibility section uncheck “Show in searches”.
  3. Click on the Layout pane. Click on the Template dropdown menu.
  4. Choose the “Swift: Swift_PageClean.csthml” template.
  5. Hit Save and close

Next is to add the Product catalog for ViewmModel app.

  1. Open the page in the Visual Editor.
  2. Add a 1 column row.
  3. Add an App column on the empty row
  4. Choose the Product catalog for ViewModel as the app type

As this will be the service page for product search, we will setup the app to show product results.

  1. In the Query dropdown choose “Products.query”.
  2. In the Templates section in the List dropdownmenu choose the “ProductSearchDropdownRespone.cshtml”
  3. In the other dropdowns, Product, Compare, and Feed, choose “Noting Selected”.
  4. Hit Save and close

That is it for the products search service page. If you want a search field to only search for products, link it to this service page.

  1. Go to the service pages folder: Swift tools -> Services.
  2. Create a new page and call it something like “Content search”. Make sure it is hidden in menu.

Again you should make sure that the properties of the page is configured correctly.

  1. On the Search service page click on properties.
  2. In the top menu bar in the Accessibility section uncheck “Show in searches”.
  3. Click on the Layout pane. Click on the Template dropdown menu.
  4. Choose the “Swift: Swift_PageClean.csthml” template.
  5. Hit Save and close

Next is to add the Query publisher app to the page.

  1. Add a new paragraph to the page
  2. Add an App column. Name it something like “Content search”.
  3. Go to the app part of the column. Choose a Query publisher as the app type.
  4. In the Queries section
    1. In the query dropdown choose “Content search.query”.
    2. In the Items per page field set it to 5
  5. Scroll to the bottom. In the Template dropdown in the Template section choose the “ContentDropdownResponse.cshtml” file.
  6. Hit Save and close

That is it for the content search service page. If you want a search field to only search for content, link the column to this service page.