Service Pages

For some columns to work on your pages, you’ll need to create a service page with apps, which the columns will then link to. We recommend grouping the service pages in the same folder in the content tree as shown on Figure 1.1 These guides will help you with the setup of the service pages. You can also use them to check if your service pages are correctly configured.  

On this page you’ll find guides for the following service pages: 

Figure 1.1 The location of the service pages

For the Favorites lists to work properly, you’ll need to configure a service page and link it to the column afterwards. 

  1. In the content tree, navigate to the folder called "Services" located in "Swift tools"  
  2. Add an empty page in the folder and name it “Favorites list service”. Make sure to toggle “Hide in menu” and hit OK 
  3. On the new page, click “New paragraph”. Scroll to the bottom and choose “App”  
  4. Name it “Favorites list” and hit OK 

Now you need to enter the App part of the paragraph and choose “Product catalog for ViewModel” in the ECOMMERCE section. To configure the App you need to: 

  1. Choose a query on your products (Product.query) in the dropdown menu.   
  2. Scroll down to the Templates section. In the product field select the “Favorites.cshtml” file. 
  3. Click Save and Close 

Then you only need to add the FavoriteServicePage navigation tag. To do this: 

  1. Enter the properties on your Favorite service page  
  2. Click on options in the top menu 
  3. Click navigation and write "FavoriteServicePage" in the empty Navigation tag field   
  4. Hit OK and Save And Close  

With that done the customer favorites lists page is ready to be made. You can check out how to do that here 

Unlike the Product list - grid view both product list alternatives (Product list – list view and Product list - compact view) requires a service page to handle product variants. For these two columns you can use the related products list service page and add another file. If you haven’t created that service page yet, please check that guide before starting on this one. 

For the product list – list/compact view column to work, you don’t have to create a new service page, as you can use the service page created for the related product list column. 

  1. Navigate to the related products list service page  
  2. Click on the App column and enter the App part of the column 
  3. Scroll down to the Templates section.  
  4. Choose the “VariantSelector.cshtml” file in the Product field 
  5. Hit Save and Close 

Now the service page is done. If you’ve given the related list service page the “RelatedProductsListService” tag the column should link to the service page by default. If you want to link the column to the service page manually you need to: 

  1. Enter the Visual Editor and edit the Product list – list view or Compact view column  
  2. Scroll down to the Advanced section.  
  3. In the Variant selector service page field link to the service page   
  4. Hit OK 

Now your column should, either by default or manually, link to the service page.  

  

This service page is used for the related products list column.  It is also the foundation for the service page used for the Product list – list view and Product list – compact view Ecommerce columns. To keep the guides easy to read, we’ve separated the two service page guides. The guide for the service page for the two product list columns can be found here.  

To setup the related products list service page, you need first to create a new page: 

  1. Navigate to your service pages folder in the content tree
  2. Create a new page and call it “Related products list”. Make sure to check “Hide in menu” and hit OK 
  3. Add a new paragraph to the page  
  4. Scroll to the bottom, select App and name it “Related products list” 

When you’ve added the App column, you’ll need to configure it. Enter the app part of the paragraph. From the ECOMMERCE section choose “Product catalog for ViewModel”.  

  1. Choose a query on your products (Product.query) in the dropdown menu.   
  2. In the Facet groups move “Products.facets” to the Selected facets group by using the arrows 
  3. Scroll down to the Templates section.  
  4. Choose the “VariantProducts.cshtml” file in the List field 
  5. Hit Save and Close 

Now the service page is done. You’ll still need to link your related product list column with the service page. You can either link it manually in the advanced section in the column settings in the Visual Editor or give the service page a tag. It’s easier to use a tag, as this will let the column link to your service page by default. To do that: 

  1. Navigate to the related products list service page  
  2. Enter the properties of the page and go to options 
  3. Click “Navigation” and write “RelatedProductsListService” in the Navigation tag field  
  4. Hit OK on the modal 
  5. Hit Save and Close on the page settings.  

When this is done, your related products list service page is done. 

  

For the product slider/grid to work, you’ll need to setup a service page for it.  

  1. Start by navigating to your service page folder  
  2. Create a new empty page in the folder and call it “Related product slider/grid”. Make sure to toggle “Hide in menu” and hit OK 
  3. Add a new paragraph to the page  
  4. Scroll to the bottom, select App and name it “Related products slider/list” 

When you’ve added the App column, you’ll need to configure it. Enter the app part of the paragraph. From the ECOMMERCE section choose “Product catalog for ViewModel”. To configure the app, you: 

  1. Start by selecting a query on your products in the dropdown menu (Products.query)  
  2. Scroll down to the Templates section. 
  3. Choose the “ProductSlider.cshtml” file in the List field  
  4. Hit Save and Close 

Now the service page is done. To make the product slider work, you’ll either have to link your column with the page or set a “ProductSliderService” tag on the service page. If you want to use more than one product slider you probably want to go with the tag, but we’ll show both ways.  

To link the column with the service page, you have to: 

  1. Enter the Visual Editor and edit the product slider column  
  2. Scroll down to the Advanced section.  
  3. In the Product slider service page field link to the service page   
  4. Hit OK 

As written on the settings description if you use a “ProductSliderService” tag, this field will by default be linked with your service page. To create the tag: 

  1. Navigate to the product slider service page  
  2. Enter the properties of the page and go to options 
  3. Click “Navigation” and write “ProductSliderService” in the Navigation tag field 
  4. Hit OK on the modal 
  5. Hit Save and Close on the page settings 

Now by default your product sliders will link to the service page. 

The search results service page is used for the search field column. This page is needed for the dropdown and type ahead function to work. Follow this guide to create the search field service page or check if the settings are properly configured.

  1. Locate the service page folder in the content tree
  2. Create a new page and call it “Search results”. Make sure to keep it hidden in menu
  3. Create a new paragraph by clicking “new paragraph” in the toolbar
  4. Scroll to the bottom and choose App. Call it “Search results” and hit OK
  5. Enter the app settings in the toolbar and click Product catalog for ViewModel in the Ecommerce section

Now you’ll have to configure the app. There are a few things that needs to be done:

  1. In the Index section
    1. Choose a query on your products (Products.query) in the Query field.
    2. Select Type ahead as facet group in the Facet Groups field.
  2. In the Spell Check section
    1. Choose "Free text search" in the Field To Check field
    2. Choose “eq” in the query parameter field.
  3. In the Templates section
    1. Choose “ProductSearchDropdownResponse.cshtml” in the List field.
    2. Choose “Nothing selected” for all other templates fields.
  4. When this is done, remember to hit Save and Close.

You have now created the service page for the search field columns. You will need to link to this page to make the columns work properly.