Product catalog setup

Most Rapido versions ship with example implementations of web shops – currently bikes and fashion – alongside product data for each shop. This product data is published to frontend using a product catalog app on a Products page on each website.

The product catalogue on Rapido is set up to publish product using an index query called Products – a set of statements which retrieve and publish a subset of products on a solution, e.g. all active products which match the language and shop the user is visiting in frontend. This query is also set up to react to the values a user selects in frontend using the filters section (Figure 1.1).

Figure 1.1 Product list grid view

In this guide we will run through the steps required to set up this standard flow from scratch on a solution with no product data:

  • Creating an index with product data
  • Creating a query for extracting products based on their properties
  • Creating a page with a product catalogue for publishing products

Go to Settings area and right-click the Repositories node. Create a new repository (Figure 2.1) and name it Products.

Figure 2.1 Create a new repository

Add your index in the repository toolbar (Figure 2.2). Name the index Products.

Figure 2.2 Add a new index

You will now be redirected to the index configuration view (Figure 2.3). Click Add Instance and leave the folder name blank.

Figure 2.3 Add an instance to the index

Now, click Add build to open the build configuration view (Figure 3.1). Name the build Products and change the Builder to Dynamicweb.Ecommerce.Indexing.ProductIndexBuilder (should be selected as defeault). Click OK.

Figure 3.1 Add a build

Under Fields, add field with the Schema extender field type and the ProductIndexSchemaExtender type (Figure 3.2).

Figure 3.2 Create a schema extender field

Save the index. Then, create a new field (Figure 3.3). Set the:

  • Name and system name to be ProductName_Search
  • Source to ProductName and type to System.String
  • Field to be indexed and analyzed
Figure 3.3 Create a ProductName_Search field

Create another field (Figure 4.1). This time, set the:

  • Name and system name to be ProductNumber_Search
  • Source to ProductNumber and type to System.String
  • Field to be indexed
Figure 4.1 Create a ProductNumber_Search field

First, save the index. Then, build the index (Figure 4.2) and check that the instance says “Completed”.

Figure 4.2 Save and build your index

With the index all set up, return to the repository view and add a Query (Figure 5.1). Name it Products and select your new index as the Data Source.

Figure 5.1 Add a query

In the query configuration view, you can create parameters. These are necessary for the search, grouping and variants to work. Add the parameters as shown in Figure 5.2:

Figure 5.2 Add the three parameters

Let’s start with adding the group, language, and basic expressions. Click Add group to create a new expression group. After that, click Add Expression to add the following (Figure 5.3):

  • Select the Parent Group IDs field, the MatchAny operator, and click the pencil icon and select Parameter > GroupID
  • Select the Language ID field, the Equal operator, and click the pencil icon and select Macro > Language ID
  • Select the Active field, the Equal operator, and the True value
Figure 5.3 Add the first three expressions

Then, we have two expressions that must be added (Figure 6.1).

  • Select the Auto ID field, the In operator, and click the pencil icon and select Macro > FavoritesAutoIdByUserId
  • Select the Include Master/Variant in list field, the Equal operator, and click the pencil icon and select Parameter > DoNotShowVariantsAsSingleProducts
Figure 6.1 Create two more expressions

The first one makes it possible to render the favorites lists on the product catalog. The second one secures that variants in the favorites list are rendered as single products.

Now you must add the query expressions for the search fields to work. Click Add group (Figure 6.2).

Figure 6.2 Add a group of expressions

Change the group selector to Or and add the expressions (Figure 6.3):

  • Select the ProductName_Search field, the Equal operator, and click the pencil icon and select Parameter > Search
  • Select the ProductNumber_Search field, the Equal operator, and click the pencil icon and select Parameter > Search

Save and close the query.

Figure 6.3 Set up the expression group

Now that you’ve set up the Products repository, you must configure the page for all of your products. This is done using the Product Catalog app.

So create a new page, enter Visual Editor to add an empty column with the App item type. In the settings for the column, click App in the ribbon bar and attach the Product Catalog app (Figure 7.1).

Figure 7.1 Add an empty column with the Product Catalog app attached

In the app settings, choose to show Index and select your Products query (Figure 7.2).

Figure 7.2 Configure the app to show your query

Under Templates (Figure 7.3), select the:

  • eCom/Productlist/ProductsRender.cshtml as the List template
  • eCom/Productlist/ProductsListFeed.cshtml as the List feed template
  • ecom/Product/Product.cshtml as the Product template
  • eCom/Product/ProductFeed.cshtml as the Product feed template
Figure 7.3 The Templates section

Under Additional settings for the Show on paragraph, select the paragraph that should contain the product catalog. Retrive my list based on should be set to User id as well. This secures that the favorite lists work as intended.

Figure 8.1 The Addtional settings section

Save and close the paragraph and return to the page view for the Products page. In the ribbon bar, open the Properties (Figure 8.2).

Figure 8.2 Open the page properties

Then go to the Options tab and click Navigation (Figure 8.3).

Figure 8.3 Go to Options > Navigation

Here, you must:

  • Name the Navigation tag ProductsPage
  • Enable Ecommerce navigation
  • Set the Parent group to be a Shop and select your shop in the dropdown
  • Select your Product page
Figure 9.1 Configure the Navigation settings

After that, click OK and you’re done!