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
- 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) - 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
- The nested collection should also have a link and that link should be applied for the current page.
- 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.
- 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.
- 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>
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.
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.
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
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.
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.