A Webflow Widget to Display, Filter and Style Data from Multiple Collections

Introduction

The Client Problem

  • It pulls data from four different collections: Blogs, R&D, Case Studies and Events
  • We then filter by a flag called “Featured” on each of these collections
  • Finally, we sort the data — latest first — and display the Featured content across all these four collections.

Webflow Limitations

Our Solution Overview

  1. Made API calls to and got the data from all the four collections
  2. Leveraged a VueJS based front-end solution to filter and sort this data
  3. Applied the desired styling within Vue
  4. Wrapped all of this functionality and incorporated into a Webflow Symbol that could be reused by the client.

Solution Details : Getting data from the Webflow Collections API

Vue App

var app = new Vue({ el: '#app', data: { message: 'Multi Collection', items: [] }, methods: { }, created: function() { } })

Connect with Webflow API

{ "items": [ { "_archived": false, "date-and-time": "2021-08-27T00:00:00.000Z", "_draft": false, "minutes": 5, "name": "How Moloco Tackles Geo-Bleed for Clean Traffic", "blog-content": "Blog Content", "slug": "challenges-in-building-a-scalable-demand-side-platform-dsp-service", "author-2": "62381b6b2e6e68341ff4e85b", "updated-on": "2022-04-08T16:31:05.570Z", "updated-by": "Person_5d5be36140c6be829583f93b", "created-on": "2022-03-31T19:03:43.814Z", "created-by": "Person_5d5be36140c6be829583f93b", "published-on": "2022-04-08T16:31:32.425Z", "published-by": "Person_5d5be36140c6be829583f93b", "tags": "6243de4de832b14b2974cde2", "featured": true, "_cid": "62381aa25031d414e4f8f46f", "_id": "6245fb0fc69ee9460661d7fa" } ], "count": 2, "limit": 100, "offset": 0, "total": 2 }
created: function() { let endpoints = [ 'https://exemplifi.dev.webflow/collections/case-studies/items/', 'https://exemplifi.dev.webflow/collections/blogs/items/', 'https://exemplifi.dev.webflow/collections/rnd-blogs/items/', ]; Promise.all(endpoints.map((endpoint) => axios.get(endpoint))).then( axios.spread((case_studies, blogs, rnd_blogs) => { this.getCaseStudies(case_studies.data); this.getBlogs(blogs.data); this.getRNDBlogs(rnd_blogs.data); }) ); }

Solution Details: Filtering Logic in Vue

VueJS Filtering

filteredItems: function(data) { data.items = data.items.filter((item) => { return (item.featured == true) }) return data; }

VueJS Sorting

sortItems: function(data) { data = data.sort((a, b) => b.date - a.date) return data; }
[ { "name": "Organic Poaching", "image": "organicPoaching_bannerImage_0622.jpg", "author": "62381b6b2e6e68341ff4e85b", "id": "6246ee583d33fa25df189b40", "cid": "62381c01b6d9c8189c889bcf", "slug": "/case-studies/organic-poaching", "date":"2022-03-03T14:00:00.000Z" }, { "name": "Challenges in Building a Scalable Demand Side Platform (DSP) Service", "image": "Challenges%2520in%2520building%2520a%2520DSP.png", "author": "62381b6b2e6e68341ff4e85b", "id": "6245fb0fc69ee9460661d7fa", "cid": "62381aa25031d414e4f8f46f", "slug": "/r-d-blog/challenges-in-building-a-scalable-demand-side-platform-dsp-service", "date":"2022-03-05T14:00:00.000Z" } ]

Solution Details: Widget Styling in Vue

Solution Details: Wrapping everything into a Webflow Symbol

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store