Wix Velo filtering from header
Budget: $10 – $30 USD
I am coding with WIX Velo and facing the challenge, I have the following components:
In header
Button 1 ID: btnLicensebanking
Button 2 ID: btnLicensegambling
Page
Database ID: HubDatabase
Repeater ID: rptListing
Field name which is sued for filtering(tags format): services
Filtering keyword for button 1: BKLC
Filtering keyword for button 2: GBLC
Target page for both buttons: /licensing
Example website link: https://amiranazaladze.wixstudio.io/my-site-55/licensing
Task is the following functionality, after clicking the button /licensing must be loaded, data must filterred and showed on the repeater. Buttons must funcion for filtering even if user is on /licensing. My challenge is mainlly filtering,the code is not working as filter triggers too early or does not communiocates with header after loading a new page.
Header (MasterPage code)
import wixLocation from 'wix-location';
// Function to navigate and pass query parameter with console logs
function navigateWithQuery(keyword) {
console.log(`Navigating to /licensing with filter: ${keyword}`);
wixLocation.to(`/licensing?filter=${keyword}`);
}
$w.onReady(function () {
$w("#btnLicensebanking").onClick(() => {
console.log("Button 1 clicked - Banking License");
navigateWithQuery('BKLC');
});
$w("#btnLicensegambling").onClick(() => {
console.log("Button 2 clicked - Gambling License");
navigateWithQuery('GBLC');
});
});
Page /licensing code:
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
console.log("Page loaded/reloaded");
let filter = wixLocation.query.filter;
console.log(`Query filter received: ${filter}`);
if(filter) {
console.log("Filtering data based on query parameter");
filterData(filter);
} else {
console.log("No filter specified, loading default data set");
}
});
function filterData(filterKeyword) {
console.log(`Applying filter to repeater for keyword: ${filterKeyword}`);
$w("#rptListing").setFilter(wixData.filter()
.contains('services', filterKeyword)
).then(() => {
console.log("Data filtered successfully");
}).catch((err) => {
console.error("Failed to filter data", err);
});
}
In header
Button 1 ID: btnLicensebanking
Button 2 ID: btnLicensegambling
Page
Database ID: HubDatabase
Repeater ID: rptListing
Field name which is sued for filtering(tags format): services
Filtering keyword for button 1: BKLC
Filtering keyword for button 2: GBLC
Target page for both buttons: /licensing
Example website link: https://amiranazaladze.wixstudio.io/my-site-55/licensing
Task is the following functionality, after clicking the button /licensing must be loaded, data must filterred and showed on the repeater. Buttons must funcion for filtering even if user is on /licensing. My challenge is mainlly filtering,the code is not working as filter triggers too early or does not communiocates with header after loading a new page.
Header (MasterPage code)
import wixLocation from 'wix-location';
// Function to navigate and pass query parameter with console logs
function navigateWithQuery(keyword) {
console.log(`Navigating to /licensing with filter: ${keyword}`);
wixLocation.to(`/licensing?filter=${keyword}`);
}
$w.onReady(function () {
$w("#btnLicensebanking").onClick(() => {
console.log("Button 1 clicked - Banking License");
navigateWithQuery('BKLC');
});
$w("#btnLicensegambling").onClick(() => {
console.log("Button 2 clicked - Gambling License");
navigateWithQuery('GBLC');
});
});
Page /licensing code:
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
console.log("Page loaded/reloaded");
let filter = wixLocation.query.filter;
console.log(`Query filter received: ${filter}`);
if(filter) {
console.log("Filtering data based on query parameter");
filterData(filter);
} else {
console.log("No filter specified, loading default data set");
}
});
function filterData(filterKeyword) {
console.log(`Applying filter to repeater for keyword: ${filterKeyword}`);
$w("#rptListing").setFilter(wixData.filter()
.contains('services', filterKeyword)
).then(() => {
console.log("Data filtered successfully");
}).catch((err) => {
console.error("Failed to filter data", err);
});
}