Create Blocks for a Functional Search Results Page

[ashleyshaw]

Create Blocks for a Functional Search Results Page for the Tour Operator Plugin

Description:
To create a seamless and user-friendly search results experience, we need to develop a series of blocks that will be used to construct the search results page. Each block will serve a specific purpose, improving usability and customization for the end-user.

1. Search Results Title Block

• Purpose: Display a title above the search results.
• Options:
  • Show or hide the search term in the title.
  • Customizable text and background colors.
  • Typography settings: font size, line height, letter spacing, etc.
  • Padding controls for spacing around the block.
• Placement: Best used in the Full Site Editor within the template for search results.

2. Search Form Block

• Purpose: Allow users to input search queries related to tours.
• Features:
  • Integration with filtering blocks for dynamic search refinement.
  • AJAX-based search functionality for smooth interactions.

3. Custom Filtering Blocks

These blocks will allow users to refine search results with specific criteria:

• Filtering by Sticky Posts
• Price Slider
• Filtering by Custom Field
• Filtering by Taxonomy
• Filtering by Date
• Filtering by "On Sale"
• Filtering by Post Parent / Connected Posts (e.g., destinations)
• Clear All Filters Block: Clear all applied filters.
• Active Filters Block: Display currently active filters.

4. Sorting Block

• Types: Sort options include alphabetical, chronological, and price-based sorting.
• Display Settings: Customizable label, sorting direction, and display controls.
• Functionality: Supports sorting without reloading the page for a better user experience.

5. Number of Results Block

• Purpose: Display the number of results returned by the search.
• Customization: Allow styling to match the site's design.

6. Map Search Results Block

• Purpose: Display search results on a map view.
• Integration: Syncs with geolocation data from tour posts to show location-based results.

7. Pagination Block

• Purpose: Navigate through multiple pages of search results.
• Options: Customizable pagination style and controls.

References:

• Creating a Custom Search
• Styling Custom Searches
• Filtering Custom Lists of Posts

Acceptance Criteria:

• All blocks should be implemented and available for use in the block editor.
• Search results page must be responsive and offer a smooth, dynamic user experience.
• Block designs should align with the LSX Design theme's standards.