Dynamically change values for filtering

Attributes
, , ,
1

I use Attributes V2, List Filter, List Load and Range Slider. There are a base price and a weekly price that is used for filter. The weekly price is calculated based on selected inputs and can be changed. I used range slider to filter by price. The issue that i’m not able to make it work - sometimes it works, sometimes it doesn’t. My idea is to use API to recalculate the weekly price and update the object.

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push(
  'list',
  (listInstances) => {
    carsList = listInstances[0];
    
    carsList.effect(() => {
      console.log('effect triggered');
      console.log('carsList:');
      console.log(carsList)
      //calculatePrices();
      
      recalculatePrices();
      
      const makeFilters = carsList.allFieldsData.value.make.rawValues;
      const modelFilters = carsList.allFieldsData.value.model.rawValues;
      hideEmptyFilters(makeFilters, 'make');
      hideEmptyFilters(modelFilters, 'model');
      //console.log('Total items:', carsList.items.value.length);
    });  
    carsList.addHook('start', (items) => {
      console.log('start hook');
      console.log('items:');
      console.log(items);
      initRangeSliders(priceValues, 25);
    });
    carsList.addHook('filter', (items) => {
      console.log('filter hook');
    });
    carsList.addHook('afterRender', (items) => {
      console.log('afterRender hook');
      console.log(items);
      items.forEach((e) => {
        const $price = e.element.querySelector('[data-price]');
        const basePrice = parseInt($price.dataset.price);
        $price.textContent = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);
      });
    }); 
  },
]);

function recalculatePrices() {
    priceValues = new Set();
    carsList.items.value.forEach((e) => {
      const basePrice = e.fields['base-price'].value;
      const weeklyPrice = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);
      e.fields.price.rawValue[0] = weeklyPrice.toString();
      e.fields.price.value[0] = weeklyPrice;
      e.fieldElements.price[0].originalHTML = weeklyPrice.toString();
      e.fieldElements.price[0].value = weeklyPrice;
      priceValues.add(weeklyPrice);
    });
    console.log("priceValues:");
    console.log(priceValues);
    carsList.items.value = [...carsList.items.value];
}

Please see the page here:

Please use the filter there to test:

Screenshot 2025-06-20 at 00.08.25
Screenshot 2025-06-20 at 00.08.253020×1494 340 KB

2

So basically, my question is: how to dynamically change values to filter, so the filter takes new values into account?

I’ll highly appreciate any help, really need this task done as soon as possible.

3

My idea is to do this:

carsList.items.value.forEach((e) => {
      const basePrice = e.fields['base-price'].value;
      const weeklyPrice = calculateWeeklyPrice(basePrice, irr, weeksInYear, duration);

/* 1. I update these fields of The List object. It seem to work sometime, but sometime it doesn't */
      e.fields.price.rawValue[0] = weeklyPrice.toString();
      e.fields.price.value[0] = weeklyPrice;
      e.fieldElements.price[0].originalHTML = weeklyPrice.toString();
      e.fieldElements.price[0].value = weeklyPrice;
    });

/* 2. I update the items to trigger reactiveness */
carsList.items.value = [...carsList.items.value];

The filter input is inside of a range slider that is hidden by default. But I do:

window.FinsweetAttributes.modules.rangeslider.restart()

when it’s gets displayed.

4

Hey @stanimish! I’ve replied by DM!