Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

0:00 Intro

2:03 Turn on Developer Mode

6:16 Create Blog Category

10:44 Time Ago Function (View)

13:32 Load Post Function

18:14 Load Categories Function

29:12 Categories OnClick Function

30:27 Repeater Items Function

38:27 Load Repeater Categories Function

44:12 Review of Code

---

Code Snippet to follow along with the video:

Page Code

This imports the multiple API's

import wixData from 'wix-data';
import wixLocation from 'wix-location';

This loads the blog posts in your Blog Post Database

$w.onReady(function () {
 // TODO: write your page related code here...

    loadPosts()
    loadCategories()

});

Create TimeAgo

This feature will make sure the time from when the blog was posted until the current time provided will show up in an updated manner.

function timeAgo  (parameter) {
 let timeAgoInfo = '';
 let num
 let now = new Date() //current timeAgoInfo
 let diff = now - parameter // diff between current and provided timeAgoInfo
 var ms_Min = 60 * 1000;
 var ms_Hour = ms_Min * 60;
 var ms_Day = ms_Hour * 24;
 var ms_Mon = ms_Day * 30;
 var ms_Yr = ms_Mon * 365
 if (diff < ms_Min) {
        timeAgoInfo = 'Just Now'
 return timeAgoInfo
    } else if (diff < ms_Hour) {
        num = Math.floor(diff / ms_Min)
        timeAgoInfo = (num === 1) ? num + " minute ago" : num + " minutes ago";
 return timeAgoInfo
    } else if (diff < ms_Day) {
        num = Math.floor(diff / ms_Hour)
        timeAgoInfo = (num === 1) ? num + " hour ago" : num + " hours ago";
 return timeAgoInfo
    } else if (diff < ms_Mon) {
        num = Math.floor(diff / ms_Day)
        timeAgoInfo = (num === 1) ? num + " day ago" : num + " days ago";
 return timeAgoInfo
    } else if (diff < ms_Yr) {
        num = Math.floor(diff / ms_Mon)
        timeAgoInfo = (num === 1) ? num + " month ago" : num + " months ago";
 return timeAgoInfo
    } else if (diff > ms_Yr) {
        num = Math.floor(diff / ms_Yr)
        timeAgoInfo = (num === 1) ? num + " year ago" : num + " years ago";
 return timeAgoInfo
    } else {
 let month = parameter.getMonth() + 1
 let day = parameter.getDate()
 let year = parameter.getFullYear()
 let hour = (parameter.getHours() > 12) ? parameter.getHours() - 12 : (parameter.getHours() === 0) ? '12' : parameter.getHours()
 let minute = (parameter.getMinutes() > 10) ? parameter.getMinutes() : "0" + parameter.getMinutes()
 let ampm = (parameter.getHours() > 12) ? "pm" : "am"
        timeAgoInfo = month + "/" + day + "/" + year + " " + hour + ":" + minute + " " + ampm
 return timeAgoInfo
    }
}

Run a base query to get the loaded posts inside the database.

This query will return the specified parameters from the post database.

async function loadPosts (parameter) {
    wixData.query("Blog/Posts").find().then(async (res) => {
 if (res.items.length > 0) {
            $w("#Repeater1").data = await res.items;
            $w("#noPostColumnStrip").collapse()
            $w("#postStrip").expand()
        } else {
            $w("#Repeater1").data = [];
            $w("#noPostColumnStrip").expand()
            $w("#postStrip").collapse()
        }
    })
}

Run a base query to get the loaded categories inside the database.

This query will return the specified parameters from the category database.

async function loadCategories (parameter) {
 let arrayInfo = [];
    wixData.query("Blog/Categories").find().then(async (res) => {
 let citems = res.items
 if (citems.length > 0) {
            citems.map((param)=>{ arrayInfo.push({"label": param["label"], "value": param["label"]})})
            $w("#categories").options = arrayInfo
            $w("#text406, #categories").expand()
        } else {
            console.log("no categories")
            $w("#text406, #categories").collapse()
        }
    })
}

Set the value of the categories to the link of each category, that way the onClick parameter can go to a specific location on the website.

export function categories_click(event) {
 // Add your code for this event here: 
    wixLocation.to($w("#categories").value.toString())
}

Once you received the information from the query for the loadPosts function, populate and assign each element in your repeater to one of the field keys in the database.

export async function Repeater1_itemReady($item, itemData, index) {
 // Add your code for this event here: 
 let defaultImage = $w("#image").src;
    $item("#image").src = await (itemData.coverImage) ? itemData.coverImage : defaultImage;

    $item("#image").alt = await (itemData.title.length > 50) ? itemData.title.slice(0,47) + "..." : itemData.title;

    $item("#image").tooltip = await (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#daysAgo").text = await (itemData.lastPublishedDate) ? timeAgo(itemData.lastPublishedDate).toString() : "";

    $item("#title").text = await (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#excerpt").text = await (itemData.excerpt.length > 150) ? itemData.excerpt.slice(0, 147) + "..." : itemData.excerpt;

 //console.log(itemData.categories)
 if (itemData.categories.length > 0) {
 let categoryList = [];
 for (var i = 0; i < itemData.categories.length; i++) {
 let info = await loadRepeaterCategories(itemData.categories[i])
 await categoryList.push({ "label": info, "value": info })
        }

 if (categoryList.length > 0) {
            $item("#categoriesRepeater").options = await categoryList
            $item("#categoriesRepeater").show()
        } else {
            $item("#categoriesRepeater").hide()
        }

    } else {
        $item("#categoriesRepeater").options = []
        $item("#categoriesRepeater").hide()
    }

    $item("#title").onClick((event) => {
        wixLocation.to(itemData["postPageUrl"])
    })
    $item("#image").onClick((event) => {
        wixLocation.to(itemData["postPageUrl"])
    })
}

This function below will get the category's information and send it back to the repeater for each post.

async function loadRepeaterCategories (parameter) {
 let info = "";
 await wixData.query("Blog/Categories").eq("_id", parameter).find().then((res) => {
 if (res.items.length > 0) {
            info = res.items[0].label;
        } else {
            info = null;
        }
    })

 return info
}

---

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2020: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!