Capturing Repeater and Logged-in Member Data and Loading into PopUp Form

Ask the community
, , , , ,
1

I’m working on a website where we pull videos from a CMS into a Repeater (displaying 10 at a time). When the user clicks a button (to purchase) in the Container, a lightbox (popup) opens with a form and I need to seed it with the Video Title & Date and also the User Login / Customer information to help with the purchase.

The code on the page with the repeater / container is

import wixWindow from 'wix-window';
import * as wixData from '@wix/data';

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData, index) => {
        $w('#button97').onClick(() => {
            collectVideoData
            wixWindow.openLightbox("Purchase Popup", { videoTitle: videoTitle });
        });
    });
});

async function collectVideoData() {
    let videoTitle = $w('#Section2RepeaterItem1Longtext1').text;
    let videoDate = $w('#Section2RepeaterItem1Title1').text;
    let videoId = $w('#videoPlayer1').id;
    let videoDescription = $w('#collapsibleText1').text
}

I’m not sure if I’m actually collecting the video data OR am passing it to the popup. I put the videoTitle into the openLightbox command but that doesn’t seem to work.

The Popup - triggered by pressing #button97 has the following code

import { currentMember } from 'wix-members-frontend';
import * as wixSiteWindow from '@wix/site-window';
import * as wixSiteMembers from '@wix/site-members';

$w.onReady(function () {
    autopopulateMemberDetails();
    loadVideoData();
});

async function autopopulateMemberDetails() {
    const member = await currentMember.getMember();
    $w('#VideoPurchaseForm').setFieldValues;
    let email_fld0 = 'currentMember.email'
    let first_name_c60f = 'currentMember.MemberFirstName';
    let last_name_ae59 = 'currentMember.MemberLastName';
}

async function loadVideoData() {
    const receivedData = wixSiteWindow.lightbox.getContext()
    let long_answer_08a = receivedData;
}

The popup contains a Wix Form that has fields for users to answer that I’m trying to pre-fill (email_fld0, first_name_c60f, last_name_ae59, and long_answer_08a). I’ve tried to keep the code as clean as possible but I know I’m messing something up with the $w, let, const, etc. Once a user has filled in the form properly, then I need to put that data into a shopping cart for purchase (could use any advice on that as well).

Any and all help would be greatly appreciated! Thank you!

1 Like
2

You are trying to use two different libraries for interacting with the window, and I’m not sure if they work together - have you tried logging receivedData to see what you’re getting there?

Here’s how context is passed if you use Velo’s wix-window:
First, the page code is good, just one minor touch-up

wixWindow.openLightbox('Purchase Popup', { videoTitle })
// in js, you can just place a variable as property, and the key will be the variable name
// { x } is the same as { x: x }

Now as for the lightbox code itself:

import wixWindow from 'wix-window'

let ctx = wixWindow.lightbox.getContext()
// ctx = { videoTitle: videoTitle }

also, loadVideodata does not need to be async, at least not with the code shown in it

As for autopopulateMemberDetails, only the first line really makes sense here, the rest are all broken,
setFieldValues is a function, yet you’re not calling it, simply stating its existence, that line does nothing.
The lines after it all set values in memory but nothing else after that, certainly not setting any field values; furthermore, they are not set to the data they’re supposed to have, remove the quotation marks, you’re setting email_fld0 and the rest of the variables to the literal string ‘currentMember.email’, etc.

You may be thinking about something like this:

async function autopopulateMemberDetails() {
    const member = await currentMember.getMember()
    $w('#VideoPurchaseForm'),setFieldValues({
        email_fld0: currentMember.email,
        first_name_c60f: currentMember.MemberFirstName,
        ...
    })
}
1 Like
3

Hi Dean,

Thank you so much for your help - I really appreciate it. Unfortunately, I’m still getting a blank form :frowning: and have noticed some changes in Wix that seem to have recently happened. wixWindow isn’t there but seems to have been replaced by wixWindowFrontend.

Here’s the Archive Videos dynamic page code now.

import wixWindowFrontend from ‘wix-window-frontend’;

