Create Timed Content, Scheduled Content and Randomized Content

Updated: Sep 14, 2020


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

https://www.totallycodable.com/example-timed-content


 

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):

https://www.totallycodable.com/example-timed-content


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):

https://www.totallycodable.com/example-timed-content


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: