CMS Combine + Static to Collection List

Attributes
1

Hey there,

I’m trying to use CMS Combine with CMS Filter and Static to Collection List.

When adding in the ‘Static to Collection List’ library, the Combined collection except for the first one is hidden. On top of that, I’m looking to limit to only 3 items after the combined list.

Any suggestions on the following?

2

Hey @info2! Can you share a link?

Also, what do you mean by limiting the collection to only 3 items after the combined list? I believe you can set this up natively in Webflow before combining the lists

3

Here the staging link Luis. https://vitally-2023.webflow.io/cc-test

Basically I want to limit the list after CMS Combine runs to only 3 items. Also want to mention that the Static element is hidden as it would hide majority of the rendered list when attributes are connected.

Here is the page I want to replicate but using CMS Combine to allow users to choose which CMS item to feature.

4

Will the selection of items be handled by CMS Filter? If so we can add some JS to the CMS Filter callback to add a hide class to all but the first 3 items in the list.

I’m not quite sure I 100% understand what you are trying to do :sweat_smile: could you record a quick loom?

5

Hey Luis, here is a quick Loom to give you an overview of what we’re trying to achieve as well as the roadblocks.

6

Hey @info2, there is no native way of limiting the items shown in a collection list. A hacky solution for this could be to incorporate CMS Load and paginate the list to 3 items per page then hide the nav buttons. This would allow you to filter and sort the list with Attributes and still only have 3 items shown on the first page.

Another way to do this is to add some code that hides the rest of the items. Let me know which approach you’d like to go with and once we have it setup we can tackle the Static element issue.

7

Lets try with the code solution, its good to know the other option which I can try in the future.

8

Hey @info2, here is some script I’ve come up with. You can test without the setTimeout as the speeds should be better when published

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

      const sortBtn = document.querySelector('[fs-cmssort-element="trigger"]');

      sortBtn.addEventListener('click', () => {
        setTimeout(() => {
          const list = document.querySelector('[fs-cmscombine-element="list"]');
          const listItems = list.querySelectorAll('.cl-item');

          const startIndex = listItems.length - 2;

          for (let i = startIndex; i < listItems.length; i++) {
            listItems[i].classList.add('hide');
          }
        }, 400);
      });
    },
  ]);
</script>

You can always build up from here.

9

Awesome this seem to have worked, now how would we make static element work in this stack?

10

You’ll need to add fs-cmsstatic-interactive="true" to your static element and use the original script

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

This should be able to replicate the original page you sent me