{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/change-search-filters-in-ftw/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Change search filters in FTW","slug":"change-search-filters-in-ftw","updated":"2022-06-14T00:00:00.000Z","category":"how-to-search","ingress":"This guide describes how to change the search filters in Flex Template for Web (FTW).","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The search experience can be improved by adding search filters to narrow\ndown the results. The filters rely on listing's indexed data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are 3 different UI contexts that render filters. On mobile layout,\nall the filters are rendered to modal inside "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersMobile"}]},{"type":"text","value":"\ncomponent. On desktop layout, there are "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersPrimary"}]},{"type":"text","value":" for most\nimportant filters and extra filters are put to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersSecondary"}]},{"type":"text","value":"\npanel which opens, when user clicks "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"More filters\""}]},{"type":"text","value":" button."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"filter-types","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filter-types","ariaLabel":"filter types permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Filter types"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Flex template for web has different filter types:\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDateRangeFilter"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"KeywordFilter"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"PriceFilter"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectSingleFilter"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectMultipleFilter"}]},{"type":"text","value":". Select single and\nselect multiple filters are generic in a way that they can be used to\nfilter search results using different kinds of data. The price, and date\nrange filters on the other hand are only used for filtering by price and\ndate range. Listings with hourly bookings can also be filtered by their\navailability in a date range with an optional minimum duration. Keyword\nfilter is a bit special case - there is more info about it later."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectSingleFilter"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectMultipleFilter"}]},{"type":"text","value":" can be used with\nextended data. The "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectSingleFilter"}]},{"type":"text","value":" can be used to filter out\nlistings with only one string value in related public data field. E.g.\nlisting's publicData attribute could contain: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"category: 'smoke'"}]},{"type":"text","value":". The\nrelated Marketplace API listing query could then be made with query\nparameter: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pub_category=smoke"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectMultipleFilter"}]},{"type":"text","value":" on the other hand can take multiple values\nfor a single search parameter. In this case, listing entity could\ncontain public data "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"amenities: ['towels', 'bathroom', 'jacuzzi']"}]},{"type":"text","value":" and\nthe query parameter, to retrieve that listing among other search\nresults, could be "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pub_amenities=has_any:jacuzzi,barbeque"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll tell you more about these filters later on in this article."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"keyword-filter","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#keyword-filter","ariaLabel":"keyword filter permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Keyword filter"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Keyword filter works a bit differently than other filters. It does\nfilter search results, but it also sorts those results according to\nstrongly listing data (title, description, and possible extended data)\ncorrelates with the search string. Currently, there is no decay function\nthat would map keyword match correlation with distance to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"origin"}]},{"type":"text","value":" and\ntherefore, the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"origin"}]},{"type":"text","value":" param can't be used at the same time as the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"keyword"}]},{"type":"text","value":". You can read more about how the keyword search works from\nrelated "},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/how-the-listing-search-works/"},"children":[{"type":"text","value":"background article"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/407ce/keyword-search.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 59.11949685534591%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACNUlEQVQoz5WTzUtUYRSH7x/RuhYtXLkqWrRQDNr0ZS4ihOhDMFpkH1AURIJEi8aUUCaMoGDAmiIkCASFqEUyYqam2YTOaOPcxpnGYWbu3K95733vE/cqogMKHTi8q9/znnN+5yhOYY2cmiabyWAV1vDDMQ00rYzjOPxvKELX0UslKppG1TBwHQdhWdiWFQCllLum60o8KdGFS7xoodiuxAKMqqBc1vA2fvLfdYEbgHdK4Th4rkPeFEykMyilmUmWex5S+hoLIPHhD4x23iWXWKBimhiGvgn139oMxiJdsrrNTPoHijo9xeeeR0yPjpJUV0nExph6HaGgphG+QIhAKITYhNZW6besmTqJle8oA9H37DnSyt6T7ew70c5MMoVWtSlWNIRTRXoSiYdt29uAWyuUrsS0KqTUWZS3H2M03ghx/MELWrqj/M4Xgwm6EMy2ikS41V2BvjG2rZPOTKLEJibpuH2PrlAfXd39jMXGmZ+bJxWfQ88vsvJrloL6B8PfgC3tbq/Qw7Q0UtlxlOhghIaD9Vy7eJbO65e52XaOrqttRO5fIf6qg/CtVhKLicAwxxE7Ai27zNLfbyjvooNcOnOaO+ebuXCqiQN1+znWeJjmo0001dfR0nCI1PJSsEpiw6Bal6X0qOglfi58QlGTSWIjIwwPDdEffkaot4+nzyOEX74h9CRM9+Necrns+gVtcbYWaFplltUvKGaxiLaaoVgqUSisBZdSG75gtz10g5Y1MvkY/wDNBWTkn6FuwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/82e29/keyword-search.webp 159w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/ef33f/keyword-search.webp 318w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/f1837/keyword-search.webp 635w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/29549/keyword-search.webp 953w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/c5420/keyword-search.webp 1270w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/031d4/keyword-search.webp 1912w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/8b9b5/keyword-search.png 159w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/fa108/keyword-search.png 318w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/53fb6/keyword-search.png 635w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/5a426/keyword-search.png 953w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/91155/keyword-search.png 1270w","/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/407ce/keyword-search.png 1912w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/9f4fda999ad5ac0256952fadb8ed4191/53fb6/keyword-search.png","alt":"Desktop filters","title":"Desktop filters","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to remove location search from topbar and replace it with\nthe keyword search or use them together (without origin param). Here's\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/how-to/use-keyword-search-in-topbar/"},"children":[{"type":"text","value":"a rough guide on how to do it"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: search strings with only 1 or 2 letters have a longer timeout\nbefore the search query is made."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"adding-a-new-search-filter","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#adding-a-new-search-filter","ariaLabel":"adding a new search filter permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Adding a new search filter"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next we'll guide you through the steps of adding a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"capacity"}]},{"type":"text","value":" filter to\nthe marketplace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First step for adding a new filter is to make sure that the data being\nused for filtering is saved in the listing's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"publicData"}]},{"type":"text","value":" attribute. On\nhow to achieve this, please refer to the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/how-to/extend-listing-data-in-ftw/"},"children":[{"type":"text","value":"Extend listing data in FTW"}]},{"type":"text","value":" how-to\nguide. Another aspect in search filters is that a\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/references/extended-data/#search-schema"},"children":[{"type":"text","value":"search schema"}]},{"type":"text","value":" needs to be\nadded to the data in order for API to index it for search. Adding search\nschema can be done by the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/introduction/getting-started-with-flex-cli/"},"children":[{"type":"text","value":"Flex CLI"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once a public data attribute is added to the listings and the data\nattribute is indexed, the listing searches can be filtered by that\nattribute by adding a query parameter that consists of a preceding\n\"pub_\" and the attribute name, so for the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"capacity"}]},{"type":"text","value":" attribute the\nparameter would be \"pub"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"capacity\". You might have guessed that \"pub_\"\nrefers to public data, \"meta_\" would refer to _metadata"}]},{"type":"text","value":", which is\nanother type of extended data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Further reading on public data can be found in the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/how-to/extend-listing-data-in-ftw/"},"children":[{"type":"text","value":"Extend listing data in FTW"}]},{"type":"text","value":" how-to\nguide."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Only top-level attributes can be indexed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"common-changes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#common-changes","ariaLabel":"common changes permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Common changes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A few common changes are required to add a select single or a select\nmultiple filter to desktop and mobile views."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First of all, filter configurations need to be defined in the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"marketplace-custom-config.js"}]},{"type":"text","value":" file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── marketplace-custom-config.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"FTW-product has moved config files into a different location"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── config\n        └── marketplace-custom-config.js"}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There you need to add the capacity filter's configurations to the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filters"}]},{"type":"text","value":" array:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'capacity'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Capacity'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"type"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'SelectSingleFilter'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"group"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'secondary'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"queryParamNames"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'pub_capacity'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Schema type is enum for SelectSingleFilter"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"schemaType"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'enum'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n      "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"options"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"key"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'1to3'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'1 to 3'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"key"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'4to6'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'4 to 6'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"key"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'7to9'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'7 to 9'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"key"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'10plus'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'10 plus'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":": you might have done this already if you followed the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/how-to/extend-listing-data-in-ftw/"},"children":[{"type":"text","value":"Extend listing data in FTW"}]},{"type":"text","value":"\nhow-to guide."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the above configuration, we defined filter's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"id"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":". The\nlabel is not modified through the microcopy file (e.g. "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"en.json"}]},{"type":"text","value":"),\nbecause we thought that having it here would make customizations easier.\nHowever, you could use\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"<FormattedMessage id=\"some.microcopy.key.here\" />"}]},{"type":"text","value":" component instead of\nplain string if you want."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" configuration refers to existing filter component. The current\nfilters that can deal with extended data are: SelectSingleFilter, and\nSelectMultipleFilter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"group"}]},{"type":"text","value":" can be 'primary' or 'secondary'. On desktop layout, primary\nfilters are those which are visible by default and secondary filters are\nnot visible. You can open secondary filters panel by clicking \"More\nfilters\" button."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"queryParamNames"}]},{"type":"text","value":" is defining the query parameter key(s) that the filter\ncomponent can handle. For "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectSingleFilter"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SelectMultipleFilter"}]},{"type":"text","value":", you should use query param names that point to\nMarketplace API query params. For example, if you have "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"amenities\""}]},{"type":"text","value":"\nfield in your listing's public data, the correct name for the query\nparameter should be "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pub_amenities"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"config"}]},{"type":"text","value":" would contain any filter specific configurations. For example,\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"PriceFilter"}]},{"type":"text","value":" has price range ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"min"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":") defined there."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a summary, that new filter configuration in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filters"}]},{"type":"text","value":" array, is\nenough to render "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"capacity"}]},{"type":"text","value":" filter on search page. That is, if you have\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"capacity"}]},{"type":"text","value":" field defined in listing's public data and that public data\nhas correct schema added to the search engine using\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/introduction/getting-started-with-flex-cli/"},"children":[{"type":"text","value":"Flex CLI"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"creating-your-own-filter-types","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#creating-your-own-filter-types","ariaLabel":"creating your own filter types permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Creating your own filter types"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are creating new filter types note that we are using two\ndifferent types of components: popup and plain. Popup components are\nrendered as primary dropdowns in the search view in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersPrimary"}]},{"type":"text","value":" component. Plain components are used with\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersMobile"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchFiltersSecondary"}]},{"type":"text","value":".\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"SearchFiltersSecondary"}]},{"type":"text","value":" opens sacondary filters in a distinct panel in\norder to fit additional filters to the desktop search view."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To make creating new filters easier, there are two generic components:\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"FilterPoup"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"FilterPlain"}]},{"type":"text","value":". These components expect that you give\nform fields as child component. Check "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SelectMultipleFilter"}]},{"type":"text","value":" to see how\nthese components work."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you have your custom filter component ready, you need to add it to\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SearchPage/FilterComponent.js"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n        └── SearchPage\n            └── FilterComponent.js"}]}]}]}],"data":{"quirksMode":false}},"headings":[{"value":"Filter types","depth":2},{"value":"Keyword filter","depth":2},{"value":"Adding a new search filter","depth":2},{"value":"Common changes","depth":3},{"value":"Creating your own filter types","depth":2}]}},"pageContext":{"slug":"change-search-filters-in-ftw","category":"how-to-search"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}