Skip to main content

​
Explore Page

The Explore page (dashboard-explore.html) is your gateway to discovering experiences and guides across Mexico. It provides comprehensive filtering and search capabilities to find exactly what you’re looking for.

​
Search and Filters

​
Category Filters

Filter experiences by category to narrow your search:

All

View all available experiences

Gastronomía

Culinary tours, food markets, cooking classes

Aventura

Hiking, cenotes, outdoor activities

Historia

Historical sites, architecture tours

Cultura

Art workshops, traditional crafts, cultural immersion
// Category filtering implementation
function filterItems() {
  const query = searchInput.value.trim().toLowerCase();
  return items.filter(item => {
    const passFilter = 
      activeFilter === 'all' || item.category === activeFilter;
    
    if (!passFilter) return false;
    
    if (!query) return true;
    return (
      item.title.toLowerCase().includes(query) ||
      item.location.toLowerCase().includes(query) ||
      item.tags.some(tag => tag.toLowerCase().includes(query))
    );
  });
}

​
Text Search

The search input filters results in real-time by:
  • Experience titles: “Sabores de Oaxaca”, “Ruta de Cenotes”
  • Locations: “Ciudad de México”, “Tulum”
  • Tags: “Gastronomía”, “Naturaleza”, “Fotografía”
Combine category filters with text search for precise results. For example, select “Aventura” and search “cenotes” to find cenote adventures.

​
Experience Cards

Each experience card displays comprehensive information:

​
Card Structure

// Experience data model
{
  "id": "exp_1",
  "title": "Sabores de Oaxaca",
  "location": "Oaxaca, México",
  "category": "gastronomia",
  "tags": ["Gastronomía", "Cultura"],
  "rating": 4.9,
  "priceLabel": "$850 MXN / persona",
  "image": "experience-image-url"
}

​
Visual Elements

1

Cover Image

High-quality photos showcasing the experience with background-image styling
2

Rating Badge

Star icon with numeric rating displayed in the top-right corner
<span class="explore-card__rating">
  <span class="material-symbols-outlined">star</span>
  4.9
</span>
3

Favorite Button

Heart icon button to save experiences to your favorites
const toggleFavorite = async (itemId) => {
  await api.post(`/tourist/explore/favorites/${itemId}/toggle`);
};
4

Experience Badge

Label indicating this is an “Experiencia” (experience)

​
Card Body

The card body includes:
  • Title: Experience name in heading format
  • Location: Pin icon with city/region
  • Tags: Categorization chips (e.g., “Aventura”, “Naturaleza”)
  • Price: Per-person cost in Mexican Pesos
<div class="explore-card__body">
  <h3 class="explore-card__title">Ruta de Cenotes</h3>
  <p class="explore-card__meta">
    <span class="material-symbols-outlined">location_on</span>
    Tulum, Quintana Roo
  </p>
  <div class="explore-card__tags">
    <span class="explore-card__tag">Aventura</span>
    <span class="explore-card__tag">Naturaleza</span>
  </div>
  <div class="explore-card__footer">
    <span class="explore-card__price">$1,240 MXN / persona</span>
  </div>
</div>

​
Favorites System

​
Adding to Favorites

Click the heart icon on any experience card to save it to your favorites: 
// Toggle favorite handler
card.querySelector('[data-toggle-favorite]')?.addEventListener('click', async (event) => {
  event.stopPropagation();
  const itemId = event.currentTarget.getAttribute('data-toggle-favorite');
  
  try {
    if (window.KCTouristApi) {
      await window.KCTouristApi.explore.toggleFavorite(itemId);
    }
  } catch (error) {
    console.warn('Toggle favorite error:', error);
  }
});

​
Managing Favorites

Access your saved items from:
  • Dashboard sidebar: “Favorites” navigation item
  • Dashboard home: “Saved Guides” section
  • Dedicated favorites page: dashboard-favorites.html
Favorites are stored per-user account. Make sure you’re logged in to save favorites across sessions.

