Add Search to Wix Lightbox & Display Result on Another Page

In this tutorial, we’ll guide you through the process of adding a search bar to a Wix lightbox, triggered by a search icon on your header. Follow our step-by-step instructions to create a seamless search experience for your users.

Learn how to collect user input in the lightbox, send it to a query parameter, and display the results on a designated search page with a repeater. Watch now to enhance your Wix site’s functionality!

Implementing a search functionality within a Wix lightbox and displaying the results on another page can enhance user experience and improve navigation on your website. This guide will walk you through the process step-by-step, ensuring a seamless integration that leverages Wix's capabilities.

Understanding the Process

To add a search feature within a Wix lightbox and display the results on another page, we will need to:

1. Create a lightbox that contains a search input field.

2. Implement a search functionality using Wix Code (Velo by Wix).

3. Redirect users to another page to display the search results.

4. Display the search results dynamically on the new page.

Step-by-Step Implementation

1. Create the Lightbox

First, we need to create a lightbox that will contain the search input field.

• Open the Wix Editor: Go to your Wix dashboard and open the Editor for your site.

• Add a Lightbox: Click on the "+" button to add new elements, then select "Interactive" and "Lightbox."

• Design Your Lightbox: Customize the lightbox design to fit your site’s aesthetics. Add a text element to instruct users to enter their search query and an input element where users can type their search terms.

• Add a Button: Add a button element that users will click to initiate the search. Label it appropriately, such as “Search.”

2. Implement Search Functionality

Next, we will implement the search functionality using Wix Code.

• Enable Velo by Wix: If you haven't already, enable Velo by Wix by clicking on "Dev Mode" in the top menu and toggling it on.

• Add a Dataset: Add a dataset to your lightbox if you plan to search through a collection of data. Link the dataset to the collection you want to search.

• Add Event Handlers: Open the code panel and add event handlers to capture the search query and initiate the search.

$w.onReady(function () {

$w("#searchButton").onClick(() => {

let query = $w("#searchInput").value;

if (query) {

wixLocation.to(`/search-results?query=${query}`);

}

});

});

3. Create the Search Results Page

Now, we need to create a page that will display the search results.

• Add a New Page: Add a new page to your site and name it “Search Results.”

• Design the Results Page: Customize the page layout to display search results. You can use repeaters, galleries, or lists to show the results dynamically.

• Add a Dataset: Add a dataset to this page and link it to the collection that contains the data you are searching through.

4. Display Search Results Dynamically

Finally, we will use Wix Code to retrieve and display the search results based on the query.

1. Capture the Query Parameter: On the search results page, use the code panel to capture the query parameter from the URL.

import wixLocation from 'wix-location';

import wixData from 'wix-data';

$w.onReady(function () {

let query = wixLocation.query.query;

if (query) {

searchDatabase(query);

}

});

function searchDatabase(query) {

wixData.query('YourCollection')

.contains('yourField', query)

.find()

.then((results) => {

if (results.items.length > 0) {

$w("#repeater1").data = results.items;

} else {

$w("#repeater1").data = [];

$w("#noResultsText").show();

}

})

.catch((err) => {

console.log(err);

});

}

In this code:

• We import wixLocation to get the query parameter from the URL.

• We import wixData to query the database.

• The searchDatabase function queries the specified collection for items that contain the search query.

• If results are found, they are displayed using a repeater (#repeater1). If no results are found, a "no results" message is shown.

1. Customize the Repeater: Link the repeater to the dataset and customize the item template to display the relevant fields from your collection.

2. Test Your Setup: Publish your site and test the search functionality by entering a query in the lightbox and checking if the results are displayed correctly on the search results page.

Conclusion

Adding a search feature to a Wix lightbox and displaying results on another page can significantly enhance the usability of your website. By following this guide, you can effectively implement this functionality using Wix’s tools and Velo by Wix for custom coding. Ensure your search results page is well-designed to provide a seamless and intuitive user experience.