$w.onReady(function () {
$w(“#Section2Repeater1”).onItemReady(($item, itemData, index) => {
$w(‘#button97’).onClick(() => {
let videoTitle = $w(‘#Section2RepeaterItem1Longtext1’).text;
let videoDate = $w(‘#Section2RepeaterItem1Title1’).text;
let videoId = $w(‘#videoPlayer1’).id;
let videoDescription = $w(‘#collapsibleText1’).text;
wixWindowFrontend.openLightbox(“Purchase Popup”, { videoTitle, videoDate, videoId, videoDescription });
});
});
});

As for the PopUp, I’ve tried cleaning that up a bit too, per your suggestions.

import { currentMember } from ‘wix-members-frontend’;
import wixWindowFrontend from ‘wix-window-frontend’

$w.onReady(function () {
autopopulateMemberDetails();
loadVideoData();
});

async function autopopulateMemberDetails() {
const member = await currentMember.getMember();
$w(‘#VideoPurchaseForm’).setFieldValues({
email_fld0: currentMember.email,
first_name_c60f: currentMember.memberFirstName,
last_name_ae59: currentMember.memberLastName,
});
};

function loadVideoData() {
const videoTitle = wixWindowFrontend.lightbox.getContext();
$w(‘#VideoPurchaseForm’).setFieldValues({
long_answer_08a: videoTitle,
});
};

I still have blank fields in the form, even though I am using the setFieldValues for the form.

This is my first venture into Velo and I’m figuring it out from videos from Wix, etal., so I know there are probably syntax issues that I’m fighting as well. It may also be that Wix doesn’t like me working across 2 sets of data - the CMS data going into the dynamic page and the Wix CMS data from the logon screen.

Again, Thank you for all your help! Any further suggestions would be greatly appreciated!

1 Like
4

wix-window-frontend is the package that gets imported if you call to import wix-window from the frontend, so the extra word is never really necessary.

As for wixWindow vs wixWindowFrontend, the naming is up to you, you could say import ww from 'wix-window' if you so wanted.

format code on the forum like so:
```js

// js code here

```

that would help see your indentations

As for the code itself:

  • Since #Section2RepeaterItem1Longtext1 and title (perhaps a simpler tag would also be a little better, like #videoTitle?) are populated by the repeater item’s data, and you already have that data as an argument within your onItemReady function callback, it would probably be better to access the data directly from there
let videoTitle = data.title // or whatever the field key is

On the other hand, it might be simplest to just pass itemData to the lightbox in its entirety, and let it take what it needs from it:

wixWindow.openLightbox('Purchase Popup', itemData)
  • Another suggestion that may improve the lightbox loading times - if you fetch the member data on the page calling the lightbox and pass it as part of the lightbox context, the lightbox itself would not need to fetch the member data every time it opens, so your site will only load it once per visit to the page
import { currentMember } from 'wix-members'
import wixWindow from 'wix-window'

