We’re currently trying to add a class name to each item within a collection list - this name needs to come from a field within the cms.
My understanding is to add a dynamic field name to collection list items required custom JS - is this something anyone has had success with?
The intention is to vary styling across the list items - I know people have achieved this through using multiple collection lists (e.g a collection list of featured items, followed by a list of standard items) but we’d like more control than that.
Any help appreciated!
Here is my public share link: LINK
(how to access public share link)
Here is some jQuery code that will do what you want. Read the comments in the code.
Here is a link to the code.
Thank you! Much appreciated.
Just testing an implementation combining with MixitUp dynamic filtering, which requires the addition of combo classes to act as category tags for each item being sorted. Works a treat so far:
Project is here if you’re interested:
Hello Webdev, and thanks for those examples.
Would there be a way to apply that same logic on a CMS Collection list inside of a CMS template page?
For instance: let’s say I have two collections, one for “categories” (Economics, Politics) and one for “articles” (Article A, B, C, D, E). On the “Politics” category template page, I’m creating a CMS Collection List to display the article within that category (A, B, C) — via a standard reference field. Same for the “Economics” category template page (but this time with articles D and E).
But now let’s imagine I want to give article A a different color (highlight) or article B a different width, or article C a different text style etc etc, based on fields within that Articles collection.
That’s where I’m stuck.
I cannot reference CMS fields of the Articles collection in the
Before <body> tag section of the Category Template Page. I can only reference CMS fields of the Category collection in that area.
Is there a workaround?
Thanks in advance
I’m after a similar thing as @ronotypo in that, I would love to have some pages of the collection have a white background, others light yellow, etc.
I have added in nested classes to my custom code for each page, just need a way to add the class of the collection-page to the body.
Is there a way to extract with js data from a collection item directly without having to use a textelement in the DOM?
I know I can just set to “hidden” and call it a day, just wondering
Since we can only act on the page once it is rendered, using a value on the page after the render is the only way.
Thanks for this information! Very useful for me.