Want to know how you can set up your Wix dynamic page using a database and display the new rich content field type on your website? Find out how to use Velo code and Wix Database connections to transfer data from the backend to the frontend with a few lines of code. Then stay tuned for in-depth knowledge about this trick and the code behind it.
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:
00:00 CN Intro
00:53 Setup of Website
01:44 Add Dynamic Dataset Connections to Page & Rich Content Element
04:24 Dynamic Page Dataset Settings Explained
06:07 Wix Rich Content Element Settings
08:50 Rich Content Style Editor Explained
14:03 Version Control/Create Duplication for Templates of Rich Content
15:10 Dynamic Dataset OnReady Function & Filtering Dynamic Dataset Element
19:02 Page Loader Code / Display dates based on UpdatedDate or CreatedDate field keys
20:45 Preview Website & Perform Dynamic Dataset Filtering
22:11 Make changes to the dynamic page URL, SEO, & more
25:56 Outro
Code Snippet to follow along with the video:
Page Code
This loads the page code. This code will be an event handler that will share data to the Rich Content Element. Connect a dataset to the rich content element and load the data by the filter. Filtering a data set will change the information on the page.
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
import wixData from 'wix-data';
$w.onReady(function () {
$w("#dynamicDataset").onReady(async () => {
pageLoader();
$w("#ppbutton").onClick(async (events) => {
$w("#dynamicDataset").setFilter(wixData.filter().contains("legalType", "PP").eq("isActive", true)).then(() => {
pageLoader();
});
})
$w("#tcbutton").onClick(async (events) => {
$w("#dynamicDataset").setFilter(wixData.filter().contains("legalType", "TC").eq("isActive", true)).then(() => {
pageLoader();
});
})
})
});
function buttonSwitch(legalType) {
if (legalType == "PP") {
$w("#ppbutton").disable();
$w("#tcbutton").enable();
} else if (legalType == "TC") {
$w("#tcbutton").disable();
$w("#ppbutton").enable();
}
}
async function pageLoader() {
let item = await $w("#dynamicDataset").getCurrentItem(),
updatedDate = new Date(item._updatedDate),
createdDate = new Date(item._createdDate);
buttonSwitch(item.legalType);
$w("#date").text = "Last Updated: ";
if (updatedDate === createdDate) {
$w("#date").text = $w("#date").text + " " + createdDate.toLocaleDateString('en-US', { 'month': 'long', 'year': 'numeric' });
} else {
$w("#date").text = $w("#date").text + " " + updatedDate.toLocaleDateString('en-US', { 'month': 'long', 'year': 'numeric' });
}
$w("#content").expand();
$w("#date").show();
}
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
📺 MY PLAYLISTS :
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 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!
