Advanced Amenity Filtering to Create Landing Pages
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.
You can see a demo of this here:
https://www.rezfusionhubdemo.com/hot-tub-properties