Pre Filled Link with Filter

Ask the community
, ,
1

Hi,

I was working on a food delivery website and my homepage has a search function like below:

946×290 10.2 KB

The ‘SEARCH’ button has the following action:

https://www.xxxx.wixsite.com/food-delivery/restaurants/prefill?masterRest=${$w("#restaurant").value}&masterCuisine=${$w("#cuisine").value}&masterRegion=${$w("#region").value}`);

So basically I am prefilling the search function on the restaurants page

1227×358 20.3 KB

I am using this code for the restaurants page

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixLocation from 'wix-location';
import wixData from 'wix-data';

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

async function setFilters() {
 let name = $w("#masterRest").value;
 let cuisine = $w("#masterCuisine").value;
 let region = $w("#masterRegion").value;
 await ($w("#masterRest").value = wixLocation.query["masterRest"]);
 await ($w("#masterRegion").value = wixLocation.query["masterRegion"]);
 await ($w("#masterCuisine").value = wixLocation.query["masterCuisine"]);
        filter(name, cuisine, region);
}

let lastFilterName;
let lastFilterCuisine;
let lastFilterRegion;

let debounceTimer;

function filter(name, cuisine, region) {
 if (lastFilterName !== name || lastFilterRegion !== cuisine || lastFilterCuisine !== region) {
 let newFilter = wixData.filter();
 if(name)
        newFilter = newFilter.contains('restaurantName', name);
 if (cuisine)
        newFilter = newFilter.eq('cuisine', cuisine);
 if (region)
        newFilter = newFilter.eq('location', region);
    $w('#dataset1').setFilter(newFilter);
    lastFilterName = name;
    lastFilterCuisine = cuisine;
    lastFilterRegion = region;
    }
}

export function masterRest_change(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
    filter($w("#masterRest").value, lastFilterCuisine, lastFilterRegion);
    }, 200);
}

export function masterRest_keyPress(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
    filter($w("#masterRest").value, lastFilterCuisine, lastFilterRegion);
    }, 200);
}

export function masterCuisine_change(event, $w) {
    filter(lastFilterName, $w('#masterCuisine').value, lastFilterRegion);
}

export function masterRegion_change(event, $w) {
    filter(lastFilterName, lastFilterCuisine, $w('#masterRegion').value);
}

The problem is that though the values are being set, the filter does not work until manually changed.

Does anyone have a solution to this ?

Thank you

2

Greetings Shan,

I just tested your website and the filters are working correctly. You mention that the filtering doesn’t happen until manually changed, is this not the desired effects? Can you specify more of what the problem is?

Thanks,
Majd