CMS Sort + Static not working

[slawek]

Hey!
We have a blog page with almost all the attribute solutions applied, so CMS Combine, Filter, Load, Sort and Static all together.

What I’ve noticed while adding Sort option is that our static element is not dispaying correctly within the combined CL.

Here is the link to the live page - Bounce Blog
and we would like to add this static element as item nr 4 like it was before.

Seems like only Sort option makes the difference cause it was workng really well before adding this attributes.
Any ideas how we could solve this?
I appreciate your support.

Best
Sławek

[slawek]

@Support-Luis any comments? I appreciate man! Thanks

[Support-Luis]

Hey @slawek! Seems that adding the CMS Combine script is what is breaking the list.

Let me try to look into which loading order everything works nicely

[Support-Luis]

@slawek Can we try this setup?

Here are the Attributes scripts with the added preventload tag

<!-- [Attributes by Finsweet] CMS Combine -->
<script
  async
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"
></script>

<!-- [Attributes by Finsweet] CMS Sort -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"
></script>

<!-- [Attributes by Finsweet] CMS Filter -->
<script
  async
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>

<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>

<!-- [Attributes by Finsweet] CMS Static -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsstatic@1/cmsstatic.js"
></script>

And the callback to add to the </body> section of the page

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

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmssort',
    (listInstances) => {
      console.log('cmssort Successfully loaded!');
      document.querySelector('.sort-articles').click();
      window.fsAttributes.cmsstatic.init();
    },
  ]);
</script>

Let me know how it goes!

[slawek]

Unfortunately not @Support-Luis

• Bounce Blog
  The static el. is still out of the CL.
  Do you think attribute order also makes the difference?

[Support-Luis]

Oh I forgot a small detail! My bad, you also need to add a fs-cmssort-field="sort" fs-cmssort-type="number" div to the static element.

I noticed that using 4 sets the item where it should.

And no, Attribute order on the element does not matter as much as order of script firing.

[slawek]

Still can’t make it work . @Support-Luis
The div is there with the attributes. What could be wrong here?

[Support-Luis]

@slawek, I do not see it on the live page I’mm afradi

But this is how I got it to work on my end

Here is the zoomed out view of the page with the sort number visible

[slawek]

Awesome @Support-Luis It’s working
I appreciate it man!

[Support-Luis]

You are welcome!