Article Reading Time in WIX | Add to a Regular Page & Dynamic Page.

Show and tell
,
1

Table of Content

  • Description

  • Static Page Code

  • Dynamic Page Code

  • VIDEO (WATCH)

1920×1080 288 KB

Hello guys :wave:t4:, I wanted to share this tutorial here on how to add reading time to your WIX website. This feature will be added both in static and dynamic pages.

The first part of the code is for the static page, where we are going to be counting the number of words in a text element and then calculating how many minutes it will take an average reader to read through the text.

In that example I had two text elements with IDs articleText for the text element that displays the text to be counted and the readingTime text which displays how many minutes it will take to read through the articleText element.

The second part of the tutorial is the part where we displayed content in our dynamic page and then calculated how long it will take to read each description for the current dynamic item.

In that case, I used the dataset getCurrentItem() method to retrieve the current item’s description field from the database and counted the number of words directly from the database… This is so because, a dynamic page is just like a static page but with different content. So if we get the total word count from the connected element, it will only get the text content of the text element instead of the actual item’s data.

STATIC (REGULAR) PAGE CODE

$w.onReady(function () {
 
    const post = $w("#articleText").text;
 
    const avgWordsPerMin = 250;
 
    setReadingTime();
 
    function setReadingTime() {
 
        let count = getWordCount();
        let time = Math.ceil(count / avgWordsPerMin);
 
        $w("#readingTime").text = time + " min read";
 
    }
 
    function getWordCount() {
         return post.match(/(\w+)/g).length;
    }
 
});

DYNAMIC PAGE CODE

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
 
        let itemObj = $w("#dynamicDataset").getCurrentItem();
 
        const post = itemObj.description;
 
        const avgWordsPerMin = 250;
 
        setReadingTime();
 
        function setReadingTime() {
 
            let count = getWordCount();
            let time = Math.ceil(count / avgWordsPerMin);
 
            $w("#readingTime").text = time + " min read";
 
        }
 
        function getWordCount() {
            return post.length;
        }
    });
});

VISIT MY WEBSITE >>>>>> https://www.wixideas.com/tutorials
MY YOUTUBE >>https://www.youtube.com/channel/UCMHgFJz0s8ntrf89LOsWGzQ/featured

Facebook Page: WIX Ideas
Facebook Community Group: Wix Ideas Community | Facebook
Instagram: Wix Ideas (@wixideas) • Instagram photos and videos
Website: https://www.wixideas.com/
YouTube Channel: https://www.youtube.com/@wixideas

1 Like