$w.onReady(async () => {
    const member = await wixMember.getMember()
    $w('#Section2Repeater').onItemReady(($item, data) => 
        wixWindow.openLightbox('Purchase Popup', { data, member }))
}

No unnecessary logic in the lightbox, it just receives and displays context data.

As for the actual error you’re experiencing with the fields remaining blank - let’s eliminate possible causes

  • does the lightbox get the data correctly?
import { lightbox } from 'wix-window'
console.log(lightbox.getContext())

if the code I wrote above is the one running, then this log line should display { data: { ... }, member: { ... } }

5

The naming convention of Velo modules changed to include -frontend if they were frontend only a little while ago. e.g. 'wix-window-frontend'. 'wix-window' should continue to work however.

All that said, I’d encourage using the SDK where possible, since we started a gradual transition from using Velo APIs to using SDK a few months back. Velo should continue to work in the meantime - but something to keep in mind based on project requirements and ongoing support

6

wix-window exports two optional packages, front and back, you can specify one, or just let it import the correct one automatically, that’s why i don’t both complicating the code further

If you’re on the frontend, obviously you’ll be using wixwindowfrontend, naming a variable with it would be redundant seeing as you’ll never hav ixwindowbackend to compliment it on the same code file

About the SDK, I agree, maybe I should have given the examples using @wix/site-window as they have used it in the second code snippet.
However I have had so many errors with the SDK, it never worked well for me; maybe it is better now, but I have not touched Wix sites for a few months so I wouldn’t know.
I preferred using a library I’m familiar with, though I know it stands to be deprecated

7

Hello Dean and Noah,

Thanks to both of you for weighing in on the wix-window vs. wix-window-frontend.

I tried to eliminate as much as I could to get rid of the “noise” code that may be confusing the issue. I simplified the Archive Videos - Level2 page to

```js

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData, index) => {

        //        const member = currentMember.getMember();

        $w('#button97').onClick(() => {
            let videoTitle = $w('#Section2RepeaterItem1Longtext1').text;
            let videoDate = $w('#Section2RepeaterItem1Title1').text;
            let videoId = $w('#videoPlayer1').id;
            let videoDescription = $w('#collapsibleText1').text;

            console.log(videoId, videoTitle, videoDate, videoDescription);

 //  wixWindowFrontend.openLightbox("Purchase Popup", { currentMember, videoTitle, videoDate, videoId, videoDescription });
        });
    });
});

```

As you’ll notice, I’ve commented out the command to open the lightbox near the end. The odd part is that the lightbox still opens.

I remember when I built the lightbox that I linked it to the button using the Wix Editor before I started to work on seeding the data using the Velo code. Could it be that Wix is not reading the Velo code because it already “thinks” it knows what to do with the button click and is ignoring it completely?

Furthermore, I’m not getting the console.log that resembles what was in the container I clicked ‘button97’, but I am getting some interesting videoplayer info from an unknown source.

It looks like the below and I know it’s wrong because the date is wrong - I clicked the button in the 2010.12.25 video.

“videoPlayer1 UMON TV-ийн нэвтрvvлэг (ЛA-Cоёлын өдрүүд, Монгол Судлалын бага хурал-1) 2011.05.27 Монголд NTV Телевизийн цэнхэр дэлгэцээр 2 долоо хоног бvрийн…”

I’m going to work on this some more and see if I can get it to work but it’s really confusing.

Thank you both for all your help so far and explaining the wix-window issue!

8

Update:

I tried removing the link to the lightbox from the button on the Wix Editor and the lightbox doesn’t open. After further testing, I needed to put that link back on the button in the Wix Editor.

Also, I needed to eliminate looking for currentMember information in the Archive Videos - Level 2 page because it causes the system to fail to open the lightbox.

the Archive Videos - Level2 page now reads

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData, index) => {

//        const member = currentMember.getMember();

        $w('#button97').onClick(() => {
            let videoTitle = $w('#Section2RepeaterItem1Longtext1').text;
            let videoDate = $w('#Section2RepeaterItem1Title1').text;
            let videoId = $w('#videoPlayer1').id;
            let videoDescription = $w('#collapsibleText1').text;

            console.log(videoId, videoTitle, videoDate, videoDescription);
            wixWindow.openLightbox("Purchase Popup", { videoTitle, videoDate, videoId, videoDescription });

        });
    });
});

```

Now that the lightbox opens again (failed to open when I removed it from the button in the Wix Editor), and I think I am also getting the information that is passed using the wixWindow.openLightbox(“Purchase Popup”, {…} command - the data is not from the specific Repeater/Container so it’s wrong, but what was passed.

Object { currentMember: {…}, videoTitle: "UMON TV-ийн нэвтрvvлэг (ЛA-Cоёлын өдрүүд, Монгол Судлалын бага хурал-1)", videoDate: "2011.05.27", videoId: "videoPlayer1", videoDescription: 'Монголд NTV Телевизийн цэнхэр дэлгэцээр

The “Purchase Popup” code now looks like:

import { currentMember } from 'wix-members-frontend';
import wixWindow from 'wix-window'

$w.onReady(function () {
    autopopulateMemberDetails();
    loadVideoData();
    console.log(currentMember)
});

async function autopopulateMemberDetails() {
    const currentMember = await currentMember.getMember()
    $w('#VideoPurchaseForm').setFieldValues({
        email_fld0: currentMember.email,
        first_name_c60f: currentMember.memberFirstName,
        last_name_ae59: currentMember.memberLastName,
    });
};

function loadVideoData() {
    const videoTitle = wixWindow.lightbox.getContext();
    $w('#VideoPurchaseForm').setFieldValues({
        long_answer_08a: videoTitle,
    });
    console.log(videoTitle);
};

As for the currentMember data, it looks like the lightbox is trying to get the data but there seems to be some lock on it.

Object { getMember: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
makeProfilePublic: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
makeProfilePrivate: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
getRoles: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}' }

I also found out that trying to load the member data in the Archive Videos page was just a non-starter so I went back to loading in the lightbox.

In the log, I’m getting

Running the code for the Purchase Popup page. To debug this code in your browser's dev tools, open yb7sg.js

and I have no idea where yb7sg.js is.

If you have any ideas, I’d love to hear them. I know the button in the repeater/container is always the same number - maybe that’s it.

Thanks again for all your help!

9

Jim Update:

Sorry, just realized what you were asking…

I used console.log (‘Lightbox content is:’, lightbox.getContent()) and received

Lightbox content is: undefined.

Update:

I tried removing the link to the lightbox from the button on the Wix Editor and the lightbox doesn’t open. After further testing, I needed to put that link back on the button in the Wix Editor.

Also, I needed to eliminate looking for currentMember information in the Archive Videos - Level 2 page because it causes the system to fail to open the lightbox.

the Archive Videos - Level2 page now reads

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData, index) => {

//        const member = currentMember.getMember();

        $w('#button97').onClick(() => {
            let videoTitle = $w('#Section2RepeaterItem1Longtext1').text;
            let videoDate = $w('#Section2RepeaterItem1Title1').text;
            let videoId = $w('#videoPlayer1').id;
            let videoDescription = $w('#collapsibleText1').text;

            console.log(videoId, videoTitle, videoDate, videoDescription);
            wixWindow.openLightbox("Purchase Popup", { videoTitle, videoDate, videoId, videoDescription });

        });
    });
});

```

