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();
}

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

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

📺 MY PLAYLISTS :

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

Wix Tutorials 2022: 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!