Defer fs-attributes-preventload="true" - how in v2?

Attributes
1

Hi team,

Maybe I’ve missed the documentation for this, but in v2 how do you defer a solution from loading so that you can call and initiate later? My use case is that I need to load combobox after CMS Load:

script async src=“https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js”></script

window.fsAttributes = window.fsAttributes ||
window.fsAttributes.push([
“cmsload”,
() => {
window.fsAttributes.combobox.init();
},
])
}

Thanks!

2

Hi @matt5!

Could you share a read-only link so I can take a closer look and test something?

3

Hi Pedro,

If you look at the home page, the FS solution scripts are in the page head code but the combobox init() call is on an external .js file which is loaded using a script tag in the global footer code. Not sure if this will effect your testing.

Read only
External script

Thanks!

4

Hi @matt5!

I talked with the team, and you can load the solution programmatically at any moment using window.FinsweetAttributes.load('combobox')

Here are some examples:

<script>
 // It can be inside the List callback or any other solution
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');
      const [listInstance] = listInstances;
    },
  ]);

  // Or you can load the page without any solution and start it like this
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.onload = function () {
    console.log('Window has loaded!');
    window.FinsweetAttributes.load('combobox');

    // do something else
  };
</script>

See the API full info:

Let me know if you need any help!

5

So for my case I would do this:

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

<script>
 // It can be inside the List callback or any other solution
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      window.FinsweetAttributes.load('combobox');
    },
  ]);
</script>

That makes sense, thanks!

2 Likes