Now that the lightbox opens again (failed to open when I removed it from the button in the Wix Editor), and I think I am also getting the information that is passed using the wixWindow.openLightbox(“Purchase Popup”, {…} command - the data is not from the specific Repeater/Container so it’s wrong, but what was passed.

Object { currentMember: {…}, videoTitle: "UMON TV-ийн нэвтрvvлэг (ЛA-Cоёлын өдрүүд, Монгол Судлалын бага хурал-1)", videoDate: "2011.05.27", videoId: "videoPlayer1", videoDescription: 'Монголд NTV Телевизийн цэнхэр дэлгэцээр

The “Purchase Popup” code now looks like:

import { currentMember } from 'wix-members-frontend';
import wixWindow from 'wix-window'

$w.onReady(function () {
    autopopulateMemberDetails();
    loadVideoData();
    console.log(currentMember)
});

async function autopopulateMemberDetails() {
    const currentMember = await currentMember.getMember()
    $w('#VideoPurchaseForm').setFieldValues({
        email_fld0: currentMember.email,
        first_name_c60f: currentMember.memberFirstName,
        last_name_ae59: currentMember.memberLastName,
    });
};

function loadVideoData() {
    const videoTitle = wixWindow.lightbox.getContext();
    $w('#VideoPurchaseForm').setFieldValues({
        long_answer_08a: videoTitle,
    });
    console.log(videoTitle);
};

As for the currentMember data, it looks like the lightbox is trying to get the data but there seems to be some lock on it.

Object { getMember: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
makeProfilePublic: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
makeProfilePrivate: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', 
getRoles: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}' }

I also found out that trying to load the member data in the Archive Videos page was just a non-starter so I went back to loading in the lightbox.

In the log, I’m getting

Running the code for the Purchase Popup page. To debug this code in your browser's dev tools, open yb7sg.js

and I have no idea where yb7sg.js is.

If you have any ideas, I’d love to hear them. I know the button in the repeater/container is always the same number - maybe that’s it.

Thanks again for all your help!

10

Sorry, just realized what you were asking…

I used console.log (‘Lightbox content is:’, lightbox.getContent()) and received

Lightbox content is: undefined.

12

The reason for that is exactly the problem you discovered, fixed, and then reintroduced - the button is linked to the lightbox

When the button is linked to the lightbox, Wix natively calls the lightbox, regardless of the page code, without a context - as you have seen when commenting out the openLightbox function call

You do need to remove anything linked to the button, since you are setting its functionality in code, and don’t want the collissions you were experiencing

And again i want to mention - You are setting your values using the element texts, you should probably use the data itself

$w('#Section2`repeater').onItemReady(($item, itemData) => {
    $item('#button97').onClick(() => {
        // instead of 
        title: $item('#Section2RepeaterItem1Longtext1').text
        // Use the actual data connected to that text element
        title: itemData.longText // (however that field is called in the CMS)
        ...
    })
})
1 Like
13

I don’t think I understood what you were saying here , I see neither changes to the code, nor any mention of collectVideoData()

14

Good Morning All,

Thanks for the suggestions. Here is the code as it sits now, based on your suggestions.

The CMS columns for the Archive Videos are: Video Title, Video Description,

For the Archive Videos - Level 2 page

import wixWindow from 'wix-window'

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData) => {

        $item('#button97').onClick(() => {

            const videoData = {
                videoTitle: itemData.Video_Title,
                videoDate: itemData.Video_Date,
                videoDescription: itemData.Video_Description
            };

            console.log('Video Data =', videoData);

            wixWindow.openLightbox("Purchase Popup", { videoData });
        });
    });
});

