Problem on smartphone displaying results with CMS filter using Macy.js or Refokus Masonry Library

Attributes
1

Hi everyone !

I have a collection list page with a masonry grid for display projects. Items are filtered by Finsweet Attributes with radio buttons.

If I use Refokus Masonry Library, i have a problem of images loading when i click on a filter nav item (Desktop + Smartphone).

If I use Macy.js (actually set. up on the site), i have a problem of loading, but only on smartphone (it create a big space between filters and collection list).

Link of a video capture on smartphone : Dropbox - Vertical_film_sm_pb.mp4 - Simplify your life

Is someone can help me ? :pray:

Here the read-only link : Webflow - Vertical Films

Here the pre-prod of the website : Les projets de Vertical Films

Thanks !

2

Hello @cetestudio.pro!

Could you moving the CMS Filter callback to the </body> section of the page’s custom code? Let me know if this works!

3

Hello @Support-Luis,

Do you speak about the script of the Finsweet Attributes CMS Filters ?

4

No, the CMS Filter script should go on the <head>

This is the callback

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  "cmsfilter",
  (filterInstances) => {
  	const options = {
      container: "#masonry",
      margin: 16,
      columns: 3,
      breakAt: {
        991: 3,
        767: 2,
        479: 1
      }
    }
  
    let macyInstance = Macy(options);

    const items = document.querySelectorAll(".collection-proj");
    for (let item of items) {
      item.classList.remove("is-loading");
    }

    // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
    const [filterInstance] = filterInstances;

		// The `renderitems` event runs whenever the list renders items after filtering.
    filterInstance.listInstance.on("renderitems", (renderedItems) => {
      macyInstance = Macy(options);
    });
    
  }
]);

</script>
5

Thanks @Support-Luis,

It works ! But only if i put the scripts + the callback on the </body> :smiling_face:

6

Great to hear! :muscle:

And yes any additional callback should be added to the </body>

1 Like
7

Hi @Support-Luis,

I’m sorry but my customer tell me that the problem is not resolved on IOS. Is it possible that there are compatibility problems?

8

Hey @cetestudio.pro! Could it be an issue with the initializing of Macy on IOS? Could you look into potential solutions within the library docs?

9

Hey @Support-Luis, i finally use a different script, and all works fine now. Thanks :+1:

1 Like
10

@cetestudio.pro I am having the same issue right now - I see its working on your page now, how did you solve it?