Dear friends, I am facing the challenge with buttons in header and filtering. To make everything clear here are the 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: b2bhub.ltd/licensing
Website under development b2bhub.ltd.
Task is the following functionality, after clicking the button /licensing must be loaded, data must filtered and showed on the repeater. Buttons must function for filtering even if user is on /licensing. My challenge is mainly filtering, the code is not working as filter triggers too early or does not communicates with header after loading a new page.
Current code for header (MasterPage):
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’);
});
});
Code for the page /licensing:
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);
});
}