Can I use combine on more than one list (set) on the page?

Attributes
1

I have a collection called Articles, and I’m displaying them on a single page grouped by a category (manually).

I have a new collection called Videos, and I want to combine them into each group list.

Topic A (list-1)
Articles+Videos

Topic B (list-2)
Articles+Videos

Topic C (list-3)
Articles+Videos

I got the first one going well, but when I tried to set up the second, it broke the combine across the board.

There doesn’t seem to be a specific example of list-1, list-2 for combined, so I want to verify this can be done before I go chasing my tail.

Thanks!

2

I had applied sorting to the first set I did, but it looked like the code for that was causing a problem, so I removed it and then was able to combine different lists by incrementing their list numbers.

Combine + Sort + Slider is the end goal.
Right now, Combine + Slider is working.

I’ll try to apply the sort again at the end.

3

Hey @ryann.mccorkell! CMS Combine will work for several lists, all lists with fs-cmscombine-element=list will be combined into one lists, all lists with fs-cmscombine-element=list-2 will get combined into a second list and so on.

Adding each list to a slider will require some extra setup as you need to combine the lists before the elements are added to a slider. Let me know when the combine is ready and I’ll help you setup the sliders which follow the same structure for multiple instances :slight_smile:

4

Thanks @Support-Luis

I got the sliders going with the following code:

<!-- [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 src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>

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


<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmscombine',
  (combineInstances) => {
      window.fsAttributes.cmsslider.init();
  },
]);
</script>

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

I deferred the slider load until the combine is complete. I have tried to apply the fs_cmssort_button trick to sort all the combined lists, but it doesn’t seem to have any impact.

The two are collections combined one after the other; I’d like to sort them alphabetically so the videos are interspersed with the articles (totally random would be even better, but I don’t think we can do random with the sort script that I could see).

I’ve assigned the fs-cmssort-element to each collection pair
fs-cmssort-element = list-1

And tried calling it on load.

I feel like it may need to be further deferred to allow the sort before the slider. I am sure there is a more concise way to do that.

5

@Support-Luis I think I’m close but need some help getting over the finish line.

From looking at the sort page, I noticed that I needed a trigger button for each combined list.

[button]
fs-cmssort-element = trigger
fs-cmssort-field = title

[slider]
fs-cmsslider-element = slider

[collection 1]
fs-cmsslider-element = list
fs-cmscombine-element = list
fs-cmssort-element = list

[collection 2]
fs-cmscombine-element = list

[button]
fs-cmssort-element = trigger-2
fs-cmssort-field= title

[slider]
fs-cmsslider-element = slider-2

[collection 3]
fs-cmsslider-element = list-2
fs-cmscombine-element = list-2
fs-cmssort-element = list-2

[collection 4]
fs-cmscombine-element = list-2

etc.

Current code:

<!-- [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 async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>

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

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmscombine',
  (combineInstances) => {
      window.fsAttributes.cmsslider.init();
  },
]);
</script>

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

I tried the troubleshooting query, and it returned this error:

Attribute fs-cmssort-field=“title” in list was not found. Add fs-cmssort-field=“title” in the children list on the page.

But I have flagged all the titles in all collections with fs-cmssort-field=“title” attribute but nada.

6

Hey @ryann.mccorkell! You are almost there, could you share a link with me? I’ll go inn and check the details of everything

7

@Support-Luis Thanks!

https://preview.webflow.com/preview/mbc-marketplace-me?utm_medium=preview_link&utm_source=designer&utm_content=mbc-marketplace-me&preview=d1d9c1ef6ab881f0433080f31e5f9689&pageId=644bf917fc9e33689980b660&workflow=preview

I think the code provided for fs_cmssort_button probably hits the first one and then stops (and wasn’t apparent as the first group doesn’t have anything in it’s combined collection currently).

I was going to try something like this on the onload but everything kind of went bonkers before I gave up for the night.

document.querySelectorAll(‘.fs_cmssort_button’).forEach(button => button.click());

8

Hey @ryann.mccorkell! I see what you mean, here is the best I could come up with, I don’t like using a timeout but no matter what I did if CMS Slider is initialized right after the lists are sorted, all but the first item of the first slider are hidden…

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmscombine',
    (combineInstances) => {
      // Use the counter to select the specific fs_cmssort_button
      const sortButtons = document.querySelectorAll('.fs_cmssort_button');

      // Iterate through each button and click them
      sortButtons.forEach((button) => {
        button.click();
      });
      setTimeout(() => {
        window.fsAttributes.cmsslider.init();
      }, 500);
    },
  ]);
</script>

Can you test it and let me know how it works on your end? Please try without the timeout as well