top of page

Our blog / post

Writer's pictureVKL

Display Random Content of Database in WIX website


To display random content from a database in a Wix website, you will need to use code and integrate the database into your site.

To display random content from a database in a Wix website, you will need to use code and integrate the database into your site. There are several ways to achieve this, and I'll provide you with some options to consider. Here is a detailed guide on how to accomplish this:


Option 1: Using Wix Velo

Wix Velo (formerly known as Wix Code) is a powerful development platform that allows you to add custom functionality to your Wix site using JavaScript code.


First, you need to create a database collection in Wix. Go to your Wix Editor, click on the "Database" tab on the left sidebar, and then click on "Create a New Collection." Define the fields you want to include in your collection, such as title, description, image, etc.


Once your collection is created, switch to the "Code" view in the Wix Editor. You can do this by clicking on the "Code" icon at the bottom-left corner of the editor.


In the code view, you can use JavaScript to query the database collection and retrieve random content. Here is an example of how you can do it:



 

Copy

import wixData from 'wix-data';


$w.onReady(function () {

wixData.query('YourCollectionName')

.find()

.then((results) => {

if (results.items.length > 0) {

const randomItem = results.items[Math.floor(Math.random() * results.items.length)];

$w('#textElement').text = randomItem.title;

$w('#imageElement').src = randomItem.image;

// Add more code to populate other elements on your page with the random content

}

})

.catch((error) => {

console.error(error);

});

});


 
Save your code and go back to the Wix Editor

Replace 'YourCollectionName' with the actual name of your database collection. Also, update the #textElement and #imageElement with the relevant IDs of the elements on your page where you want to display the random content.


Save your code and go back to the Wix Editor. You can now add the elements (text, image, etc.) on your page and assign them the corresponding IDs that you used in the code.


Preview your site or publish it to see the random content from your database collection displayed on your page.


Option 2: Using External Database Integration

If your database is external to Wix, such as an AWS RDS or Google Cloud SQL database, you can still integrate it with your Wix site using an external database adaptor.


Deploy an external database adaptor for your specific database engine on your chosen hosting platform. Wix provides container image adaptors for databases like MySQL, Postgres, MongoDB, MS SQL, Google Cloud Spanner, and Google Cloud BigQuery. You can follow the tutorials provided by Wix to set up the adaptor on AWS, Google Cloud, or Microsoft Azure.


Once the adaptor is deployed, you can use Wix Velo to connect to your external database and retrieve random content. The process would be similar to Option 1, but instead of querying a Wix database collection, you will query your external database using the adaptor.


Option 3: Using WordPress Plugin

If you prefer to use WordPress as your content management system (CMS) and you want to display random content on your Wix site, you can use a WordPress plugin called "Random Content."


Install and activate the "Random Content" plugin on your WordPress site. This plugin allows you to create random content entries using a custom post type in WordPress.


Create random content entries using the plugin. Each entry can include text, images, links, etc.


Use the plugin's shortcode or widget to display the random content on your Wix site. You can add the shortcode [random_content] to any post or page in Wix, or use the widget to display the content in a sidebar.


Remember to replace 'YourCollectionName' or 'group_id' with the actual names of your database collection or group.


These are some options you can explore to display random content from a database on your Wix website. Choose the one that best fits your requirements and technical expertise. Please note that implementing these solutions may require coding skills or assistance from a developer.




401 views

Related Posts

See All

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page