Tutorial: Grouping products by category

You can configure the Developer Portal so that products are displayed in groups according to the category that they are tagged with.

You can use the Views module to fetch content from your Developer Portal site, such as lists of products, and present the content to users in different formats. You can combine multiple views on a new page to display whatever content you want.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this tutorial you create three views in the Developer Portal, each one is configured to display a list of products according to their category. You then create a new page to show the views, where you see products that are grouped by category.

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Create three new taxonomy tags.
    1. Navigate to Structure > Taxonomy > Tags.
    2. Click Add term.
    3. Enter Accounts in the Name field and click Save.
    4. Enter Logistics in the Name field and click Save.
    5. Enter Marketing in the Name field and click Save.
    6. Navigate to Structure > Taxonomy > Tags to show the list of the new tags.

      List with new tags

  4. Create a view to display products with the Accounts category.
    1. Navigate to Structure > Views > Add new view.
    2. Enter Accounts products in the View name field.
    3. In View Settings, select Show: Content, of type: Product, sorted by: Newest first, from the drop-down lists.
    4. In Page settings leave the Create a page cleared.
    5. In Block settings select Create a block and enter Accounts products in the Block title.
    6. Ensure Block Display Settings has Display format: Masonry, of: tiles (linked), and select Use a pager.

      Adding accounts category

    7. Click Save and edit.
  5. Configure the view block settings.
    1. Under the Format section click the Fields link next to the Show label.
    2. In the dialog box, select the Content radio button then click Apply.
    3. Select Card from the View mode drop-down list, then click Apply.
    4. Click Add next to the Filter Criteria section.
    5. In the dialog box, search for tag then select the option Tags (apic_tags) from the list then click Add and configure filter criteria.
    6. In the next dialog box, select the Tags radio button and the Client-side hierarchical then click Apply and continue.
    7. Next set the Operator to Is all of, and from the Select terms from vocabulary Tags drop-down select Accounts and click Apply.
    8. Under the Advanced options, click the None link next to the CSS class label.
    9. If you are using the default API connect theme, then enter the CSS class name product-view and click Apply. If you have your own css class that you want to use, then enter its name in here instead.
    10. Click Save to save all the changes.

    View of the block setup settings

  6. Create a view for the Logistics products.
    1. Select Structure > Views.
    2. Navigate to the Accounts products view and select the Duplicate option.
    3. Give the duplicated view the name Logistics products and click Duplicate.
    4. Click the Title Accounts products and change it to Logistics products and click Apply.
    5. Under the Filter Criteria section click the Content: Tags: (=Accounts) link.
    6. Change the value in the Select terms from vocabulary Tags drop-down to Logistics and click Apply.
    7. Click Save to save all the changes.
  7. Repeat step 6 for Marketing products.
  8. Next, create a page to display the views.
    1. Select Structure > Pages.
    2. Click Add page.
    3. Enter Products by category in the Administrative title, and products-by-category in the Path. Select the Panels option from the Variant type drop-down list then click Next.

      View of setting page options

    4. Change the Label value to Products grouped by category and set the Builder to Standard then click Next.
    5. From the Layout drop-down list select the value Three column then click Next.
    6. Leave all the defaults on the next page and click Next.
    7. Click +Add new block.
    8. Select Accounts products from the Lists (views) section.
    9. Ensure that Display tile is selected and Region is set to Left, click Add block.

      View of adding the accounts block

    10. Click Add new block. Select Logistics products view from the list and set the Region to Middle, click Add block.
    11. Click Add new block. Select Marketing products view from the list and set the Region to Right, click Add block.
    12. Enter Products grouped by category in the Page title field, and click Finish.

      View of block settings with the product categories added

  9. From your API Manager, create three new products, or update existing ones, to give each one a category value of either Accounts, Logistics, or Marketing. Publish each of the products to the catalog with the configured Developer Portal.
  10. Check that the Products grouped by category page shows your published products by category.
    1. Select Structure > Pages.
    2. Click the /products-by-category path link.
    3. You are redirected to the /products-by-category page and can see the products that you assigned to these categories.

What you did in this tutorial

You created three new views in the Developer Portal, and configured each one to display a list of products according to their category. You then created a new page to show the views.

View showing results