Filter Block

The Filter block creates interactive filtering controls that allow users to search or filter content on your page. It supports four filter types: search input, region selection, tag category selection, and listing type selection. Filters work with both collection blocks and map blocks for dynamic content filtering.

Overview

The Filter block is used to provide user-controlled filtering functionality on pages with collection blocks and map blocks. It creates either a search input field or a dropdown select menu depending on the filter type chosen. The block automatically populates dropdown options from your Tourismo data and includes the necessary data attributes for JavaScript filtering functionality. Filter selections are saved in the URL for easy sharing and bookmarking.

Block Features & Options

Filter Type Options

• Search: Creates a text input field for keyword searching
• Region: Creates a dropdown with all available regions from your Tourismo data
• Tag Category: Creates a dropdown with tags from a specific category
• Listing Type: Creates a dropdown with all available listing types from your Tourismo data

Display Options

• Filter Placeholder: Custom text displayed in the input field or dropdown
• Tag Category: Required when using "Tag Category" filter type - selects which tag category to use
• Region Display Mode: Controls how hierarchical regions are displayed (only available for Region filter type):
  • Show Only Top/Parent Regions: Displays only top-level regions (default)
  • Show All Parent and Children: Displays all regions in a hierarchical format (e.g., "Canada > Alberta")
  • Show Only Current Region Children: Displays only the child regions of the current page's region (only available on region pages)

Layout Options

• Custom CSS Class: Add custom CSS classes for styling

How it Works

The Filter block fetches data from your Tourismo API based on the selected filter type:

• Region filters pull from the regions list and can display either top-level regions only or the full hierarchical structure (uses is_tree=true parameter for hierarchical modes)
• Tag category filters pull tags from the specified category
• Listing type filters pull from the listings main types list
• Search filters create a simple text input

The block renders with specific data attributes (data-itin-filter="true" and data-itin-filter-type) that enable JavaScript filtering functionality when used with collection blocks and map blocks on the same page.

Integration with Collection Blocks

When used with collection blocks (Listings, Events, etc.):

• Filters show/hide items based on the selected criteria
• Search filter performs text matching on visible content
• Multiple filters work together to refine results

Integration with Map Blocks

When used with map blocks:

• Region filters: Map re-fetches and displays only locations from the selected region
• Tag filters: Map displays only locations with the selected tag
• Listing type filters: Map shows only listings of the selected type
• Map automatically re-renders markers when filter selections change
• Filter selections are saved in URL parameters (e.g., ?filter-region=vancouver-island)

Smart Filter Option Management

Filter dropdowns intelligently enable/disable options based on available content:

• Map-only pages: All filter options remain enabled (no restrictions)
• Pages with searchable items: Options are enabled/disabled based on item availability
• Mixed pages (map + searchable items): Options consider both content sources
• Tag filters: Only check searchable items (map markers don't include tag data)
• Region/Listing type filters: Check both searchable items and map markers

How to Add & Configure

1. Add the Filter block to your page using the block editor
2. Select Filter Type from the block settings sidebar:
   • Choose "Search" for text-based filtering
   • Choose "Region" for region-based filtering
   • Choose "Tag Category" for tag-based filtering
   • Choose "Listing Type" for listing type-based filtering
3. Configure Filter Placeholder with custom text for the input/select field
4. Select Region Display Mode (if using region filter type):
   • Choose "Show Only Top/Parent Regions" for a simple list of main regions
   • Choose "Show All Parent and Children" to include sub-regions in a hierarchical format
   • Choose "Show Only Current Region Children" to display only sub-regions of the current page's region (only available on region pages)
5. Select Tag Category (if using tag category filter type) from available categories
6. Add Custom CSS Class if needed for styling

Shortcode Usage

Basic Shortcode

[tourismo-filter]

Available Options

Examples

Search Filter:

[tourismo-filter filter_type="search" filter_placeholder="Search itineraries..."]

Region Filter (Top Level Only):

[tourismo-filter filter_type="region" filter_placeholder="Select a region"]

Region Filter (Hierarchical):

[tourismo-filter filter_type="region" region_display_mode="hierarchical" filter_placeholder="Select a region"]

Region Filter (Current Region Children):

[tourismo-filter filter_type="region" region_display_mode="current-region-children" filter_placeholder="Select a sub-region"]

Tag Category Filter:

[tourismo-filter filter_type="tag-category" tag_category="activities" filter_placeholder="Select activity type"]

Listing Type Filter:

[tourismo-filter filter_type="listing-type" filter_placeholder="Select listing type"]

Content Displayed

The Filter block displays a single form control that changes based on the filter type:

• Search type: Text input field with search icon
• Region type: Dropdown select menu with populated options
  • Top-level only mode: Shows main regions like "Canada", "United States"
  • Hierarchical mode: Shows full structure like "Canada", "Canada > Alberta", "Canada > BC"
  • Current region children mode: Shows only sub-regions of the current page's region (e.g., "Alberta", "BC" when on a Canada page)
• Tag type: Dropdown select menu with populated options
• Listing type: Dropdown select menu with populated options from your Tourismo listing types

The block uses Bootstrap styling with the .itin prefix and includes responsive grid layout. The form control is wrapped in a container with appropriate CSS classes for styling and JavaScript targeting.

Typical Usage Examples

Directory Page with Map

[tourismo-filter filter_type="region" filter_placeholder="Filter by Region"]
[tourismo-filter filter_type="listing-type" filter_placeholder="Filter by Type"]
[tourismo-map show_listings_markers="true"]

Users can filter the map by region and listing type.

Event Calendar with Filters

[tourismo-filter filter_type="region" filter_placeholder="Select Region"]
[tourismo-filter filter_type="tag-category" tag_category="event-type" filter_placeholder="Event Type"]
[tourismo-events display_mode="grid"]

Users can filter events by region and event type category.

Mixed Content Page

[tourismo-filter filter_type="listing-type" filter_placeholder="Select Type"]
[tourismo-listings display_mode="grid"]
[tourismo-map show_listings_markers="true"]

Filters apply to both the listing grid and the map simultaneously.

Related Blocks

• Map – Interactive maps with filter integration
• Collection Blocks: Use filter blocks with collection blocks (Itineraries, Listings, Events, etc.) to enable user filtering
• Content Blocks: Often used alongside other content blocks in template pages