How to correctly create a (foreign key) reference while building an input form wizard with lightboxes?

Ask the community
,
1

I am using lightboxes to create a wizard based on what amounts to 3 nested datasets:
Product (pg 1) > Product Rate Plan (pg 2) > Product Rate Plan Charge (pg 3).

After submitting page 1 (Product), page 2 (Rate Plan) should display the title of the Product object created on page 1 and when the user submits page 2 (Rate Plan), a relationship (using a reference field) should be created between the Rate Plan and its parent Product.

Similarly, after submitting the Rate Plan on page 2, page 3 (Rate Plan Charge) should display both the Product title and the Product Rate Plan title using data passed when the lightbox is programmatically opened. When submitted, Rate Plan and Rate Plan Charge should have a similar parent-child relationship using a reference field as the previous step.

So far, absolutely no API reference or community post has been able to help me string together the correct way to accomplish this. I have tried variables, temporary data objects, queries, insert references… all to no avail mostly because there is no good explanation of how each function should flow from beginning to end.

I’ve had programming friends weigh in with equal frustration. I have reverted my code (copied below) back to the last place where at least the titles were being passed between the pages appropriately and would love some guidance on how to connect the dots for the insert reference piece.

Please don’t reply with a link only to an API reference page… I’ve literally spent the past 2 days pouring over them and none are helpful. As this is a time sensitive project, I no longer have the time to keep going down the trial and error road.

If you’re able to help guide a time-crunched quasi-technical non-coder, blessings will be showered upon you in the form of profuse thanks from not only myself, but a grateful community.

//New Product Lightbox
import {session} from 'wix-storage';
import wixWindow from 'wix-window';
export function nextbutton_click(event) {
    $w("#myproducts").save()
    session.setItem('currentproduct', $w('#ProductName').value);
    wixWindow.openLightbox("Add Rate Plan");
        }

//Add Rate Plan Lightbox
import { session } from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(function () {
 const ProductName = session.getItem('currentproduct');
    $w('#ProductName').text = ProductName;
});

export function nextbuttonrp_click(event) {
    $w("#myrateplans").save()
    session.setItem('currentrateplan', $w('#RatePlanName').value);
    wixWindow.openLightbox("New Charge");
}

//New Charge Lightbox
import { session } from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(function () {
 const ProductName = session.getItem('currentproduct');
    $w('#ProductName').text = ProductName;
});
$w.onReady(function () {
 const RatePlanName = session.getItem('currentrateplan');
    $w('#RatePlanName').text = RatePlanName;
});

export function anotherrateplan_click(event) {
    $w("#mycharges").save()
    wixWindow.openLightbox("Add Rate Plan");
}