I am setting up a plugin called UniFilter that allows me to sort CMS collection list items similarly to MixItUp as posted by @sabanna. The features in UniFilter were a bit easier to add to my site and understand, and I like the simplicity and look of their demo.
I’ve run into the problem, however, that I cannot set dynamic custom data attributes using data from the CMS collection. For example, I want users to be able to filter search results to see only farms with crops or livestock. That data is stored in the CMS collection, but how do I get it into the HTML custom data attribute tag element?
For example,
data-business-type=“dynamic-value”
where “dynamic-value” is a dynamic value that could be “crops” or “livestock” depending on the list item. I tried a simple syntax of $dynamic-value but that didn’t work.
I know this was originally asked almost three years ago now, but I found a custom code solution for this problem today and figured it might help someone else down the road.
In my instance I needed to create data-attributes for each project item in a collection list that contained the url for the thumbnail images. Here are the three steps I took to make this work:
Create an empty array: To create your array you can either place this script within your custom head code or in an embed right before your collection list: <script type="text/javascript">const projectImgs = [];</script>
Push data to the array: now that you have an empty array you need to push data to it, in my instance I pushed the thumbnail image urls. To do this you will place an embed element within the collection item within your collection list with the following script: <script type="text/javascript">projectImgs.push('ADD_DYNAMIC_FIELD_HERE');</script>
Loop over items and assign attribute from array: with an array containing all your data that has been pushed to it through each collection item iteration you will now you need to loop through each item in your collection list and assign the corresponding item from your array. To do this you need to add the following script within your footer custom code section: <script type="text/javascript">$('.c-project-link').each(function(i){ $(this).attr('data-thumbnail', projectImgs[i]); });</script>
Pitfall 1: the order of these scripts is super important because you need to first create an empty array before you can push any data (this will throw a bunch of errors in the console), and if you loop over an empty array nothing will get added to your collection items.
Pitfall 2: if you change the array constant projectImgs make sure you change it in all three scripts, this applies to the correct selector class ex. .c-project-link.
Hope this helps for anyone else running into this in the future!