Dynamic Product Pages in Wix Studio: Displaying Unique Tabbed Sections

Understanding Dynamic Content on Wix Studio Product Pages

The Wix Studio platform offers powerful tools for creating dynamic and engaging product pages. A common requirement for e-commerce sites is displaying unique content for each product, such as specific images, data, or graphs within a tabbed section. This article addresses the challenge of making a tabbed section visible on only one product page, drawing insights from a recent Wix Studio community forum discussion.

The Challenge: Unique Tabbed Content per Product

The original forum post highlighted the difficulty of displaying a tabbed section with product-specific information (pictures, data, graphs) on individual product pages. The goal is to avoid showing the same generic tabbed content across all product pages and instead present tailored information relevant to each product.

Solution: Leveraging Wix Velo and Dynamic Pages

The most effective approach involves utilizing Wix Velo to dynamically control the visibility and content of the tabbed section based on the specific product page being viewed. This requires connecting the tabbed section to a dataset that stores the unique information for each product.

Step-by-Step Instructions: Implementing the Solution

Here's a detailed guide on how to implement this solution:

1. Set up your Data Collection: Create a Wix Data collection (database) to store the product-specific information that you want to display in the tabbed section. Ensure that each item in the collection represents a product and includes fields for the tab content (e.g., `tab1Content`, `tab2Content`, `imageURL`, `graphData`).
2. Connect the Data Collection to your Dynamic Page: Make sure your product pages are dynamic pages connected to a product collection. This collection should contain basic product information like name, price, etc.
3. Add a Tabbed Section: Add a tabbed section element to your dynamic product page in the Wix Studio editor.
4. Write Velo Code to Populate and Control Visibility: Use Velo code to query the data collection based on the current product. Then, populate the tabbed section with the retrieved data and control its visibility.

Here's an example of the Velo code you might use:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
 let productId = wixLocation.path[wixLocation.path.length - 1]; // Assuming product ID is the last segment in the URL

 wixData.query("YourProductInformationCollection")
 .eq("_id", productId)
 .find()
 .then( (results) => {
 if(results.items.length > 0) {
 let productInfo = results.items[0];
 // Populate the tabbed section with data from the collection
 $w("#tab1Text").text = productInfo.tab1Content;
 $w("#tab2Image").src = productInfo.imageURL;
 // Make the tabbed section visible
 $w("#tabbedSection").show();
 } else {
 // If no data is found for the product, hide the tabbed section
 $w("#tabbedSection").hide();
 }
 } );
});

Explanation of the code:

• `import wixData from 'wix-data';` and `import wixLocation from 'wix-location';`: Imports the necessary modules for data querying and location access.
• `wixLocation.path`: Retrieves the current URL path. We assume the product ID is the last segment of the URL. Adjust this logic if your URL structure is different.
• `wixData.query("YourProductInformationCollection")`: Queries your data collection (replace "YourProductInformationCollection" with the actual name of your collection).
• `.eq("_id", productId)`: Filters the query to find the item with the matching product ID.
• `.find()`: Executes the query.
• `results.items[0]`: Accesses the first item in the results (assuming only one item matches the product ID).
• `$w("#tab1Text").text = productInfo.tab1Content;` and `$w("#tab2Image").src = productInfo.imageURL;`: Populates the tabbed section elements with data from the collection. Replace `#tab1Text` and `#tab2Image` with the actual IDs of the elements in your tabbed section.
• `$w("#tabbedSection").show();` and `$w("#tabbedSection").hide();`: Controls the visibility of the entire tabbed section based on whether data is found for the product. Replace `#tabbedSection` with the actual ID of your tabbed section.

Important Considerations

• Error Handling: Implement proper error handling in your Velo code to gracefully handle cases where data is not found or if there are issues with the data collection.
• URL Structure: Ensure that the product ID is correctly extracted from the URL. The provided code assumes a specific URL structure. Adjust the `wixLocation.path` logic accordingly.
• Performance: Optimize your data collection queries to ensure fast loading times, especially if you have a large number of products.
• Accessibility: Ensure that your tabbed section is accessible to users with disabilities. Use appropriate ARIA attributes and semantic HTML.

Conclusion

By combining Wix Velo with dynamic pages and data collections, you can effectively create unique and engaging product pages with customized tabbed sections. This approach allows you to present product-specific information in an organized and user-friendly manner, enhancing the overall shopping experience.