Using Finsweet attributes for a CMS nested collection in Webflow

By  
Ankita Gupta
Case Study
Style guide
Webflow
Accessibility requirements
Finsweet attributes

The Stone Centre project uses a lot of nested collections. They can be tricky to work with, but Finsweet attributes save the day!

We start with the script in the <head>

<!-- [Attributes by Finsweet] CMS Nest -->

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>

Set names and values

The list that requires multiple nested collection will have following attributes-

Name- fs-cmsnest-element

Value- list

Note- This attribute will be applied to list, not wrapper

If there are more than 1 list-

Name- fs-cmsnest-element

Value- list-2

For nested collection list the following attributes will be applied-

Name- fs-cmsnest-collection

Value- tags

Whatever value you provide here to the nested collection list, the same will be applied to the div block of that collection list where this value needs to be imported.

Points to note for this feature

  1. Add 1 link block in that CMS that needs nested collection and the link block should link to the current page.
    (Caution- In one scenario, when another link block directing to another page was added, the nest collection stopped working. While it was working perfectly fine in another) 
  2. Add div in that list for the item that needs to imported from other CMS and apply following attribute-

Name- fs-cmsnest-collection

Value- tags

  1. The nested collection should also have a link and that link should be applied for the current page.
  2. The nested collection list needs to be present on the template page of the collection list where nested elements are required. On the template page, use a nested collection from a multi-reference field and add the same attributes to the nested list.
screenshot of collection list settings
  1. If you want to hide the nested collection on the page and on the template, then do not hide the collection itself. Add a div block and bring the nested collection under it. Hide the div block. This will not affect the result.
  2. If you need multiple nested collection items on template as well then you need to add nested collection twice- one with multi-reference field and one without multi-reference field.

CMS Filter

Head script

<!-- [Attributes by Finsweet] CMS Filter -->

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

Attributes for the list that needs to be filtered

Name: fs-cmsfilter-element

Value: list

Here you cannot have multiple lists to be filtered. Here there is one list that is being filtered based on the values we want.

Add a form block

ONLY USE ONE FORM. You should not have more than one Form Block component to use CMS Filter.

All checkboxes, radios, selects, range sliders, inputs, and any other form element go inside this one Form Block.

Attributes for the form block

Name: fs-cmsfilter-element

Value: filters

Add following attributes for Filter UI field attribute

Name: fs-cmsfilter-field

Value: tags

Add fs-cmsfilter-field="Tags" to the Filter UI.

--- Add this to each Checkbox Label/select/range slider etc. in the Filter UI that should filter by Tags. The text of the label will act as the search term. If the label of the checkbox is "Spain", the checkbox will filter by "Spain".

Search field

Name: fs-cmsfilter-field

Value: *

The above case is used to filter by any word.

This attribute needs to be applied to all the fields of the CMS list.

Name: fs-cmsfilter-field

Value: tags

The above case is used when the search field is used to filter particular fields/categories of CMS eg. Innovation is a tag and search field is used only for searching tags, then if the user types innovation, it will filter the results based on that tag. This same attribute needs to be applied to the field of CMS collection which has this tag based text.

Submit button

No attributes are needed, the submit button of the form will act as a filter button for the filters.

Reset

Name: fs-cmsfilter-element

Value: filters

This will work only when it is present in the form block containing filters.

Results Count

Name: fs-cmsfilter-element

Value: results-count

This can work outside the form block containing filters and the CMS list.

Code for connecting CMS item to Select field

The following code needs to be put in the before body-

<script>

$('.author-item').each(function(){

var s = $(this).text();

$('.author-select-field').append('<option value="'+s+'">'+s+'</option>');

})

</script>

A search box

list of names

The CMS list item that needs to be brought to the select field is given class name as author-item. It is not necessary to be a link. The CMS should be on the same page and if hidden under a separate div block.

Cannot combine CMS nest field with filter field

If you are fetching a field from another nest collection, that means the list that you are filtering does not have the value. It is an empty div block for the filter. Here in the image below, I have two empty div blocks, one is for tag and the other is for author. I am fetching both these values from their respective nest collection list.

empty divs on the page

Now how to bring both the values in this CMS. Since Webflow allows one nested CMS once on a page, I used a nested CMS for authors.

author name highlighted

For tags, I used created tag-ref-text in CMS. Reason- There is only one tag attached to an article. While for authors, there could be multiple authors, which can make it difficult to update the same in CMS. For tags it is easy to update them simultaneously.

This is how it looks in CMS

screenshot of tags in Webflow designer

Here it is important to have the same spelling. It doesn’t matter if it is lowercase or uppercase because here we will use this text for filter purposes.

Now I have added the same to the list and made it hidden.

screenshot of hidden list
screenshot of Style panel with hidden selected on Display

I will now add filter attributes to this text block: topic-ref-text

When I publish this, the filter works because even if this field is hidden in the CMS list, it still filters the result based on the value that I have assigned to both the filter UI field and the field in the CMS list.