Wix Studio: Creating Dynamic Content Sections with List-Driven Navigation

Understanding Dynamic Content in Wix Studio

A user in the Wix Studio community forum recently inquired about replicating a specific page function, as seen in the "Explore Dashboard Chico Santos" example. The user aimed to create a page with two vertical sections: a list in the left column and dynamic content in the right column that updates based on list selections. This article provides a detailed explanation and actionable steps to achieve this functionality in Wix Studio.

The Challenge: Linking List Items to Dynamic Content

The core challenge lies in establishing a connection between the list items in the left column and the corresponding content displayed in the right column. The forum user questioned whether the list needed to be a menu and how to best manage the content updates in the right section. The solution involves a combination of Wix Studio's layout tools, data binding, and potentially some custom code.

Solution: Implementing List-Driven Dynamic Content

Here's a breakdown of how to implement dynamic content updates based on list selections in Wix Studio:

1. Setting up the Page Structure

Start by creating a new page in the Wix Studio Editor. Divide the page into two vertical sections using Wix Studio's layout tools (e.g., using a Grid or Stack). The left section will house the list, and the right section will display the dynamic content.

2. Creating the List

There are several ways to create the list. A Repeater connected to a dataset is the most flexible approach. Here's how:

1. Create a Dataset: In the Wix Studio Editor, add a new dataset connected to a collection in your Wix database (or a Google Sheet, if your data resides there). This collection should have fields for the list item text (e.g., "Title") and the corresponding content for the right section (e.g., "Content").
2. Add a Repeater: Drag and drop a Repeater element into the left section.
3. Connect the Repeater to the Dataset: Connect the Repeater to the dataset you created. Inside the Repeater, add a Text element to display the list item title. Bind the Text element's text property to the "Title" field in your dataset.

3. Implementing Dynamic Content Display

The right section needs to display content that changes based on the selected list item. Here's how:

1. Add a Container: In the right section, add a Container element. This container will hold the dynamic content.
2. Add Content Elements: Inside the Container, add the elements that will display the dynamic content (e.g., Text elements, Images, Rich Text editors).
3. Connect Content to Dataset: Initially, hide all the elements within the container. We will show them later using code when the specific list item is selected. Add code to the page that listens for clicks on the repeater items. When a repeater item is clicked, get the corresponding data from the dataset (using `wixData.get()`). Then, populate the elements within the container with the data from the dataset. For example, if you have a Text element in the container that should display the "Content" field from the dataset, you would update its text property with the value from the dataset.

4. Adding the Interaction Code

This step involves writing the code that handles the list item clicks and updates the content in the right section. Here's a basic example using Wix Velo:

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#repeater1").onItemReady(($item, itemData, index) => {
    $item("#listItemText").text = itemData.title;

    $item("#listItemText").onClick(() => {
      // Get the data for the selected item
      wixData.get("YourCollectionName", itemData._id)
        .then( (results) => {
          if(results) {
            // Update the content in the right section
            $w("#dynamicContentText").text = results.content;
            // Show all elements in the container
            $w("#container1").children.forEach(child => child.show());
          } else {
            console.log("Item not found");
          }
        } )
        .catch( (err) => {
          let errorMsg = err.message;
          let code = err.code;
        } );
    });
  });
});

Important: Replace "YourCollectionName", #repeater1, #listItemText, #dynamicContentText and #container1 with the actual IDs of your collection and elements in the Wix Studio Editor.

5. Considerations and Enhancements

• Performance: For large datasets, consider implementing pagination or infinite scrolling in the list to improve performance.
• SEO: Ensure that the dynamic content is properly indexed by search engines. You may need to use Wix SEO tools or custom code to manage this.
• Accessibility: Make sure the solution is accessible to users with disabilities. Use appropriate ARIA attributes and keyboard navigation.
• Error Handling: Add error handling to the code to gracefully handle cases where data is not found or there are other issues.

Conclusion

By following these steps, you can create dynamic content sections in Wix Studio that update based on list selections. This approach is ideal for building interactive dashboards, single-page applications, and other dynamic web experiences. The solution involves a combination of Wix Studio's layout tools, data binding, and custom code using Wix Velo.