First Community Example: Custom Store Filters

Discussion Made by the community
, , ,
1

We’re excited to announce the first community-contributed example on the official Wix Examples page by Shan , a Corvid Master. Shan created a custom Wix Stores product page with a search bar and price filter. Check it out here .

932×661 73.1 KB

Official community contributions are an exciting new way for Corvid users to assist others in the community. We hope to open this effort to interested community members in the coming months.

4 Likes
2

Hi, I found this a really helpful example to act as a basis for something I am trying to do. However, the dataset/repeater is not filtering.

In principle the inputs and filters seem to work as the “#numberofitems” changes to reflect the search inputs, however it is not being reflected in the repeater, as the items stay the same.

Any help / advice / things to try would be very much appreciated, as Ifeel I have tried everything.

Thanks

Andy

import wixData from ‘wix-data’ ;

let debounceTimer;

$w.onReady( function () {

$w( "#dataset1" ).onReady( () => {

let count = $w( “#dataset1” ).getTotalCount();
$w( “#numberitems” ).text = 'Total: ’ + count;

    $w( "#listRepeater" ).onItemReady( ($item, itemData, index) => { 
        $item( "#compname" ).text = itemData.title; 
        $item( "#address" ).text = itemData.address; 
        $item( "#city" ).text = itemData.city; 
        $item( "#postcode" ).text = itemData.postCode; 
        $item( "#overallrating" ).number = itemData.overallRating;     //not working - work out later 
        $item( "#numberreviews" ).number = itemData.noReviews;         //not working  - work out later 

    }); 
}); 

$w( "#cityinput" ).onKeyPress( (event) => {

if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
// Provide a 350 millisecond interval to allow the site visitor to finish typing
debounceTimer = setTimeout(() => {
filter(lastFilterName, $w( “#cityinput” ).value);
}, 350 );
});

$w( "#venueinput" ).onKeyPress( (event) => {

if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
// Provide a 350 millisecond interval to allow the site visitor to finish typing
debounceTimer = setTimeout(() => {
filter($w( “#venueinput” ).value, lastFilterCity );
}, 350 );
});

$w( "#clearfilter" ).onClick( (event) => { 
    filter();

//Reset the filter elements
$w( “#venueinput” ).value = undefined;
$w( “#cityinput” ).value = undefined;
});
});

let lastFilterName;
let lastFilterCity;

async function filter(title, city) {

if (lastFilterName !== title || lastFilterCity !== city) {
let newFilter = wixData.filter( ‘Venues’ );

if (title)
newFilter = newFilter.contains( ‘title’ , title);

if (city)
newFilter = newFilter.contains( ‘city’ , city);

    $w( "#dataset1" ).setFilter(newFilter);

let count = $w( “#dataset1” ).getTotalCount();
$w( “#numberitems” ).text = 'Total: ’ + count;
setVariables(title, city);
}
}

function setVariables(title, city) {
lastFilterName = title;
lastFilterCity = city;
}

3

Hey @andy_bevan ,
Please post the editor URL of your site and I’ll take a look. Note that only authorized Wix personnel can access your site in the editor.
Thanks,
Tova

4

Brilliant, thank-you Tova. The URL is below:

Does this link work? It is on the “Venues (All)” page.

Many thanks for your help.

Andy

5

Hi,
Yes, the link works. :slight_smile:
You are missing an await before this line of code (line 79 in your editor):

$w("#dataset1").setFilter(newFilter);

Since the setFilter() function is asynchronous (returns a promise), the code should be:

await $w("#dataset1").setFilter(newFilter);

Please let me know if that solves the issue.
Tova

6

@talyaro Hi Tova, have added the “await” to line 79 but I am afraid it is still not filtering the repeater.

7

Hey @andy_bevan ,
On line 71, you should remove ‘Venues’ from the wixData.filter() function. filter() creates a generic filter and doesn’t take any parameters. You can also try publishing your site - not all Corvid functionality works in Preview mode.

8

@talyaro great thanks Tova, will try that and let you know if it solves the problem. Many thanks