I have a wedding website and I’m setting up a unique RSVP system. I created a database “Guests” with a KEYWORD and [url] field. The “keyword” is a unique ID given to each guest, and the URL is a unique Google Form link to their personal RSVP. I have successfully set up dynamic pages based on each keyword that properly display the embedded Google Form. Now I would like to link that database to a search function…
My Goal:
Have a search bar on the main page
A guest enters their unique “keyword”
On Enter or clicking the Search button and the “keyword” is in the “Guests” database, they are redirected to a dynamic page.
If the “keyword” does not exist, then an error message or bubble pops up
I’ve read through several posts, but none of the solutions involved redirecting to a new page upon hitting Enter or clicking a button. I don’t want a table as I would like to keep guests’ info private from one another. I know this is a convoluted way to do RSVPs, but I’m sticking to it!
With the help of other Wix Forum questions and good old StackOverflow I was able to come up with a nice working solution.
To redefine my goal, I would like to create a search input field with corresponding button to allow my guests to look-up their unique RSVP code in my database. If the code is found, then they are redirected to a different page with a Google Form for their unique RSVP form. If they input the wrong code (e.g. make a spelling error), then an error message will pop up.
// This is the function to detect the user pressing "Enter" in the text input
// You can activate this in the Properties Panel of the element
export function searchInput1_keyPress(event, $w) {
// Detect the user pressing the "Enter" key
if (event.key === "Enter") {
// I used a basic text element 'errorMsg1' for my error message.
// It is hidden by default and will appear below the search input
// field when the user enters the wrong value
$w("#errorMsg1").hide();
//create a variable that will hold the search value.
//get that value from the search input component.
let searchValue = $w('#searchInput1').value;
//build a query for the 'Guests' database
wixData.query('Guests')
//add a 'hasAll' condition to the query
//have the query look in the 'keyword' field (RSVP code)
//instruct it to look for the exact search value the user typed.
//I stored all 'keyword' values as lowercase words in my database.
//The 'hasAll' function is case sensitive.
.hasAll('keyword', searchValue.toLocaleLowerCase())
//actually run the query
.find()
//when the query returns:
.then(res =>
{
// res.items is an object array thing - not a JS expert.
// If the object array is not empty...
// then the user entered a valid RSVP code
if (res.items.length > 0) {
// The code is valid, so we need to redirect
// to a new page...
var siteurl = "http://www.yourwebsite.com";
// res.items has 'properties'
// the field keys for each database column are a property
// the 'link-guest-keyword' has a dynamic page URL
var endurl = res.items[0]["link-guest-keyword"];
// This conditional uses Wix's API to properly redirect
// to a new web page.
if (wixWindow.referrer !== siteurl.concat(endurl)) {
wixLocation.to(siteurl.concat(endurl));}
} else {
// If the user doesn't enter a valid RSVP code...
// then the error message will be shown.
$w("#errorMsg1").show();
}
});
}
}
// The search button is almost a complete copy
// of the input field function
export function searchButton1_click(event) {
// need to make sure we hide the error message, first
$w("#errorMsg1").hide();
// still need to get the value from the search input field
let searchValue = $w('#searchInput1').value;
wixData.query('Guests')
.hasAll('keyword', searchValue.toLocaleLowerCase)
.find()
.then(res => {
if (res.items.length > 0) {
var siteurl = "http://www.yourwebsite.com";
var endurl = res.items[0]["link-guest-keyword"];}
if (wixWindow.referrer !== siteurl.concat(endurl)) {
wixLocation.to(siteurl.concat(endurl));}
} else {
$w("#errorMsg1").show();
}
});
}
Tip: use console.log() whenever you’re not sure what something is supposed to return. It’s just like print() in python or C
Edit:
I moved the errorMsg.hide() to the first thing the functions do. This will cause my error message box to disappear for a short second while it retries the query - a good visual cue for the user that they messed up again.
I originally used ‘.contains’ instead of ‘.hasAll’. The API has a good explanation of all the wixData properties. ‘.contains’ will take the search string and find return all items that contain the string. E.x: You have ‘foobar’, ‘foo’, and ‘bar’ in your DB. If the user inputs ‘foo’ or ‘bar’, the query will also return ‘foobar’. Not always desirable if you want exact results. ‘.hasAll’ will get the job done otherwise, but it’s case sensitive. That’s why I added ‘.toLocaleLowerCase’ to match what’s in my DB.
The Wix API and better JS practices can greatly reduce the lines of code by at least half.