With Rezfusion Hub you can add scripts to a page that will automatically filter the search results by an amenity, such as Pet Friendly, or Oceanfront. For this example we are going to create a page on our website to show only Hot Tub properties. The SEO team wants our landing page at https://www.rezfusionhubdemo.com/hot-tub-properties . This provides a clean url and a great place for the content team to add relevant content to that page.
The example site.
Our demo website, https://www.rezfusionhubdemo.com/vacation-rentals is a Squarespace website.
We already have our main search page done and for this example, our script on that page looks like this:
<div id="app"> <script src="https://assets.rezfusion.com/bluetent/channels/httpswwwrezfusionhubdemocom/bundle.js"> </script> </div>
Step 1. - Confirm your amenity is in your search filter
Be sure the value (amenity) you want to be filtered on the page is already in your search filters. Since a landing page is pre-filtering the search page, we need to make sure in Hub our amenity, Hot Tub Properties is properly setup.
Select CHANNELS in the top menu. Then select MANAGE next to the name of the channel you are working on. Scroll down the page to find your amenity. Hot Tub Properties is a custom value located in the Custom Category Amenities. You can see by the screen shot, Hot Tub properties is selected to show in the search filters.
Step 2. - Get your amenity ID in Hub
Select Manage next to the amenity. When you are on the amenity page, you will see in the browser bar, your amenity ID.
This example you can see at the end in the browser bar is: categories/custom/214/custom-values/3646
For our example site, the category is Amenities, and the value is Hot Tub. Copy both the category number and value number to be used later in your new code for your website landing page.
Step 3. Create the page on your website. For our example we have create one at: /hot-tub-properties
This step is easy, simply create a page on your website. You don’t need to worry about the path of the page, it can be a path that works for your SEO strategy.
Step 4. Get the code to drop into your landing page on your website.
Copy and paste the following code on yo your website, but you need to change three things because this is for the demo.
cat_id: change this number to your category number.
values: change this number to your value number.
change the script in the last line to your Hub script.
<div id="app">
</div>
<script>
window.REZFUSION_COMPONENTS_CONF = {
settings: {
components: {
SearchProvider: {
filters: {
categoryFilter:{
"categories": [
{
"cat_id": 214,
"values": [3646],
"operator": "AND"
}
]
}
}
}
}
}
};
</script>
<script src="https://assets.rezfusion.com/bluetent/channels/httpswwwrezfusionhubdemocom/bundle.js">
</script>
That’s it, you should see your search page now automatically filtering by the amenity you selected.
Advanced notes on other techniques.
## Category Filtering
Category filtering can be performed through URL search parameters.
### Format
The filter format is JSON as in the following example:
```json
{
"categories": [
{
"cat_id": 1,
"values": [2],
"operator": "AND"
}
]
}
```
- `categories` is an array of filters.
- `cat_id` is an integer corresponding to the category.
- `values` is an array of value IDs corresponding to the category values to filter by.
- `operator` is one of `"AND"` or `"OR"` and determines whether a property must match every value or any value to pass the filter.
### Filtering By Search Parameter
The filter can be URI encoded and passed as a URL search parameter.
As a search parameter, the example looks like this: `categoryFilter={"categories"%3A[{"operator"%3A"AND"%2C"values"%3A[2]%2C"cat_id"%3A1}]}`
This example will only show search results that have the category value with ID 2 for the category with ID 1.
### Filtering by Javascript global
The application will check `window.REZFUSION_COMPONENTS_BUNDLE_CONF.settings.components.SearchProvider.filters.categoryFilter` for initial category filter settings. Note that if the `window.REZFUSION_COMPONENTS_BUNDLE_CONF` object already exists, overwriting it could override other configuration settings and cause unexpected behavior.
### Determining IDs
Category IDs and category value IDs can be determined a few ways.
#### Hub Dashboard
1. Log in to the Hub dashboard at https://hub.rezfusion.com
2. Navigate to the channel in question
3. On the left sidebar, click "View All Custom Categories"
This will take you to a list of categories. If you click on the "Manage" link for a category, that category's ID will be the last part of the path in the URL.
The page for a category includes a list of values associated with that category. Clicking on the "Manage" link for a category value will take you to the page associated with that category value. The category value will be the last part of the path in the URL.
#### HTML
1. View the search page for the website in question.
2. Click the "Filters" button to open the filters modal.
3. Inspect the modal in your web browser (usually F12)
Each category that can be filtered is contained in a div with class `bt-category`. The category ID can be found in the `data-category` property on the corresponding div. The human-readable name of the category is contained in an `h4` inside the div.
The same `bt-category` div also contains all the category values for that category. Each category value is contained in an `li` with a class `bt-category-filter` as well as a class `value-n`, where n is the ID of that value.
#### GraphQL
In most browsers, the HTTP requests used to populate the front end application with data can be viewed through the developer tools. On initial load for the search page, one GraphQL request is made to retrieve property data, and one is made to retrieve category data. In the response to the category data request, the category and category value IDs and human-readable names can be viewed in the JSON response.
Example of the format:
```JSON
{
"data": {
"categoryInfo": {
"categories": [
{
"name": "Category One",
"id": 1,
"values": [
{
"name": "category one, value one",
"id": 1
},
{
"name": "category one, value two",
"id": 2
}
]
},
{
"name": "Category Two",
"id": 2,
"values": [
{
"name": "category two, value one",
"id": 1
}
]
}
]
}
}
}
```
#### React Developer Tools
In deployed versions of Hub, component names are minimized, making it difficult to find specific components. Nonetheless, both categories and category values are keyed by their IDs. Categories are found in `CategoryFilter` components, and category values are found in `styled.li` components.
Additionally, each `CategoryFilter` component receives its category ID and all of its associated values as props.