Product Search Box and More

I am sorry if this has been answered before, however I did look through as many post as I could to find the solution and I am at a loss.

I have two issues:
Problem 1. One is once I have searched for an item I would like to click on the item that is displayed in the table and link me to that product. Now its just linking to the About page.

Problem 2. I would love to search not only the name but the description as well.

Here is the sites Product page:


Here is the code on the product page:

Here is the code on the results page:


The commented out bits are things we tried.

Here are my pages and databases.
(Red marking the ones used for the problems)

Here is my Products Database (for problem 2):
Field Keys Name: name
Description: description

My code was originally taken from Code Queens (she is so amazing) example for the search button, but I was having some issues. Someone, a Computer Programmer (not web coder), played around a bit to make the basic search work. My coding experience is old HTML and some PHP (which I have forgotten most).

I am doing this site free of charge to help out a couple of ladies that are worried about loosing their store (COVID sucks).

I know everyone is so busy with their lives and I hate to ask for help, but I am desperate at this point. I appreciate anything anyone could do to help solve these problems with me.

Thanks in advance!
Cheers!
Amber

As you are using a table to display your results, you would need to look at using onRowSelect.
https://www.wix.com/corvid/reference/$w.Table.html
https://www.wix.com/corvid/reference/$w.Table.html#onRowSelect

You can find previous posts that will help you along with code examples through the search function like these here.
https://www.wix.com/corvid/forum/community-discussion/open-local-page-on-table-row-select
https://www.wix.com/corvid/forum/community-discussion/link-search-results-in-table-to-product-page-based-on-row-solved

1 Like

You can do the search without using code by making use if the Wix Site Search app.
https://support.wix.com/en/article/adding-a-search-box-in-wix-stores
https://support.wix.com/en/article/adding-and-setting-up-wix-site-search
https://support.wix.com/en/article/about-wix-site-search

1 Like

Plus Nayeli (Code Queen) is great :grinning:
You are using her example here which she uses a repeater for.
Search Code on Wix using Corvid to Display Results on another page
https://codequeen.wixsite.com/search-redirect
https://www.totallycodable.com/wix/corvid/search-code-and-display-results-on-another-page

There is also this example from Wix which is using a table to display results.
https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality

1 Like

Thank you so much. Problem 1, Solved. I had to do some minor modifications to the solutions you provided but it all worked out. Now to work on Problem 2.

Unfortunately I am not allowed to share the results of my code

I don’t to have the same selections as that link you shared, unfortunately.

@givemeawhisky I did look for the Wix Site Search app but have had not luck finding it unfortunately.

So its not so easy just to add an “or” line copying the above (such as below) Is it because it is rich text and will I need to convert as the comment says?

@amber57869
Yes they have moved it and not updated the Wix Support pages about it :roll_eyes::see_no_evil:

If you are using a rich text box then it would have the ending of .html and not .text in any used code.
https://www.wix.com/corvid/reference/$w.Text.html
https://www.wix.com/corvid/reference/$w.Text.html#html
https://www.wix.com/corvid/reference/$w.Text.html#text

If you use this tutorial here to show results in a table.
https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality

Then you can just put rich text as the field type in the column.
https://www.wix.com/corvid/reference/$w.Table.html#Column
type - string
The type of data in this column: “number”, “string”, “date”, “image”, “bool” or “richText”.

There are previous forum posts that can help with this too.
https://www.wix.com/corvid/forum/community-discussion/rich-text-displayed-from-database
https://www.wix.com/corvid/forum/community-discussion/richtext-formatting-issue-in-search-results-table
https://www.wix.com/corvid/forum/community-discussion/rich-text-to-simple-text

If you want to carry on using Nayeli’s example, then you just need to set the field in your table to rich text to match your field in your database itself.

So on my example here I have changed the code to test it myself quickly.

Set database up with two fields, a rich text field and a text field.


Set table up with the two columns and call the field label whatever you want, just make sure that you then go back and set the field name the same as your database fields.


Then with a simple code setup as shown here.

import wixData from 'wix-data';

$w.onReady(function () {});

export function searchButton_click() {
	wixData.query("RichTextTest").contains('richTextField', $w("#searchBar").value)
		.or(wixData.query("RichTextTest").contains('textField1', $w("#searchBar").value))
		.find()
		.then((results) => {
			let resultsItems = results.items;
			console.log(resultsItems);
			$w('#resultsTable').rows = resultsItems;
		})
}

A simple test page with the top table having the search function and the bottom table simply showing the complete database entries itself.


In preview the bottom table will show both fields as they are.


Then when you use the search the top table will show the same when you search using the user input.

Sorry it took me a few days to get back to you.

Performing just a simple search on the rich text field does not work. It never returns any results. So once that part is sorted, I am hoping the or statement I have will work.

Is query necessary to make rich text searchable or can it work with a filter like how I have things setup?

Have you tried running it with your setFilter code?
Does it do anything or return any error messages?

Also, if you want to keep using Nayeli’s example, then why not just change from the table to a repeater like she uses in her example?

With the repeater you can have a better layout than a table row and you can display more info and the user can still click on a button link to that particular product page.

1 Like

Yes, and we got nothing back other than the table headings. No data.

Just to let you know that I have sorted this out so that you can have it setup as the tutorial in the repeater or as you had it with the table.

I will post up the page examples and used code later on as I need to do other things beforehand, plus no fancy code was needed for the rich text fields. :+1::grinning:

Right here is the answer for you on this website.
https://givemeawhisky.wixsite.com/richtexttest

I have had to change your code used with the setFilter() function on page 2.

When you use query you can query the dataset and then show the results in the repeater or the table which is shown in page 1.

However, when you use filter you have to filter the dataset itself and you can’t then use the code to show the results in the repeater or table.

You simply have to connect the repeater or the table to the dataset and then use your filter code to filter the results shown in the repeater or table.

The purple table on each page is just showing you the contents of the dataset that I have used for this example, so if you search for ‘this’ you will get all six items returned as it is in all used fields. However, if you search for ‘plain’ or ‘bold’ you will only get returned either the four plain or the four bold items.

Page 1 is the example as it is with a repeater to display, the only extra thing added is your onKeypress event.

Page 1 Search:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
});

export function searchButton_click() {
	let word = $w("#searchBar").value; //Make sure to change the ID of your elements to match the code
	local.setItem("searchWord", word); //This is your search variable
	wixLocation.to(`/page1-results`); //Change this to the URL ending of your results page
}

export function searchBar_keyPress(event) {
	if (event.key === "Enter") {
		searchButton_click();
	}
}

Page 1 Results:

import { local } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {

	var sameWord = local.getItem("searchWord");

	$w("#searchBar").value = sameWord;
	$w("#searchBar").placeholder = sameWord;
	$w('#dataset1').onReady(function () {
		search();
	});

});

export function searchBar_keyPress(event) {
	if (event.key === "Enter") {
		searchButton_click();
	}
}

export function searchButton_click() {
	search();
}

function search() {
	wixData.query('RichTextTest')
		.contains('richTextField', $w("#searchBar").value)
		.or(wixData.query('RichTextTest').contains('textField1', $w("#searchBar").value))
		.find()
		.then(res => {
			$w('#repeater1').data = res.items;
		});

}

Page 2 is the same tutorial with a repeater to display, however it has your used code for it instead of the example.

Page 2 Search:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
});

export function searchButton_click() {
	let word = $w("#searchBar").value; //Make sure to change the ID of your elements to match the code
	local.setItem("searchWord", word); //This is your search variable
	wixLocation.to(`/page2-results`); //Change this to the URL ending of your results page
}

export function searchBar_keyPress(event) {
	if (event.key === "Enter") {
		searchButton_click();
	}
}

Page 2 Results:

import { local } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {

    var sameWord = local.getItem("searchWord");

    $w("#searchBar").value = sameWord;
    $w("#searchBar").placeholder = sameWord;
    $w('#dataset1').onReady(function () {
        searchButton_click();
    });

});

export function searchBar_keyPress(event) {
    if (event.key === "Enter") {
        searchButton_click();
    }
}

export function searchButton_click() {
    $w("#dataset1").setFilter( wixData.filter()
        .contains('richTextField', $w("#searchBar").value)
        .or(
            wixData.filter()
            .contains('textField1', $w("#searchBar").value)
            )
    )
        .then( () => {
  console.log("Dataset is now filtered");
} )
.catch( (err) => {
  console.log(err);
});
}

Page 3 is the same as page 2 with your code being used instead, however a table is now being used to display instead of a repeater.

Page 3 Search:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
});

export function searchButton_click() {
	let word = $w("#searchBar").value;
	local.setItem("searchWord", word);
	wixLocation.to(`/page3-results`);
}

export function searchBar_keyPress(event) {
	if (event.key === "Enter") {
		searchButton_click();
	}
}

Page 3 Results:

import { local } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {

    var sameWord = local.getItem("searchWord");

    $w("#searchBar").value = sameWord;
    $w("#searchBar").placeholder = sameWord;
    $w('#dataset1').onReady(function () {
        searchButton_click();
    });

});

export function searchBar_keyPress(event) {
    if (event.key === "Enter") {
        searchButton_click();
    }
}

export function searchButton_click() {
    $w("#dataset1").setFilter( wixData.filter()
        .contains('richTextField', $w("#searchBar").value)
        .or(
            wixData.filter()
            .contains('textField1', $w("#searchBar").value)
            )
    )
        .then( () => {
  console.log("Dataset is now filtered");
} )
.catch( (err) => {
  console.log(err);
});
}

Thank you so much for replying back to me. So sorry it took me a long time to get back to you.

Following your page 3 example, I noticed that the code is equivalent to mine except for the formatting and the console logging. However, I am still having issues.

Could it be how the data-source and/or table is/are defined with respect to the rich text column? Is there something about the key fields that makes it impossible to search against other columns (i.e. only the Name Field can be searched)?

For example when I search “cards” (normal text), I get two search results. When I search “PTSD” (rich text), I get none. The description is the only rich-text field. If I modify the filter to only search on the rich text field, it still returns no results for that same filter.

Here is the link for quick reference:

I am still clueless. :slight_smile: