Help needed: "Dynamic Repeater not showing session data on page"

Ask the community
, , ,
1

Product:
Wix Studio Editor

Project Description

The goal is to create a product inquiry platform where users can select items they are interested in renting and request a quote for those items. The platform consists of:

  1. Product List View:
  • Displays all available products in a list format.
  • Each product has a button to add it to a wishlist.
  1. Product Detail View:
  • Provides detailed information about a selected product.
  • Includes an option to add the product to the wishlist.
  1. Wishlist Page:
  • Displays all items added to the wishlist.
  • Allows users to adjust quantities for each product.
  • Allows users to remove items from the list.
  1. Inquiry Form on Wishlist Page:
  • Includes fields for user contact information and rental period.
  • On submitting the form, an email should be sent containing:
    • The wishlist details (product name, quantity, etc.).
    • The user’s contact information and rental dates.

Current Status

What’s Working:

  1. Adding Items to the Wishlist:
  • Products can be added to the wishlist from both the product list and detail pages.
  • Data stored in the wishlist includes:
    • Product ID
    • Product name
    • Product image
    • Default quantity (set to 1)
  1. Wishlist Data Persistence:
  • The wishlist data is saved using sessionStorage, and items are not duplicated.
  1. Basic Form Submission:
  • Form fields are in place to collect user details and rental period.
  • Form data is logged in the console when submitted.

What’s Not Working:

  1. Wishlist Display on the Wishlist Page:
  • Although the wishlist data is correctly retrieved from sessionStorage and passed to the repeater, the repeater does not display the items.
  • The onItemReady handler for the repeater is either not triggered or not functioning as expected.
  1. Email Submission:
  • The email containing the wishlist and form data is not yet implemented.
  1. Repeater Configuration:
  • It’s unclear whether the repeater and its child elements (e.g., text fields, image elements, buttons) are properly configured. This might be causing the display issue.

Challenges

  1. Repeater Not Displaying Data:
  • Even though the console logs confirm that the data is passed to the repeater, it does not render on the page.
  1. Dynamic Updates:
  • Adjusting quantities and removing items from the wishlist needs to dynamically update the display and the underlying data.
  1. Form Integration:
  • The inquiry form should merge wishlist data and user input into a single email.

Code Snippets

Adding Products to the Wishlist:

javascript

Code kopieren

import {session} from 'wix-storage';

export function addToWishlistButton_click(event) {
    const $item = $w.at(event.context);
    const currentItem = $item("#productDataset").getCurrentItem();

    if (!currentItem) {
        console.error("No product data found!");
        return;
    }

    const productId = currentItem._id;
    const productName = currentItem.name || currentItem.title;
    const productImage = currentItem.image;

    let wishlist = session.getItem("wishlist") ? JSON.parse(session.getItem("wishlist")) : [];

    if (!wishlist.find(item => item.id === productId)) {
        wishlist.push({
            id: productId,
            name: productName,
            image: productImage,
            quantity: 1
        });
        session.setItem("wishlist", JSON.stringify(wishlist));
        console.log("Product added to wishlist:", wishlist);
    } else {
        console.log("Product already in wishlist.");
    }
}

Displaying Wishlist Data on Wishlist Page:

javascript

Code kopieren

import {session} from 'wix-storage';

$w.onReady(function () {
    console.log("Wishlist Page Loaded");

    const wishlist = session.getItem("wishlist") ? JSON.parse(session.getItem("wishlist")) : [];
    console.log("Wishlist Data:", wishlist);

    if (wishlist.length === 0) {
        $w("#emptyMessage").show();
        $w("#wishlistRepeater").hide();
    } else {
        $w("#emptyMessage").hide();
        $w("#wishlistRepeater").show();

        $w("#wishlistRepeater").onItemReady(($item, itemData) => {
            $item("#wishlistProductName").text = itemData.name || "Unnamed Product";
            $item("#wishlistProductImage").src = itemData.image || "";
            $item("#wishlistQuantityInput").value = itemData.quantity.toString();

            $item("#removeFromWishlistButton").onClick(() => {
                const updatedWishlist = wishlist.filter(product => product.id !== itemData.id);
                session.setItem("wishlist", JSON.stringify(updatedWishlist));
                $w("#wishlistRepeater").data = updatedWishlist;

                if (updatedWishlist.length === 0) {
                    $w("#emptyMessage").show();
                    $w("#wishlistRepeater").hide();
                }
            });
        });

        $w("#wishlistRepeater").data = wishlist;
    }
});

Form Submission:

javascript

Code kopieren

export function submitButton_click() {
    const name = $w("#nameInput").value;
    const email = $w("#emailInput").value;
    const phone = $w("#phoneInput").value;
    const startDate = $w("#startDate").value;
    const endDate = $w("#endDate").value;
    const wishlist = session.getItem("wishlist") ? JSON.parse(session.getItem("wishlist")) : [];
    const wishlistDetails = wishlist.map(item => `Product: ${item.name}, Quantity: ${item.quantity}`).join("\n");

    console.log("Form submitted with data:", {
        name,
        email,
        phone,
        startDate,
        endDate,
        wishlistDetails
    });

    // Email sending logic would go here
}

Questions

  1. Repeater Issue:
  • Why is the repeater not displaying the data, even though it is correctly retrieved and passed?
  • Are there any specific configuration steps needed for the repeater or its child elements?
  1. Dynamic Updates:
  • How can we dynamically update the repeater when quantities are adjusted or items are removed?
  1. Email Integration:
  • What is the best approach to merge wishlist data and form inputs into a single email?

Any help or guidance would be greatly appreciated! :blush: