Itinerary Block
Displays a detailed itinerary with stops, events, and an interactive map. This block shows the complete journey including legs (days/segments), individual stops, and provides both list and map views.
Overview
The Itinerary block is used on template pages to display a complete itinerary with all its components. It shows the itinerary name, description, and organizes stops into legs (days or segments). Each stop can be a listing, event, or informational note. The block provides both a detailed list view and an interactive map view with numbered markers.
Use cases:
- Display a complete travel itinerary with multiple stops
- Show day-by-day journey breakdowns
- Provide interactive map navigation
- Present events and listings in chronological order
Block Features & Options
Display Modes
- List View: Detailed stop-by-stop breakdown with descriptions and contact information
- Map View: Interactive map with numbered markers for each stop
- Tabbed Interface: Switch between list and map views (mobile-responsive)
Layout Options
- Leg Titles: Show/hide day/segment titles
- Leg Introductions: Display introductions for each leg
- Stop Numbering: Numbered badges for each stop
- Responsive Design: Mobile-optimized with collapsible navigation
Content & Filter Options
- Itinerary Selection: Choose specific itinerary or use page context
- Stop Information: Control display of names, descriptions, hero images
- Listing Information: Control display of names, descriptions, addresses, contact details, cities
- Event Details: Show/hide event costs, ticket links, websites, phone numbers, location details
- Media Display: Show/hide hero images for stops and notes
Display Toggles
- Itinerary Content: Name, description
- Itinerary Hero Image: Show hero image in two-column layout with name/description
- Stop Information: Names, descriptions, hero images
- Listing Information: Names, short descriptions, descriptions, cities, addresses, phone, email, website, booking links, tags
- Event Information: Name, description, cost, ticket URLs, website, phone, location details
- Region Information: Name, subtitle, short description, description (for region-type stops only)
- Leg Information: Titles, introductions, hero images
How it Works
The Itinerary block retrieves itinerary data from the Tourismo API and displays it in a structured format. It organizes stops into legs (representing days or segments) and renders each stop based on its type (listing, event, or note). The block provides both a detailed list view and an interactive map view with numbered markers corresponding to each stop.
Data flow:
- Retrieves itinerary data (either from page context or specific itinerary ID)
- Organizes stops into legs with proper numbering
- Renders each stop type appropriately (listing, event, region, or note)
- Displays comprehensive listing, event, and region details based on attribute settings
- Shows hero images for itinerary, legs, and individual stops
- Generates map markers for stops with coordinates
- Provides tabbed interface for list/map views
How to Add & Configure
- Add the block to a template page (Itinerary page type)
- Configure itinerary source:
- If on an Itinerary template page: automatically uses page context
- If on other page types: select specific itinerary from dropdown
- Set display options in the block sidebar:
- Toggle itinerary name and description
- Configure stop information display
- Set event detail visibility
- Control leg title and description display
- Preview the block to see both list and map views
Shortcode Usage
Basic Shortcode
[tourismo-itinerary]
Available Options
| Option | Type | Default | Description |
|---|---|---|---|
linked_page_id |
string | "" | Required - ID of the linked listing page |
linked_region_page_id |
string | "" | Required - ID of the linked region page |
custom_template_name |
string | "" | Custom template name for advanced customization |
specific_itinerary |
string | "" | Specific itinerary ID (if not using page context) |
itinerary_region_id |
string | "" | Region ID for the itinerary |
class_name |
string | "" | Additional CSS classes |
align |
string | "full" | Block alignment (left, center, right, full) |
show_image |
boolean | false | Show itinerary hero image in two-column layout |
show_name |
boolean | true | Show itinerary name |
show_description |
boolean | true | Show itinerary description |
show_stop_name |
boolean | true | Show stop names |
show_stop_description |
boolean | true | Show stop descriptions |
show_stop_hero |
boolean | false | Show hero images for stops |
show_listing_name |
boolean | true | Show listing names |
show_listing_short_description |
boolean | false | Show listing short descriptions |
show_listing_description |
boolean | false | Show listing descriptions |
show_listing_city |
boolean | false | Show listing cities |
show_listing_address |
boolean | false | Show listing addresses |
show_listing_phone |
boolean | false | Show listing phone numbers |
show_listing_email |
boolean | false | Show listing email addresses |
show_listing_website |
boolean | true | Show listing websites |
show_listing_booking_link |
boolean | false | Show listing booking links |
show_listing_tags |
boolean | false | Show listing tags |
show_leg_title |
boolean | true | Show leg titles |
show_leg_introduction |
boolean | false | Show leg introductions |
show_leg_hero |
boolean | false | Show leg hero images |
show_event_cost |
boolean | true | Show event costs |
show_event_ticket_url |
boolean | true | Show event ticket URLs |
show_event_website |
boolean | true | Show event websites |
show_event_phone |
boolean | false | Show event phone numbers |
show_event_location |
boolean | true | Show event location details |
show_event_name |
boolean | false | Show event names |
show_event_description |
boolean | false | Show event descriptions |
show_region_name |
boolean | false | Show region names |
show_region_short_description |
boolean | false | Show region short descriptions |
show_region_description |
boolean | false | Show region descriptions |
show_region_subtitle |
boolean | false | Show region subtitles |
Practical Examples
Basic itinerary display:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456"]
Itinerary with minimal information:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_listing_address="false" show_listing_phone="false" show_listing_email="false" show_listing_tags="false"]
Itinerary with enhanced event details:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_event_cost="true" show_event_ticket_url="true" show_event_website="true" show_event_phone="true"]
Itinerary with comprehensive listing details:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_listing_name="true" show_listing_short_description="true" show_listing_description="true" show_listing_city="true" show_listing_address="true" show_listing_phone="true" show_listing_email="true" show_listing_website="true" show_listing_booking_link="true" show_listing_tags="true"]
Itinerary with region-type stops:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_region_name="true" show_region_subtitle="true" show_region_short_description="true" show_region_description="true"]
Itinerary with hero image:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_image="true"]
Itinerary with leg hero images:
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" show_leg_hero="true"]
Specific itinerary (not on template page):
[tourismo-itinerary linked_page_id="123" linked_region_page_id="456" specific_itinerary="789"]
Content Displayed
The Itinerary block displays:
Itinerary Header:
- Itinerary name and description
- Hero image (optional, displays in two-column layout)
Legs (Days/Segments):
- Leg titles and introductions
- Numbered stops within each leg
Stop Types:
- Listings: Name, subtitle, short description, description, city, address, contact details, website, booking links, tags, hero images
- Events: Name, subtitle, description, cost, ticket links, website, phone, location, time, hero images
- Regions: Name, subtitle, short description, description, hero images
- Notes: Description, subtitle, and optional hero images
Note: Stop hero images are displayed at the end of each stop section, after all other content. Stop subtitle is available as a property and can be accessed via shortcodes ([itin-subtitle] and [itin-stripped-subtitle]).
Interactive Map:
- Numbered markers for each stop with coordinates
- Info windows with stop details
- Clickable links to stop pages
Navigation:
- Tabbed interface (list/map views)
- Mobile-responsive collapsible leg navigation
- Sticky navigation on mobile devices
Related Blocks
- Itineraries Block - Collection block for displaying multiple itineraries
- Map Block - Standalone interactive map
- Title Block - Display itinerary name separately
- Description Block - Show itinerary description independently