Adding fs-cmsfilter-field values after page has loaded

General
1

Hi,

I’m trying to run the following code:

// This makes related items filterable
function splitSourceItems(items) {
  // const listableLists = items.querySelectorAll('[listable="list"]');
  
  items.forEach(function (item) {
    console.log(item);
    console.log(item.element);
    console.log(item.element.querySelector('[listable="source"]'));
    let listableSource = item.element.querySelector('[listable="source"]');
    
    if (listableSource !== null) {
      let listableSourceList = listableSource.innerHTML.split(', ');
      let listableTarget = item.element.querySelector('[listable="target"]');
      
      if (listableSourceList.length !== 0) {
        for (let listableSource of listableSourceList) {
          let newListableTarget = listableTarget.cloneNode(true);
          
          newListableTarget.innerHTML = listableSource;
          newListableTarget.removeAttribute('listable');
          listableTarget.insertAdjacentElement('afterend', newListableTarget);
        }
        
        listableTarget.parentNode.removeChild(listableTarget);
        listableSource.parentNode.removeChild(listableSource);
      };
    };
  });
};

window.fsAttributes = window.fsAttributes || [];
  
window.fsAttributes.push(['cmsfilter', (filterInstances) => {
  const [filterInstance] = filterInstances;
  const closeElement = document.querySelector("[fs-modal-element='close']");
  
  filterInstance.submitButtonVisible = true;
  
  splitSourceItems(filterInstance.listInstance.items);
  filterInstance.listInstance.on('renderitems', (renderedItems) => {
    closeElement.click();
    filterInstance.submitButtonVisible = true;

    splitSourceItems(renderedItems);
  });
}]);

Each collection item can have multiple main themes. These themes are added like this: Theme 1, Theme 2, Theme 3. The splitSourceItems function converts this list to separate span items that will look like this: <span listable='target' fs-cmsfilter-field='Main Theme'>Theme 1</span>. The code above works but the filtering doesn’t. I think that the filter didn’t got the newly added filter fields.

How can I make this work?

Kind regards,

Rémon

2

hey @remonw! Can you please share a link?

3

https://preview.webflow.com/preview/eebel?utm_medium=preview_link&utm_source=designer&utm_content=eebel&preview=be6ce2b980ae4b448c87f1114bf8ecf7&pageId=64f9bd1246e31c40a020ee9f&workflow=preview

4

hey @remonw! Can we try this?

Change the CMS Filter script to

<!-- [Attributes by Finsweet] CMS Filter -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>

and please move the code from the <head> section of custom code to </body> and replace it with this code

<script>
  // This makes related items filterable
  function splitSourceItems(items) {
    // const listableLists = items.querySelectorAll('[listable="list"]');

    items.forEach(function (item) {
      console.log(item);
      console.log(item.element);
      console.log(item.element.querySelector('[listable="source"]'));
      let listableSource = item.element.querySelector('[listable="source"]');

      if (listableSource !== null) {
        let listableSourceList = listableSource.innerHTML.split(', ');
        let listableTarget = item.element.querySelector('[listable="target"]');

        if (listableSourceList.length !== 0) {
          for (let listableSource of listableSourceList) {
            let newListableTarget = listableTarget.cloneNode(true);

            newListableTarget.innerHTML = listableSource;
            newListableTarget.removeAttribute('listable');
            listableTarget.insertAdjacentElement('afterend', newListableTarget);
          }

          listableTarget.parentNode.removeChild(listableTarget);
          listableSource.parentNode.removeChild(listableSource);
        }
      }
    });
  }

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;
      splitSourceItems(listInstance.items);
      window.fsAttributes.cmsfilter.init();
    },
  ]);
</script>
5

Thank you very much! This works perfectly.

1 Like