I’m wondering if there is any way to filter the repeater of a custom products page with a url with the parameters? Like example if the parameters is “green” when I key in the url of the website + the parameters it will lead to the products page with the repeater that is filtered to the parameters. Or does this only work in the wix store?
Read this article to learn how to use query.
i have tried queryparams.add()
basically for each onclick it adds the parameters to the url but somehow when i use the url on another buttons redirect it just brings me to the general page for products, not the filtered repeater, could anyone give advice regarding how to :
1: insert parameters into the url
2: use the url to navigate to the product page where the repeater is filtered
thanks alot!!
Can you provide a link of the filtered product page?
the repeater is supposed to be filtered to category = green juice but im not sure that the wixlocation.queryparams.add is doing it
/**
- Adds an event handler that runs when the element is clicked.
- @param {$w.MouseEvent} event
*/
For yr reference, here is a sample code for one of the filter buttons
export function greenjuice_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
//1: Query the dataset Juices for the category “green juice”
wixData . query ( “Juices” )
. contains ( “category” , “Green Juice” )
. find ()
. then (( result ) => {
//If the results number is > 0, show in repeater and add the parameters
if ( result . items . length > 0 ) {
let items = result . items ;
//remove existing query parameters
wixLocation . queryParams . remove ([ “category” ]);
wixLocation . queryParams . remove ([ “name” ]);
//Insert in the specific query parameters
filters ={ “category” : “greenjuice” };
wixLocation . queryParams . add ( filters );
//Filter the repeater
$w ( “#repeater1” ). data = items
//should print www.coldpressindex.com/Juices?Category=greenjuice
console . log ( query );
} else {
console . log ( “no items exist!” );
}
}). catch (( err ) => {
console . log ( err );
});
}
Hi there Shane,
I see that you can add the selected filters to the URL query, that’s great, now you need to check these parameters when the page loads before querying the database, here’s how.
First, we’ll need a global constant to store all of our filters - assuming the page is about a product catalog.
const filters = {
name: null,
sku: null,
in_stock: false
}
These are just simple filters for our example, we will also need two global functions, one to check the URL query, and the other to fetch the items.
This function will update the filters constant with the URL query.
function checkQuery() {
const query = wixLocation.query || null;
if (query) {
if (query.name) { filters.name = query.name }
if (query.sku) { filters.sku = query.sku }
if (query.in-stock === true) { filters.in_stock = true }
return Promise.resolve();
} else {
return Promise.resolve();
}
}
Now the search function.
async function search(global) {
if (global) { await checkQuery() }
/* The above line will check the URL query if the parameter 'global' value
is not falsy, we'll add that parameter only to the run on page initialization,
calling the search function without the parameter will have no effect */
let query = wixData.query('products');
if (filters.name) { query = query.contains('name', filters.name) }
if (filters.sku) { query = query.eq('sku', filters.sku) }
if (filters.in_stock) { query = query.eq('inStock', true) }
return query.find().then((result) => {
if (result.length > 0) {
$w('#repeater').data = result.items;
/* Use your function now to update the query URL based on the filters
constant, then resolve the promise */
} else {
// Show a message that no products were found, then resolve the promies
}
})
}
And on the page’s onReady( ) function, call the search function with a “true” parameter.
$w.onReady(() => {
search(true);
})
Call the search function inside the button’s onClick( ) event handler to search with a click. You can use a debounce timer if you wish, too.
$w('#searchBtn').onClick(() => search());
Hope this helps~!
Ahmad
@kylechua100 one clear mistake (underlined with yellow lines) is that you’re usign the assining sign ( = ), for evaluations, you always use the tripple equal sign ( === ), so they should look something like this:
if (filters.category === 'root')
// NOT
if (filters.category = 'root')
I don’t understand what are the roots(), etc … functions, is that to update the URL query parameters? This is not the right way to do it, you should create a function to upadte the URL query parameters, and call it when the the query promise is resolved.
function updateQuery()
const para = wixLocation.queryParams;
if (filters.name) {
para.add({ name: filters.name })
} else {
para.remove(['name'])
}
}
The above function will add the value of the filter to the URL query if it does exist, and remove it if it doesn’t, I only wrote one filter as an example.
Now we can call this function after the the search is done, here’s how.
$w.onReady(() => {
search(true).then(() => upadteQuery());
$w('#searchBtn').onClick(() => search().then(() => updateQuery()));
})
I do NOT recommend using the static event handlers (from the proprties panel), instead, you should use the dynamic event handlers as demonstrated in my example.
Hope this helps.
@ahmadnasriya Duly noted! just to let you know the regarding the roots etc,
on the website i am working on, for juices there is a few categories,
- green juice, fruit forward, roots, cleanse sets and functional shots, so when i was making the filter i made a few onclick methods for the user to click on when filtering the juices:
website: Juices (coldpressindex.com)
here is a sample of the code i used for each onclick, just params changed:
Basically I use the on click of the filter buttons to add in the parameters. Just asking but if I add in the query function above how would the code know the parameters added? Was hoping you could help with the “=== greenjuice, ===fruits” (code is below)
export function greenjuice_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
//1: Query the dataset Juices for the category “green juice”
wixData . query ( “Juices” )
. contains ( “category” , “Green Juice” )
. find ()
. then (( result ) => {
//If the results number is > 0, show in repeater and add the parameters
if ( result . items . length > 0 ) {
let items = result . items ;
wixLocation . queryParams . remove ([ “category” ]);
wixLocation . queryParams . remove ([ “name” ]);
filters ={ “category” : “greenjuice” , “name” : null };
wixLocation . queryParams . add ( filters );
$w ( “#repeater1” ). data = items
//should print www.coldpressindex.com/Juices?Category=greenjuice
console . log ( query );
} else {
console . log ( “no items exist!” );
}
}). catch (( err ) => {
console . log ( err );
});
}
this was basically to filter the repeater to the category when clicked, and add the url parameters. may i ask does the filters have to be a constant in this scenario? because i noticed if we set the filters to const it disagrees with the filter here. or should i make 2 filters, one is let filter = {} one is const? also may i ask after making the url query do i just do it like this?
async function search ( global ){
if ( global ){
await checkQuery ()}
let query = wixData . query ( ‘Juices’ );
console . log ( filters . category );
if ( filters . category ){ query = query . contains ( ‘category’ , filters . category )}
if ( filters . name ){ query = query . contains ( ‘name’ , filters . name )}
return query
. find ()
. then (( result ) =>{
if ( result . length > 0 ){
$w ( “#repeater1” ). data = result . items ;
updateQuery ();
/* Use your function now to update the query URL based on the filters constant, then resolve the promise */
console . log ();
Promise . resolve ();
}
else {
console . log ( “no products found!” )
Promise . resolve ()
}
})
}
thanks alot for ur advice and help btw! i really appreciate it, apologies again if i seem pretty new to this, only started on this website revamp in my temporary job since may so im pretty new to velo so i would definitely appreciate ur help/advice on this
Thanks!
Kyle
Thanks for the help ahmad! now it works :DDDD
@kylechua100 Glad that it worked 