Skip to content

Checkbox filters are not updated when filter changes were made with API #762

@Louspirit

Description

@Louspirit

Related Attributes
fs-list

Describe the bug
I am looking forward to being able to set a filter depending on URL parameters.

I added some JS to adapt the filter programmatically depending on the parameter.

It filters the list without updating the checkboxes.

Tried using the name or the slug.

I even tried checking the checkbox programmatically. But it always doesn't work for one of the checkboxes, can't see why?? (with 2 categories, only one gets checked; with 3 categories, only two get checked).

To Reproduce

  1. Clone List project
  2. Add checkbox filter from Filter project
  3. Add custom code below to auto filter at page start
  4. See error

Expected behavior
The checkbox, which is responsible for filtering the list, should reflect the filter status at all times.

Screenshots
If applicable, add screenshots to help explain your problem.

Image

Links
https://finsweet-c4846f.webflow.io/test-double-slider?category=Toto

Additional context
My code:

<script>
window.FinsweetAttributes = window.FinsweetAttributes || [];

window.FinsweetAttributes.push(['list', (listInstances) => {

  const param = new URLSearchParams(window.location.search).get("category");
  if (!param) return;

	// Update the checkboxes
  // Select all inputs with type checkboxes
  const checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
  let checkboxFound= false;
  checkboxes.forEach(checkbox => { 
    // Check if the data-name attribute matches the URL parameter value 
    if (checkbox.getAttribute('fs-list-value') === param) { 		
    	checkbox.checked = true;
 			checkbox.dispatchEvent(new Event('change', { bubbles: true }));
      checkboxFound = true;
    }
  });
  if(checkboxFound){
  	
       // Update the filter itself  
    listInstances.forEach(listInstance => {

      const filters = listInstance.filters.value;

      // On cherche dans TOUS les groupes/conditions
      filters.groups.forEach(group => {
        group.conditions.forEach(condition => {

          // On ne touche qu'à la condition voulue
          if (condition.fieldKey === "category") {
            // Appliquer la valeur provenant de l'URL
            condition.value = param;
            listInstance.triggerHook('filter');
          }
        });
      });

    });
  }
  
}]);
</script>



Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions