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.FinsweetAttributes.modules.list.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.

1 Like
4

Also having this exact same issue after moving to attributes v2

5

Hi @caleb.raney, @jsnyder!

You are right, it seems like restart() is not working :grimacing:
I’ve talked with the team and we are working on it, thanks!

Meanwhile, you can try this:

Simply don’t add the solution in the script tag

<script async type="module"
*src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"*
></script>

And it will not load automatically

You can then load the solution programmatically at any moment using window.FinsweetAttributes.load('list')

Hope this works for you!

6

Hi @caleb.raney @jsnyder!

I apologize, I made a mistake, restart() is working.

Each solution module has this interface, which can be accessed via window.FinsweetAttributes.modules Example:

window.FinsweetAttributes.modules.list.restart()

Let me know if this works for you, thanks!

7

Thanks Pedro for the help. I got the restart to stop throwing an error but when that happens its showing the empty state of the filters, and even when I hit clear and get the filters to start working again they still don’t seem to be capturing all of the elements which makes me thing maybe restarting isn’t the issue.

I’m pretty confused as to what I’m doing wrong, for example if I try and filter by East Africa example here nothing shows up — but the item “Blue Ventures” is clearly tagged with East Africa and has the correct finsweet attribute.

Do you happen to have any other ideas of why this isn’t working?
I got it working with v1 attributes as a demo you can see that here, so maybe I’ll just switch back to v1 if I need to.

8

Hi @caleb.raney!

I took a look at your page and noticed that only the first “geography” tag on each item is being considered for filtering.

How are you adding the geography tags to each item? If possible, could you share a read-only link so I can take a closer look?

Also, if you’re using multiple tags in the same CMS category, make sure you’re using a “Multi-reference Field” which allows assigning multiple categories to a single item. This way, each Item will be able to have all the tags, and the filtering will work great.

9

Also I tried adding fs-list-element="list" to the “card_portfolio_filters_wrap u-hflex-center-top u-gap-2 u-hflex-wrap” element in a local override and the filtering now works great!

image
image1919×943 106 KB

It seems that the filter requires us to define the nested static list so that all the tags are properly registered.

Let me know which option works for you!