How to Display the Amount of CMS Items in Webflow

Webflow is a powerful tool that allows users to create dynamic and interactive websites without the need for coding. One of the useful features in Webflow is the ability to display the amount of CMS items on a page, such as available jobs or blog post categories. In this tutorial, we will learn how to count the number of CMS items and display that number as text on the page.

Step 1: Setting Up the Structure

First, let's set up the structure of the CMS items on the page. In the Webflow Designer, create a collection list that will be used to display the CMS items. For example, if we are counting the number of available jobs, the collection list will contain the job items. Additionally, add a plain text element where you want to display the count of the CMS items. This could be in a footer, sidebar, or any other relevant section of the website.

Step 2: Applying Classes

Now, we will apply classes to the elements in order to properly count and display the number of CMS items.

Collection List Class

Give the collection list a class name, such as CMS jobs counter. This class will be used to identify the collection items that need to be counted.

Plain Text Element Class

Next, add a class to the plain text element where you want to display the count. For example, you can use the class jobs amount. This class will be used to update the text with the count of CMS items.

Step 3: Adding Custom Code

We will use a simple custom code snippet to count the CMS items and update the text with the count.

Inserting the Script

In the Webflow Designer, go to the page settings and insert the following script just before the closing body tag:

<script>  // Get the amount of CMS job items  var jobCounter = document.getElementsByClassName('CMS jobs counter').length;  // Update the text with the count  document.querySelector('.jobs amount').innerText = jobCounter;</script>

This script retrieves the number of elements with the class CMS jobs counter and stores it in a variable called jobCounter. Then, it updates the text of the element with the class jobs amount to display the count.

The script essentially finds the class of the CMS items, counts the occurrences of this class on the page, and then updates the designated text element with the count.

Step 4: Preview and Deployment

After adding the script, you can preview the site to see the count of CMS items displayed as text. When the site is published or exported, the count will be dynamically updated based on the actual number of CMS items.

Remember to ensure that the collection list containing the CMS items is appropriately hidden on the live site, as we only want to display the count of items and not the entire list.

Conclusion

Displaying the amount of CMS items on a Webflow site is a useful feature for providing real-time information to users, whether it's about available jobs, blog post categories, or any other dynamic content. With the simple custom code snippet provided, you can easily implement this functionality on your Webflow site.

To further explore and utilize other helpful Webflow hacks, you can clone the entire hacks project available for learning and use on your live site. Stay updated on new releases and subscribe to the YouTube channel for the latest hacks. Additionally, you can sign up for email updates at [fin sweet comm slash hacks - updates] to receive notifications when new hacks are released.

If you have specific requests for new hacks or functionalities, you can submit them at [fin sweet comm slash hacks - request]. Webflow provides a versatile platform, and with the right tools and knowledge, you can create dynamic and engaging websites without writing any code.

By following the steps outlined in this tutorial, you can easily enhance your Webflow projects with dynamic content counts, providing a more interactive and informative user experience. Happy designing!