​
Guide Discovery

​
From Dashboard Recommendations

The home dashboard shows personalized guide recommendations: 
// Recommended guides data structure
{
  "id": "g_1",
  "name": "Ana García",
  "rating": 4.9,
  "tags": ["Montaña", "Historia"],
  "desc": "Especialista en rutas de senderismo y patrimonio en Hidalgo y Puebla.",
  "priceMXN": 450,
  "image": "guide-profile-image"
}

​
Guide Card Features

Shows guide rating with star icon:
<div class="guide-card__rating">
  <span class="material-symbols-outlined">star</span>
  <span>4.9</span>
</div>
Quick-view chips showing guide expertise:
<div class="guide-card__tags">
  <span class="guide-card__tag">Montaña</span>
  <span class="guide-card__tag">Historia</span>
</div>
Brief bio explaining the guide’s specialization and coverage area
Hourly rate in Mexican Pesos:
const formatMoneyMXN = (value) =>
  new Intl.NumberFormat('es-MX', {
    style: 'currency',
    currency: 'MXN',
    maximumFractionDigits: 0
  }).format(value);
Direct message button that opens the chat widget:
card.querySelector('[data-guide-id]')?.addEventListener('click', (event) => {
  event.stopPropagation();
  window.dispatchEvent(new CustomEvent('tourist-chat:open'));
});

​
API Endpoints for Guide Discovery

The platform uses these endpoints to fetch guide and experience data:

​
Dashboard Endpoints

const dashboard = {
  // Get personalized guide recommendations
  getRecommendedGuides: (query) =>
    api.get('/tourist/dashboard/guides/recommended', { params: query }),
  
  // Get popular destinations
  getPopularDestinations: (query) =>
    api.get('/tourist/dashboard/destinations/popular', { params: query }),
  
  // Get your saved guides
  getSavedGuides: (query) =>
    api.get('/tourist/dashboard/guides/saved', { params: query })
};

​
Explore Endpoints

const explore = {
  // List all experiences with filters
  listExperiences: (query) =>
    api.get('/tourist/explore/experiences', { params: query }),
  
  // List guides with filters
  listGuides: (query) =>
    api.get('/tourist/explore/guides', { params: query }),
  
  // Get available categories
  listCategories: () =>
    api.get('/tourist/explore/categories'),
  
  // Toggle favorite status
  toggleFavorite: (itemId) =>
    api.post(`/tourist/explore/favorites/${itemId}/toggle`)
};

​
Query Parameters

Supported pagination and filtering: 
// Example query parameters
{
  "page": 0,
  "size": 24,
  "category": "gastronomia",
  "location": "Oaxaca",
  "minRating": 4.5,
  "maxPrice": 1000
}

​
Chat Integration

Contact guides directly from any guide card or experience page:
1

Click Contact Button

Click “Contactar” on any guide card to open the chat widget
2

Start Conversation

The chat panel opens with the guide’s conversation thread
3

Send Message

Type your inquiry and send. Common questions:
  • Availability for specific dates
  • Custom itinerary requests
  • Group size and pricing
  • Accessibility accommodations
// Chat widget trigger
window.dispatchEvent(new CustomEvent('tourist-chat:open'));

​
Best Practices

Be Specific

Use detailed search terms like “food market tour” instead of just “food”

Check Ratings

Prioritize guides with 4.5+ ratings and multiple reviews

Read Descriptions

Guide specializations vary - ensure they match your interests

Save Favorites

Build a collection of guides for future trip planning

​
Empty States

If no results match your filters: 
<div class="guide-loading guide-loading--compact" role="status">
  <span>No se encontraron experiencias con esos filtros.</span>
</div>
Try broadening your search by selecting “All” categories or using fewer keywords.

​
Next Steps

Booking Tours

Learn how to book and manage your trips

Profile Management

Optimize your profile for better recommendations

Build docs developers (and LLMs) love

Get started for freeTalk to us