Greetings, fellow creators! In this step-by-step guide, we'll dive into building a single item view using Xano and Webflow. This will allow you to click on an item from a list view and display detailed information about that specific item on a separate page. Let's get started!

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (sign up for free at https://xano.io)
2. A Webflow project with a list view already set up (check out our previous guide on displaying data from an external API in Webflow)

Setting up the Single Item View in Webflow

1. In your Webflow project, create a new page and give it a slug like "item" or "single-item".
2. Add a container div with an ID (e.g., "item-container") where the single item data will be displayed.
3. Inside the container, create a div (e.g., "sample-style") to hold the item's elements, such as an `

   ` for the title, an `` for the image, and a `

   ` for the description.

4. Style these elements as per your design requirements.
5. Add a link back to the list view page for easy navigation.

Setting up the Single Item API Endpoint in Xano

1. In your Xano project, create a new API endpoint for fetching a single item using the `getRestaurant/:id` pattern.
2. Configure the endpoint to return the desired data fields for the single item view (e.g., title, image, description).

Connecting Webflow to the Xano API

1. In your list view page's JavaScript, locate the click handler function that triggers when an item is clicked.
2. Modify the click handler to change the browser's location to the single item view page, passing the item's ID as a query parameter (e.g., `/item?id=2`).

javascript
 // Example click handler
 document.querySelector('.card').addEventListener('click', function() {
  const itemId = this.dataset.id; // Get the item ID from the clicked element
  window.location.href = `/item?id=${itemId}`; // Navigate to the single item view page with the ID as a query parameter
 });
 

1. In the single item view page's JavaScript, retrieve the item ID from the query parameter using the `URLSearchParams` object.

javascript
 const urlParams = new URLSearchParams(window.location.search);
 const itemId = urlParams.get('id') || '1'; // Get the 'id' query parameter, or default to '1'
 

1. Use the retrieved item ID to fetch the single item data from the Xano API endpoint you created earlier.

javascript
 const xanoUrl = 'https://your-xano-project.api.xano.io/api:xxxxxx'; // Replace with your Xano API URL
 
 fetch(`${xanoUrl}/getRestaurant/${itemId}`)
  .then(response => response.json())
  .then(data => {
  // Update the single item view with the fetched data
  document.querySelector('#item-title').textContent = data.title;
  document.querySelector('#item-image').src = data.imageUrl;
  document.querySelector('#item-description').textContent = data.description;
  })
  .catch(error => console.error('Error fetching item data:', error));
 

1. Publish your Webflow site and test the single item view functionality by clicking on items in the list view.

Congratulations! You've successfully built a single item view using Xano and Webflow. Now, users can click on an item from the list and view its detailed information on a separate page.

In the next guide, we'll explore how to implement filters in your Webflow project, allowing users to narrow down the list view based on specific criteria. Stay tuned for more exciting updates!