Customize amenities filter

In the FTW-daily template, there are two example filters: amenities and category.

In this tutorial, we change the options inside amenities filter, but the same approach works with category filter too.

Update Amenities filter

The configuration for the default filters on the search page can be found from file: marketplace-custom-config.js

└── src
    └── marketplace-custom-config.js

└── src
    └── config
        └── marketplace-custom-config.js

In that file, the filters and their configs are listed in an array:

export const filters = [

If you find amenities from that list, you should see some basic info. E.g. 'amenities' filter is actually of type SelectMultipleFilter, which is the component that actually renders the amenities filter on search page. In the config section, you can find options:

{
  id: 'amenities',
  label: 'Amenities',
  type: 'SelectMultipleFilter',
  group: 'secondary',
  queryParamNames: ['pub_amenities'],
  config: {
    // Schema type options: 'enum', 'multi-enum'
    // Both types can work so that user selects multiple values when filtering search results.
    // With "enum" the functionality will be OR-semantics (Nike OR Adidas OR Salomon)
    // With "multi-enum" it's possible to use both AND and OR semantics with searchMode config.
    schemaType: 'enum',

    // Optional modes: 'has_all', 'has_any'
    // Note: this is relevant only for schema type 'multi-enum'
    // https://www.sharetribe.com/api-reference/marketplace.html#extended-data-filtering
    searchMode: 'has_all',

    // "key" is the option you see in Flex Console.
    // "label" is set here for this web app's UI only.
    // Note: label is not added through the microcopy files
    // to make filter customizations a bit easier.
    options: [
      {
        key: 'towels',
        label: 'Towels',
      },
      {
        key: 'bathroom',
        label: 'Bathroom',
      },
      // other options
    ],
  },
},

This option syntax has two properties:

• key:

  Key is saved to listing's public data when the listing is created.

  

• label:

  Label is just a hard-coded string that is shown in the UI. So, there are no microcopy for these in en.json file. It's easier to modify options this way - just change the content of marketplace-custom-config.js.

We want amenities to be related to our cottage-rental marketplace. We'll use the following options:

options: [
  {
    key: 'terrace',
    label: 'Terrace',
  },
  {
    key: 'bathroom',
    label: 'Bathroom',
  },
  {
    key: 'swimming_pool',
    label: 'Swimming pool',
  },
  {
    key: 'jacuzzi',
    label: 'Jacuzzi',
  },
  {
    key: 'lake_view',
    label: 'Lake view',
  },
  {
    key: 'sea_view',
    label: 'Sea view',
  },
  {
    key: 'barbeque',
    label: 'Barbeque',
  },
  {
    key: 'fireplace',
    label: 'Fireplace',
  },
];

After you have saved the file, you should see the following options on the search page:

  {
    id: 'view',
    label: 'View',
    type: 'SelectSingleFilter',
    group: 'secondary',
    queryParamNames: ['pub_view'],
    config: {
      // Schema type is enum for SelectSingleFilter
      schemaType: 'enum',
      options: [
        { key: 'sea', label: 'Sea' },
        { key: 'lake', label: 'Lake' },
        { key: 'forest', label: 'Forest' },
        { key: 'garden', label: 'Garden' },
        { key: 'other', label: 'Other' },
      ],
    },
  },

Then you need to create listings, which have some of these amenities selected.

How to take the filter into use?

Amenities filter is just an example filter component since quite many marketplaces would need something like that. However, it is not added to the search engine by default, because it might be that the relevant key is not actually called amenities but something different. (E.g. kitchenware could be a similar multi-enum filter for a cottage-rental marketplace.)

If we want to make sdk.listing.query endpoint to understand that listings have a new public data field, we need to add search schema for it. Otherwise, this additional data is just gibberish to the search engine. Search schema can be added with Flex CLI.

Install Flex CLI

Quick start

yarn global add flex-cli
flex-cli login

The last command will prompt you your API key, which you need to create in Flex Console (Account > API keys).

Read more about how to install Flex CLI.

Set search schema with Flex CLI

When you have installed Flex CLI to your command line environment, we can set the search schema for amenities public data key. Since one listing can have multiple amenities, the schema type is multi-enum.

flex-cli search set --key amenities --type multi-enum --scope public -m my-marketplace-dev

Basically this command says that we set a new search index for the search engine:

• --key amenities: key for this new searchable data is amenities.

• --type multi-enum: the type is an enumeration with an array of choices.

• --scope public: key can be found from the public data section of a listing entity.

  Read more about public data.

• -m my-marketplace-dev: your marketplace ID.

  With CottageDays dev marketplace, the ID is cottagedays-dev. You can check your marketplace ID from Flex Console (Build section).

Read more about setting search schemas with Flex CLI.

flex-cli search set --key category --type enum --scope public -m my-marketplace-dev

After all these changes, the client app starts to look like a CottageDays marketplace. It's time to get it online and share it with people who could give you some feedback. In the next article, we'll deploy the app to Render.
› Go to the next article