Wix Velo filtering from header

Job ID: 38464875

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);
});
}
Related categories: JavaScript Wix