For the Purchase Popup Page

import { currentMember } from 'wix-members-frontend'
import wixWindow from 'wix-window'

$w.onReady(async function () {
    const videoData = wixWindow.lightbox.getContext();
    const member = await currentMember.getMember();

    console.log("Lightbox content is:",
        videoData.videoTitle, videoData.videoDate, videoData.videoDescription);

    $w('#VideoPurchaseForm').setFieldValues({
        email_fld0: member.contactDetails.email,
        first_name_c60f: member.firstName,
        last_name_ae59: member.lastName,
        long_answer_08a: videoData.videoTitle
    });
});

I’ve finally gotten the Console Log to show the data from the Archive Page and the Popup (or the lack thereof).

From the Archive Videos - Level 2 page

Video Data = 
Object { videoTitle: undefined, videoDate: undefined, videoDescription: undefined }
​
videoDate: undefined
​
videoDescription: undefined
​
videoTitle: undefined

From the Popup Page

Lightbox content is: undefined undefined undefined

Despite the data being undefined, I feel like I’m getting closer.

In the CMS, the fields are simply titled Video Title, Video Date, and Video Description - with the spaces. In the CMS, I’m not seeing another field name - although it could end up different in the backend (IDK).

Thanks again for the help and Happy Thanksgiving!

15

I got the data passed to the Popup for the video - YEAH! It still doesn’t display but I feel like I’m getting there.

The Archive Video - Level 2 is now as below. Unfortunately, the videoId is still undefined but the rest are there and pass along.

import wixWindow from 'wix-window'

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData) => {

        $item('#button97').onClick(() => {

            const videoData = {
                videoTitle: itemData.videoTitle,
                videoDate: itemData.videoDate,
                videoId: itemData.videoId,
                videoDescription: itemData.videoDescription
            };

            console.log('Video Data =', videoData);

            wixWindow.openLightbox("Purchase Popup", { videoData });
        });
    });
});

The Popup is now.

import { currentMember } from 'wix-members-frontend'
import wixWindow from 'wix-window'

$w.onReady(async function () {
    const videoData = wixWindow.lightbox.getContext();
    const member = await currentMember.getMember();

    console.log("Lightbox content is:",         
        videoData);                      // Indicates the correct videoTitle, Date, etc., is there.

    $w('#VideoPurchaseForm').setFieldValues({
        //   email_fld0: member.contactDetails.email,
        //   first_name_c60f: member.firstName,
        //   last_name_ae59: member.lastName,
        long_answer_08a: videoData.videoTitle  //Still not working to load the form
    });
})

Thanks for the help! It’s getting there!

16

ok so it seems you’re using the wrong CMS field names

A. easy way to check is go to the CMS and try modifying one of the column definitions, the small popup that opens up should show a greyed-out disabled field for the field key, it is only set once when the field is first created, that is what should be used as itemData’s property

B. Another easy way that is also simpler on the code itself is to instead, as I have suggested before, just send the entire itemData object into the lightbox context:

wixWindow.openLightbox('Purchase Popup', itemData)

That way, when logging the context, you’ll see exactly what field keys there are

Now, I’ll reiterate something I have suggested before, since I am not sure if you have missed it or just decided not to take the recommendation.
I believe it would be more performant if instead of fetching the member data within the lightbox, the page code would fetch it, and pass it along as part of the context. That way, you won’t have to contact the server asking for member details every time the lightbox opens

page:

import { currentMember } from 'wix-members' 
// Same deal, frontend not needed to be specified
import wixWindow from 'wix-window'

