How can I restart attributes v2 programmatically?

Attributes
1

I’m working on a filtering solution and as a part of it I need to manipulate some dom elements via javascript (I’m taking a long string with comma separated values and splitting it on each comma and making a new dom element for each so that I can use the individual pieces of text for filtering (I’m making sure to apply the correct data attribute for the filtering parameter).

The issue is that when I do this the filter’s aren’t updating to be aware of all the new elements so I’m wondering how I can programmatically restart the filter instance once I’ve finished my DOM manipulation.

Here’s the current code I have

  const updateGeoFilters = function () {
    // Selectors for primary items
    const TAGS = '[cr-filter-tag]';
    const tags = document.querySelectorAll(TAGS);

    // Get each work item and create individual tags from the tag text
    tags.forEach((item) => {
      if (!item) return;
      const className = item.getAttribute('cr-filter-tag');
      const tagText = item.textContent;
      const tagArray = tagText.split(',');
      tagArray.forEach((tag) => {
        item.insertAdjacentHTML(
          'afterend',
          `<div class=${className} fs-list-field="geography">${tag}</div>`
        );
      });
      item.remove();
      //progromatically resstart CMS filters
    });
};
2

Hi @caleb.raney!

You can use window.FinsweetAttributeControls.restart() in your script!

restart() Restarts the Attribute. In practice, this means that the Attribute will be destroyed and loaded again.

See API for full info here:

Let me know if this works for you!

3

Hey @Support-Pedro I’m getting a console error of “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'restart')” When I try to add this line into the script.

I also tried putting it in the callback like this:

    window.FinsweetAttributes ||= [];
    window.FinsweetAttributes.push([
      'list', // 'list', 'copyclip', 'modal', etc.
      (result) => {
        window.FinsweetAttributeControls.restart();
      },
    ]);

And am still getting the same error. Any tips on how to correctly reference the controls object? when I try to console log it I get undefined.