Filtered Dynamic Tags

Ask the community
,
1

Hi!

In short, my site is a car guide. I have a dynamic page, which shows all the models from a given car brand by filtering a database with it’s location ID. So far, so good!

Now, i’m trying to add vehicle type tags to the dynamic page so for example, if an user is in the BMW site and wants to see the brand’s SUVs, he just has to click on the SUV Tag.

The problem is, when clicking on tags, the repeater unfilters itself and shows SUVs from the whole database (not just from the filtered BMW data).

I’m a complete a rookie coding, but here’s the code i’m currently using. What should i add so when clicking on tags, the repeater maintains the filtered data?

Thanks in advance for your help,
Best regards,
JP.

Site name: autonomic . com . co

import wixData from ‘wix-data’ ;

$w.onReady( function () {

var locationId = $w( ‘#dynamicDataset’ ).getCurrentItem()._id;
$w( ‘#dataset1’ ).setFilter(
wixData.filter()
.eq( ‘locationId’ , locationId));

$w( “#repeater2” ).onItemReady( ($w, itemData, index) => {
$w( “#repeater2” ).show();
});

});

$w.onReady( function () {
$w( “#button3” ).target = “_self” ;
});

$w.onReady( function () {
$w( “#image49” ).target = “_self” ;
});

$w.onReady(() => {
waitForLoading();
});

export function button6_onClick() {
$w( ‘#preloader’ ).show();
waitForLoading();
}

function waitForLoading() {
setTimeout(() => {
$w( ‘#preloader’ ).hide( ‘FadeOut’ );
}, 1500 );
}

const collectionName = ‘BrandCatalogPhotos’ ;
const fieldToFilterByInCollection = ‘tags’ ;

$w.onReady( function () {

loadDataToRepeater(); 

$w( '#tag' ).onChange((event) => {

const selectedTags = $w( ‘#tag’ ).value;
loadDataToRepeater(selectedTags);
})
});

function loadDataToRepeater(selectedCategories = ) {

let dataQuery = wixData.query(collectionName);

if (selectedCategories.length > 0 ) {
dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories);
}

dataQuery 
    .find() 
    .then(results => {

const itemsReadyForRepeater = results.items;
$w( ‘#repeater2’ ).data = itemsReadyForRepeater;
const isRepeaterEmpty = itemsReadyForRepeater.length === 0

    })

}

2

You should not be using multiple page onReady() functions, it might result in unpredictable results. Put all of your onReady code into one onReady() function in the order that you want it to run when the page loads.

When you select a tag on the page, you are creating a new filter which overrides the previous filter. You need to add the tag to the previous filter so that you get the desired results.

3

Thanks man! I’ve already put al the code into only one onReady function. However i don’t know how to add the tag to the previous filter, which is based on the location id. Could you give me a hand? :grinning:

4

One other thing I see in your code is that you are combining the use of a Dataset and of a Wix Data query which is going to cause conflicts.

See the Search a Database example to see how to combine conditions in a query.