Efficient Use of Finsweet Attributes Modal for CMS Lists

Attributes
1

Hey Finsweet community, wishing everyone a happy new year! :tada:

I’m currently working on a website where I’m using a CMS list. When clicking on each item in the list, a modal should appear with the relevant information. The structure of the modal is the same for each item, but the content, such as video, title, description and a list of similar videos, varies.

My question is, if I use the Finsweet Attributes modal for this project, will it preload all the modals for all the CMS elements when the page loads? This could potentially affect the page load time.

Is there perhaps a better method where I don’t insert the modal into each CMS element, but have a single modal outside of the CMS list? This way the content of the modal could be dynamically adjusted depending on which item is clicked.

I’m looking forward to hearing your experiences and advice on how to use the Finsweet Attributes Modal efficiently in such cases.

2

hey @juicydisorder! There should be no issue with adding the modal to each item on the list. However, you can always improve the load times with the CMS Load Attribute.

You can share a link if you need help setting this up :muscle:

3

Hey @Support-Luis,

Thanks for your response! I appreciate your insight into adding the modal to each item, but I’m a bit concerned about potential background loading, especially since these modals might contain videos and another CMS Collection.

Wouldn’t it make more sense to have a single modal outside of the CMS items and populate it dynamically with JS? This way, we can avoid preloading all those modals in the background.

Also, I’m facing a little hiccup with the JS version of the Modal Attributes and the CMS Load Attribute. I’ve set CMS Load to Infinite Scroll, but I’ve noticed that the modal only opens when clicking items from the first page and not from subsequent pages. Any tips on how to make it work smoothly across all pages?

4

Hey @juicydisorder!

You could definetly go with the single modal approach if you are confortable with the custom JS. I would recommend you use the CMS Load API to rerun any functions that fetch the info from the item to populate the single modal.

You can also use the API to reinitiate the Modal script for all newly rendered items. Something like this should work with your current setup

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

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        window.fsAttributes.modal.init();
      });
    },
  ]);
</script>
5

@Support-Luis Thank you for the tip regarding the modal initialization – it’s now working perfectly! Is there also a function or event to check if the modal is getting closed again? So i could trigger it to pause the current video when closing the modal?

Currently, I am also facing another challenge related to the categories of video tutorials displayed in the CMS list. I am using Finsweet Attributes CMS Nest to present the categories of the tutorials. However, the use of CMS Nest results in the loss of the original order of the categories as set in the CMS. My client, however, would like to maintain the order of the categories to enable a form of prioritization. Is there a way to preserve this order?

6

Hey @juicydisorder! For the player status, you can try the Auto Video solution we have. You might need to add the init() function as you did for the Modal solution.

For sorting the nested list, you could add a CMS Sort setup to the list to preserve the sorting your client wants. We can delay the nesting script untill this sorting is complete by adding fs-attributes-preventload = true tag to the CMS Nest script and then initialize it with

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

      window.fsAttributes.cmsnest.init();
    },
  ]);
</script>

Let me know how it goes!