Tutorial Video
Timed content modules are very popular because they make it easy for a website owner to automatically schedule rotating content, show, hide or alternate content after a given time. This video is great to learn about Scheduled Content and Timed content for Content Planners.
Timed Content plugins are very popular across many website builder platforms. These apps and functionalities are known by many names, such as:
Timed Content
Scheduled Content
Alternating Content
Rotating Content
Randomized Content
But did you know that Wix does not have any apps that allow you to create timed rotating content?
At times, clients want to keep their website content 'fresh' by changing the text and content daily. This is most especially important when the same visitors return to the website on a daily basis. This tutorial will give you some ideas on how to accomplish this without having to edit content every day.
Follow Along #1
Tutorial Page
Follow Along Method #1
Scheduled Content
Create a database with content to filter
If you don't have one already, create a database collection to save your information that will be auto randomized.
You can visit this page to view an example of the randomize code in use (you will find it towards the top of the page under Creative Solution #1):
Feel free to to visit this page another day to view another quote generate in the appropriate place for that specific day of the month. In our example, we created a database collection called 'quote' with the following fields:
Announcement (Text field)
Author (Text field)
Time (Number field)
We made sure to adjust the database settings / permissions to 'Anyone' can view content.
In our database collection we made sure to add 31 different quotes and assigned them each a consecutive number from 1 to 31. This way our code will get the day of the month and then find the correct quote to display for that day.
Create a dataset and connect to a database collection
Add a dataset to your page and connect it to your database collection. Set the mode to 'Ready Only' via the dataset settings. We named our dataset ID as #dayOfMonthDataset.
For our example, we created 1 text element and 1 button element. We connected our button to a static link that does not change so we used the icon link settings instead of the database icon settings. Since we our Author name may change depending on the random item selected by the code, we will change our button ID name to #dayOfMonthLabel. We will set the button label by writing a little bit of code.
We connected our text element via the database icon settings directly to our Announcement field through our dataset.
Add the code to your page
Now you will write a code to calculate todays day, find the day of the month and filter the dataset to display only that 1 record. The code in our example looks like this:
import wixData from 'wix-data';
let getDate = true;
calculateDate;
$w.onReady(async function () {
const today = new Date(); //This line gets todays date.
const day = today.getDate(); //This line gets todays Number day.
console.log("Today is " + today);
console.log("Day is " + day);
$w("#dayOfMonthDataset").onReady(async () => {
$w("#dayOfMonthDataset").setFilter(wixData.filter()
.eq("day", day) //This line filters the dataset by the Number day
)
.then(() => {
//You can use this section to do something else after the code finishes filtering
console.log("Dataset is now matching todays day.");
let file = $w("#dayOfMonthDataset").getCurrentItem();
let label = file.author; //This line gets the current author
$w("#dayOfMonthLabel").label = label; //This line labels our button
})
.catch((err) => {
console.log(err);
});
});
});
Follow Along Method #2
Randomized Content
Create a database with content to filter
If you don't have one already, create a database collection to save your information that will be auto randomized. You can visit this page to view an example of the randomize code in use (you will find it towards the middle of the page under Creative Solution #2):
Feel free to refresh the page at the top of your browser to view a different random quote generate in the appropriate place. In our example, we created a database collection called 'quote' with the following fields:
Announcement (Text field)
Author (Text field)
We made sure to adjust the database settings / permissions to 'Anyone' can view content.
Create a dataset and connect to a database collection
Add a dataset to your page and connect it to your database collection. Set the mode to 'Ready Only' via the dataset settings. We named our dataset ID as #randomDataset.
For our example, we created 1 text element and 1 button element. We connected our button to a static link that does not change so we used the icon link settings instead of the database icon settings. Since we our Author name may change depending on the random item selected by the code, we will change our button ID name to #randomQuoteLabel. We will set the button label by writing a little bit of code.
We connected our text element via the database icon settings directly to our Announcement field through our dataset.
Add the code to your page
Now you will write a code to trigger the dataset to randomize your database records and place them in a different order. The code in our example looks like this:
import wixData from 'wix-data';
let randomActivate = true;
random;
$w.onReady(async function () {
$w("#randomDataset").onReady(async () => {
if(randomActivate);
console.log("Activate random dataset.");
let database = $w('#randomDataset').getTotalCount(); //This line gets the total count
let mixon = Math.floor(Math.random() * database); //This line begins randomizing code
$w("#randomDataset").setCurrentItemIndex(mixon)
.then(() => {
//You can use this section to do something else after the code finishes randomizing
console.log("Randomizing is complete.");
let file = $w("#randomDataset").getCurrentItem();
let label = file.author; //This line gets the current author
$w("#randomQuoteLabel").label = label; //This line labels our button
});
});
});
function random(items) {
var settings = items.length, randomize, index;
while (0 !== settings) {
index = Math.floor(Math.random() * settings);
settings -= 1;
randomize = items[settings];
items[settings] = items[index];
items[settings] = randomize;
}
return items;
}
Follow Along Method #3
Timed Content
Create a database with content to filter
If you don't have one already, create a database collection to save your information that will be auto randomized.
You can visit this page to view an example of the timed content code in use (you will find it towards the bottom of the page under Creative Solution #3):
Feel free to return to the page at a different hour to to view an auto generated quote in the appropriate place. In our example, we created a database collection called 'quote' with the following fields:
Announcement (Text field)
Author (Text field)
Time (Number field)
We made sure to adjust the database settings / permissions to 'Anyone' can view content.
In our database collection we made sure to assign different quotes a consecutive number from 1 to 24. These numbers represent the numbers of hours in a day. This way our code will get the time of day and then find the correct quote to display for that hour.
Create a dataset and connect to a database collection
Add a dataset to your page and connect it to your database collection. Set the mode to 'Ready Only' via the dataset settings. We named our dataset ID as #timeDataset.
For our example, we created 1 text element and 1 button element. We connected our button to a static link that does not change so we used the icon link settings instead of the database icon settings. Since we our Author name may change depending on the random item selected by the code, we will change our button ID name to #timeofDayLabel. We will set the button label by writing a little bit of code.
We connected our text element via the database icon settings directly to our Announcement field through our dataset.
Add the code to your page
Now you will write a code to calculate todays day, finds the current hour and filters the dataset to display only that 1 record. The code in our example looks like this:
import wixData from 'wix-data';
let getDate = true;
hourcalculate;
$w.onReady(async function () {
const checkTimeAgain = 60000; //This line represents the time in milliseconds. 60000 milliseconds equals to 1 minute.
setTimeout(() => {
checkAgain(); //This line triggers the code to check for the time again.
}, checkTimeAgain);
const today = new Date(); //This line gets the current date
const hour = today.getHours(); //This line gets the current hour
console.log("The current hour is " + hour);
$w("#timeDataset").onReady(async () => {
$w("#timeDataset").setFilter(wixData.filter()
.eq("time", hour) //This line filters our collection to find the correct hour in our Time field
)
.then(() => {
console.log("Dataset is now matching time of day.");
let file = $w("#timeDataset").getCurrentItem();
let label = file.author; //This line gets the current author
$w("#timeofDayLabel").label = label; //This line labels our button
})
.catch((err) => {
console.log(err);
});
});
});
function checkAgain() {
const today = new Date();
const hour = today.getHours();
console.log("Time checked again. The new current hour is " + hour);
$w("#timeDataset").setFilter(wixData.filter()
.eq("time", hour)
)
.then(() => {
console.log("Dataset is now matching time of day.");
let file = $w("#timeDataset").getCurrentItem();
let label = file.author; //This line gets the current author
$w("#timeofDayLabel").label = label; //This line labels our button
})
.catch((err) => {
console.log(err);
});
}
Author
by Code Queen
Stuck on a project? Hire Code Queen, LLC!
Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.
Online Booking: Discovery Session
Contact Form: Send project details