Filter collection by price with two text inputs

Ask the community
,
4

What kind of element is being used for ‘#pageElement’?
This question goes to you :grin:.
I don’t know what king of elements are inside of your REPEATER.

All i know is…

  1. DATABASE = " Assets "
  2. related DB-Field = " price2 "
  3. minValue → surely an INPUT-FIELD inside of your REPEATER.
  4. maxValue → surely an INPUT-FIELD inside of your REPEATER.

But before i continue…QUESTIONS !!!

  1. Is it a → MUST ← to have the 2 INPUT-FIELDS (min/max) inside of your REPEATER?
    Wouldn’t it make more sense to have them outside of repeater?
    You would need just 2 FIELDS (min/max).
    You can generate a FILTER-PANEL above your REPEATER where you can do all your filtering settings. Why having those INPUT-FIELDS inside of REPEATER?

  2. This one …also not completely correct…

$w('#minPrice').onChange((event)=>{
    let $item = $w.at(event.context);
    let minValue =parseInt($item('#minPrice').value);         
    console.log("Min-Value: ", minValue);
    let maxValue = parseInt($item('#maxPrice').value);         
    console.log("Max-Vlaue: ", maxValue);
    filterCollection(minValue, maxValue);
});

…should be devided into to separate event-functions → for min and max, calling the same function, like …

    $w('#minPrice').onChange((event)=> {
        let $item = $w.at(event.context);
        let minValue = parseInt($item('#minPrice').value);
        console.log("Min-Value: ", minValue);
        if(minValue && maxValue) {
            filterCollection(minValue, maxValue);
        }
    });

    $w('#maxPrice').onChange((event)=> {
        let $item = $w.at(event.context);
        let maxValue = parseInt($item('#maxPrice').value);
        console.log("Max-Vlaue: ", maxValue);
        if(minValue && maxValue) {
            filterCollection(minValue, maxValue);
        }
    });

Here in this part you put in all other elements which you have inside your repater…

$w('#repeater1').onItemReady(($i, iData, index)=>{
    console.log("Item-Data: ", iData);
    $w('#text1').text = iData.title;
    $w('#image').src = iData.image;
    $w('#WHATEVER-ELEMENT-ELSE').-----------
});

All your elements inside your repeater.