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?

11

Hi, I’m having the same problem.
I had Macy.js working, but in combination with the new V2 List Filter I ran into two problems: firstly the whole grid moved downwards after a big white space. This was removed after adding the code below, as found in the docs of Macy.js:

macyInstance.runOnImageLoad(function () {
macyInstance.recalculate(true);
}, true);

But the other problem is that after selecting a filter, the corresponding items stayed and the rest was removed, but the remaining items stayed in their grid cell, so they didn’t moved together at the top.

I added the script of @Support-Luis (changing the class for removing the “is-loading” combo-class, that I also added because we’ve probably watched the same tutorial of Web Bae :slight_smile: . But everything else I just copied and maybe I should’ve changed something else because it’s not working anymore. The filter works again, but Macy isn’t working anymore… I tried changing “cmsfilter” into “list”, “fs-list” and “filter”, thinking it might have something to do with the new V2, but tbh my coding skills are just insufficient to fully comprehend the code…
Hope someone can help out, cheers.

Here’s my read-only, it’s the portfolio section. (I was working in a sandbox in Slater but moved it to the before body tag)

12

Hey @GalaxySurfer! The API has been reworked for V2, I have adapted the code you had on the page to the new version and it seems to work as expected!

Can you please test it out and let me know how it goes?

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

      const [listInstance] = listInstances;

      const options = {
        container: '#masonry',
        margin: 16,
        columns: 3,
        breakAt: {
          991: 3,
          767: 2,
          479: 1,
        },
      };

      let macyInstance = Macy(options);

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

      listInstance.addHook('render', (items) => {
        macyInstance = Macy(options);
        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>
13

Yesss, it’s working!
Thank you so much!
All the best.

1 Like