$w.onready(async () {
    const member = await currentMember.getMemberData()
    //   A meaningful object tag would make the code cleaner and more readable
    //   Like, #videosRepeater ?
    $w('#Section2Repeater1').onItemReady(($item, itemData) =>
        $item('#button97').onClick(() => // #openVideo ?
            wixWindow.openLightbox('Purchase Popup', { member, itemData }))

and lightbox:

import { lightbox } from 'wix-window' 
// import lightbox only, since that's the only part of wix-window we'll be using

const context = lightbox.getContext()
console.log('context', context)
// Should show as { member: { ... }, itemData: { ... } }
$w('#VideoPurchaseForm').setFieldValues({ ... })
1 Like
18

@aliatoparia Woah, this code needs some editing, it both reintroduces problems that we have already addressed, and it fetches member data from the server multiple times, which.. just… why?

19

@DeanAyalon I actually moved the code for getting the member data from the member CMS into the Archive Videos page and then decided to take it out until I got the video data captured and sent to the Purchase Popup correctly. It seemed like any error was causing the data to not be sent so, I limited it to 1 set - the video data - for now.

Now that I do know the video data is getting to the Popup, I’m going to reintroduce the currentMember data and see if I can get that to go over too! I hope that make sense.

Thanks again for all your help! I hope you had a wonderful Thanksgiving!

1 Like
20

Hello Dean,

Here is the state of the pages: Archive Videos - Level 2

import wixWindow from 'wix-window'
import { currentMember } from 'wix-members'

currentMember
    .getMember()
    .then((member) => {
        const id = member._id;
        const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
        const eMail = `${member.contactDetails.emails}`;
        return member;
    })
    .catch((error) => {
        console.error(error);
    });

$w.onReady(function () {
    $w("#Section2Repeater1").onItemReady(($item, itemData) => {

        $item('#button97').onClick(() => {

            const videoData = {
                videoTitle: itemData.videoTitle,
                videoDate: itemData.videoDate,
                videoId: itemData.videoId,
                videoDescription: itemData.videoDescription
            };

            console.log('Video Data =', videoData, 'Member Data = ', currentMember);

            wixWindow.openLightbox("Purchase Popup", { videoData });
        });
    });
});

Purchase Popup

import wixWindow from 'wix-window'

$w.onReady(async function () {
    const videoData = wixWindow.lightbox.getContext();
    const member = wixWindow.lightbox.getContext ();

    console.log("Lightbox content is:",
        videoData); // Indicates the correct videoTitle, Date, etc., is there.

    $w("#VideoPurchaseForm").setFieldValues({
        email_fld0: videoData.loginEmail,
        first_name_c60f: videoData.firstName,
        last_name_ae59: videoData.lastName,
        long_answer_08ac: videoData.videoTitle, //Still not working to load the form
    });
})

From the Archive Video console, I’m seeing:

Video Data = 
Object { videoTitle: "UMON TV- ИЙН  МЭДЭЭЛЛИЙН ХӨТӨЛБӨР-1", videoDate: "2010-12-25", videoId: undefined, videoDescription: 'Энэ удаагийн Мэдээллийн хөтөлбөрт: \nВашингтон ДС-д болсон  "Монгол евентс" шинэ жилийн баяр, \n"Аяны шувууд" тоглолт эхний хэсэг, \nДуучин Э.Саран Хvvхдийн дуурьт дууллаа, \nМорин хуурч Уртнасан Онлайн сургалтaa эхэллээ зэрэг мэдээлэл орж байна. ' }
 Member Data =  
Object { getMember: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', makeProfilePublic: 'function(){!function(){if(m()){var t=u?Date.now()-Math.round(u):null,r="site"===d?i.active$wSiteViewMode({isPopup:s,isServerSide:c,pageId:l,pageNumber:f,pageUrl:p,tsn:t}):i.active$wPreviewMode({pageNumber:f,pageUrl:p,tsn:t,pageId:l});e.bi(r),v=!0}}();for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return t.apply(this,n)}', ...

The Video Data is definitely getting to the Popup but there is no Member data and none of the data is displaying in the Popup Fields.

Lightbox content is: 
Object { videoData: {…} }
​
videoData: Object { videoTitle: "UMON TV- ИЙН  МЭДЭЭЛЛИЙН ХӨТӨЛБӨР-1", videoDate: "2010-12-25", videoDescription: 'Энэ удаагийн Мэдээллийн хөтөлбөрт: \nВашингтон ДС-д болсон  "Монгол евентс" шинэ жилийн баяр, \n"Аяны шувууд" тоглолт эхний хэсэг, \nДуучин Э.Саран Хvvхдийн дуурьт дууллаа, \nМорин хуурч Уртнасан Онлайн сургалтaa эхэллээ зэрэг мэдээлэл орж байна. ', … }
​
<prototype>: Object { … }
​__defineGetter__: function __defineGetter__()
​​__defineSetter__: function __defineSetter__()
​​__lookupGetter__: function __lookupGetter__()
​​__lookupSetter__: function __lookupSetter__()
​​__proto__: 
​​constructor: function Object()
​​hasOwnProperty: function hasOwnProperty()
​​isPrototypeOf: function isPrototypeOf()
​​propertyIsEnumerable: function propertyIsEnumerable()
​​toLocaleString: function toLocaleString()
​​toString: function toString()
​​​length: 0
​​​name: "toString"
​​​<prototype>: function ()
​​valueOf: function valueOf()
​​​length: 0
​​​name: "valueOf"
​​​<prototype>: function ()
​​<get __proto__()>: function __proto__()
​​<set __proto__()>: function __proto__()

I’ve tried a few different ways to collect and pass the Member data from the Archive Videos page but it doesn’t seem to be collecting that data. I also don’t see why it’s not displaying any of the video data, especially in the long_answer_08ac field in the Popup.

Thanks for the help and I hope you had a wonderful Thanksgiving!

1 Like
21

Page code

You have a few problems with the member data

  1. You are fetching it after the button trigger has already been set, meaning the trigger does not yet receive the server’s data

  2. When fetching member data, you are not saving it anywhere

  3. instead of the member data, you are logging the currentMember class

  4. You are not passing the member data into the lightbox

Remove the first function call, leave only $w.onReady, like so:

import wixWindow from 'wix-window' 
// Lighter alternative: import { openLightbox } from 'wix-window'

$w.onReady(async () => {
    const member = await currentMember.getMember()
    $w('#Section2Repeater1').onitemReady(($item, data) => {
        $item('#button97').onClick(() => {
            console.log('video data', data, 'member', member)
            wixWindow.openLightbox('Purchase Popup', { data, member })
        })
    })
})

Lightbox

  1. You are setting both videoData and Member to the same value - the entire lightbox context, instead, use:
import { lightbox } from 'wix-window'

const { data, member } = lightbox.getContext()
// ... the rest should work after this fix

I have had a nice few days, no Thanksgiving over here, but I appreciate it, and hope you enjoyed yours as well :slight_smile:

22

Hello Dean,

You are amazing! I was able to simplify what I had in code and get the user data passed to the Purchase Popup (but only see it in the console log). I get the videoTitle, videoDate, and videoDescription as well as the loginEmail.

Here’s the Archive Videos - Level 2 now.

import wixWindow from 'wix-window'
import { currentMember } from 'wix-members'

$w.onReady(async () => {
    const member = await currentMember.getMember()


    $w("#Section2Repeater1").onItemReady(($item, itemData) => {

        $item('#button97').onClick(() => {

            const videoData = {
                videoTitle: itemData.videoTitle,
                videoDate: itemData.videoDate,
                videoDescription: itemData.videoDescription
            };

            console.log('Video Data =', videoData, 'Member Data = ', member);

            wixWindow.openLightbox("Purchase Popup", { videoData, member });
        });
    });
});

And the Purchase Popup

import { lightbox } from 'wix-window'

const { videoData, member } = lightbox.getContext();

console.log("Lightbox content is:", videoData, member); 

$w("#VideoPurchaseForm").setFieldValues({
    email_f1dO: member.loginEmail,
    long_answer_O8ac: videoData.videoTitle,  //Still not working to load the form
});

$w("#VideoPurchaseForm").onViewportEnter(() => {
    $w("#VideoPurchaseForm").show();
});

Despite using the $w(“VideoPurchaseForm”).setFieldValues ({ and putting the loginEmail and videoTitle into the fields (I double checked the field names in the form), AND with or without the $w(“VideoPurchaseForm”).onViewportEnter(())…. .show(), I am still not seeing any of the fields being displayed.

The good news is that I see the data in the console, coming into the Purchase Popup. It’s getting closer!

Thank you so much for all your help!

1 Like