Seeding Multi-Line Address to display in a Form from currentMember data

Ask the community
, , , ,
1

I am having problems getting the currentUser address into the Multi-line Address form. I’m working in Wix Editor in Dev Mode and pulling the data from the Wix Member CMS

I see the data coming into my Popup form on the back end but I can’t seem to get the multi-line address to fill from the members.contactDetails.addresses.

import { lightbox } from 'wix-window'

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

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

$w.onReady(function () {

    $w('#VideoPurchaseForm').setFieldValues({
        email_f1d0: member.loginEmail,           //Working
        first_name_c60f: member.contactDetails.firstName,  // Working
        last_name_ae59: member.contactDetails.lastName,    // Working
        multi_line_address_6074: member.contactDetails.addresses,// Not Wkg

        long_answer_08ac: videoData.videoTitle,  //Working
        video_date: videoData.videoDate          //Working
    });
})

The fields for the loginEmail, videoTitle, videoDate, firstName, and lastName all work. How do I set the Multi-line address part of the form using the data from the contactDetails.addresses?

Thanks for any help @DeanAyalon @noahlovell or anyone else!

2

Generally, always helps looking in details at the returned object in the API documentation

Also, always good to log the data you are not sure of setting

console.log(member.contactDetails.addresses)

// logged object type:
{
    _id: string
    addressLine2: string
    city: string
    country: string // ISO-3166 alpha-2 format
    postalCode: string
    subdivision: {
        // EITHER
        addressLine: string
        // OR
        streetAddress: {
            name: string
            address: string
        }
    }
}

So depends on what info you wanna display, get through the proper accessors :slight_smile:

3

Hi Again Dean,

I’ve gotten to where the data is inside the Purchase Popup but I’m not getting it into that crazy multi-line Address field.

import { lightbox } from 'wix-window'
import wixUsers from 'wix-users'
import wixData from 'wix-data';
import { currentMember } from 'wix-members'

const { videoData, member } = lightbox.getContext();
//const memberAddress = formatAddress(member.contactDetails.addresses);

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

$w.onReady(function () {
    
            console.log("Member Address Info should be coming below");
            formatAddress(member.contactDetails.addresses);
            let memberAddress = formatAddress(member.contactDetails.addresses);
            console.log("Member Address formatted ", memberAddress);

            $w('#VideoPurchaseForm').setFieldValues({
                email_f1d0: member.loginEmail,
                first_name_c60f: member.contactDetails.firstName,
                last_name_ae59: member.contactDetails.lastName,
                long_answer_08ac: videoData.videoTitle,
                multi_line_address_6074: memberAddress, //formatAddress(member.contactDetails.addresses), // Not working
                video_date: videoData.videoDate,
            });
        });

function formatAddress(addresses) {
    console.log("inside formatAddress function", member.contactDetails.addresses.country);
    return `${addresses.country},   
    ${addresses.addressLine},
    ${addresses.city},
    ${addresses.postalCode}`;
}

I get returns from various places but, inside the function formatAddress(addresses), I’m seeing theat I am inside the function but items like addresses.country are coming back ‘undefined’ - along with all the others. However, when I look inside the contactDetails within the Purchase Popup from the console.log (“Lightbox content is:”, videoData, member) command, I see the address information inside the member.contactDetails.addresses array.

I’m getting confused because the code in the formatAddress function should be properly providing the data - the form has the country, addressLine, city, and postalCode, in that order.

Do you see anything that would cause this not to work?

Thanks for looking it over!

4

Since member is present in the full scope of the lightbox, it is redundant to pass some of its data into formatAddress, instead just access it as you have in the console.log line

Unfortunately I have not worked with multi-line address fields before, and cannot find the API reference for using them

5

I sometimes find it helpful to approach things from the opposite angle when I get stuck. Instead of “how do I get the member address into the multi-line address field”, think “What format does the multi-line address field need”. It makes comparing the differences a little easier :slight_smile:

A quick bit of code like this:

$w.onReady(function () {
	$w("#form").onFieldValueChange((event) => {
		console.log(event)
	})
});

Shows us that the form needs the multi-line address in this format:

{
    "country": "GB",
    "addressLine": "King's Cross",
    "addressLine2": null,
    "city": "London",
    "subdivision": "ENG",
    "postalCode": "N1 9AL"
}

It might just mean you’ll need to map the member address to the multi-line field format. Currently you’re returning a string from your formatAddress function when it should be an object

Hope this helps point you in the right direction :raising_hands:

1 Like
6

Hi Dean & Noah,

Thanks for the help! I kind-of understand what you are saying but I don’t understand how to make the Velo code syntax understand - lol.

Dean - yes, that formatAddress in the Archive Videos - Level 2, serves no purpose. I left it there because it wasn’t doing anything for now but I had formed it so it was a good start at what I needed in the Popup.

Noah - I love the last line that "you’re returning a string from your formatAddress function when it should be an object”. Honestly, I just don’t know how to turn the array into an object. Probably basic but I’m missing something between the () and {} and $w and …

function formatAddress(addresses) {
    console.log("inside formatAddress function", member.contactDetails.addresses);
    return addresses.country,   
    addresses.addressLine,
    addresses.addressLine2,
    addresses.city,
    addresses.subdivision,
    addresses.postalCode;
}

I get this in the console.log from within the formatAddress function - an array at first

inside formatAddress function 
Array [ {…} ]
0: Object { id: "44f90326-9a9e-433c-bd5b-39463e78d435", addressLine: "1-23 Main St", city: "Queens", … }
addressLine: "1-23 Main St"
city: "Queens"
country: "US"
id: "44f90326-9a9e-433c-bd5b-39463e78d435"
postalCode: "10001"
subdivision: "US-NY"
<prototype>: Object { … 
length: 
<prototype>: Array []

the Popup code is down to this:

import { lightbox } from 'wix-window'

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

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

$w.onReady(function () {
    
            const memberAddress = formatAddress(member.contactDetails.addresses);
            console.log("Member Address Info should: ", memberAddress);
            
            $w('#VideoPurchaseForm').setFieldValues({
                email_f1d0: member.loginEmail,
                first_name_c60f: member.contactDetails.firstName,
                last_name_ae59: member.contactDetails.lastName,
                long_answer_08ac: videoData.videoTitle,
                multi_line_address_6074: memberAddress,
                video_date: videoData.videoDate,
            });
        });

function formatAddress(addresses) {
console.log("inside formatAddress function",member.contactDetails.addresses);
    return addresses.country,   
    addresses.addressLine,
    addresses.addressLine2,
    addresses.city,
    addresses.subdivision,
    addresses.postalCode;
}

I’ve tried to use the const but to get the array in the memberAddress but the console.log for “Member Address Info should:” says undefined - while within the formatAddress it’s an array.

Additional attempts at constructing the setFieldValues line for the multi_line_address_6074 that didn’t work (below).

multi_line_address_6074: formatAddress(memberAddress),
multi_line_address_6074: formatAddress(member.contactDetails.addresses),
multi_line_address_6074: member.contactDetails.addresses,
multi_line_address_6074: member.contactDetails.addresses(),

// After setting this:  
const memberAddress = formatAddress(member.contactDetails.addresses);

multi_line_address_6074: memberAddress,
multi_line_address_6074: memberAddress(),

// the formatAddress function is below

function formatAddress(addresses) {
console.log("inside formatAddress function",member.contactDetails.addresses);
    return [addresses.country,
        addresses.addressLine,
        addresses.city,
        addresses.postalCode
    ]}

I am also seeing that the console.log for memberAddress is returning a 4-variable array but with undefined values :frowning: I think the return in the formatAddress function isn’t doing anything to help. Following the formatAddress, memberAddress is below.

Member Address Info should:  
Array(4) [ undefined, undefined, undefined, undefined ]
0: undefined
1: undefined
2: undefined
3: undefined
length: 4

I know I’m probably missing some basic command or syntax to change an array into an object that will magically pop into the multi_line_address_6074 but I’m not seeing it.

Thank you both for the great help! I’m so much further along and am really starting to understand this Velo code :slight_smile:

7

So, some JS syntax:

return operation, operation2, value;
// Technically, this asks JS to evaluate the operations before returning the value
// but no one would or should use this anyway, it's complex and confusing

const array = [ value1, value2, value3, ... ],
    obj = { property1: { ... }, property2: 'string', etc: 123, ... }
     // which, by the way, you had an example of in your console output

But as Noah said, since the multi-line address field seems to accept exactly the same data as provided in the addresses property, so there’s no need to do any over-complications, just pass that to the field

import { lightbox } from 'wix-window'

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

$w('#VideoPurchaseForm').setFieldValues({
    videoData,
    email_f1d0: member.loginEmail,
    first_name_c60f: member.contactDetails.firstName,
    last_name_ae59: member.contactDetails.lastName,
    long_answer_08ac: videoData.videoTitle,
    multi_line_address_6074: member.contactDetails.addresses
})

This just might be all the code you need in your lightbox

8

Hi @DeanAyalon and @noahlovell ,

Here is a list of what I have tried - with no luck.

        long_answer_08ac: videoData.videoTitle,
        multi_line_address_6074: member.contactDetails.addresses,
        //        multi_line_address_6074: member.contactDetails.addresses,
        //        multi_line_address_6074: member.contactDetails.addresses,
        //        multi_line_address_6074: [member.contactDetails.addresses],
        //        multi_line_address_6074: (member.contactDetails.addresses),
        //        multi_line_address_6074: (member.contactDetails.addresses),
        //        multi_line_address_6074: memberAddress,
        //        multi_line_address_6074: memberAddress(), //nope
        //        multi_line_address_6074: member.contactDetails.addresses(), //nope
        video_date: videoData.videoDate,
    });

None of these work and, luckily, one of the Wix Experts wrote me back when I pushed for an example. I think I have a handle on it but I need time to put it together. The code has very complicated syntax but was shown to work in his email. I highly suggested that Wix put an example in the setFieldValues of using it with the Multi-Line Address in the current forms. If I had an example, it would have been of great help!

I’ll write more once I get a chance to incorporate the code into my Purchase Popup lightbox and get it working - fingers crossed!

9

Hope it works out smooth
Would you please attach the code you’ve been recommended?

10

Hi @DeanAyalon and @noahlovell ,

I haven’t had time to integrate this into the Purchase Popup but here is what I received (much thanks) and some caveats.

I understand that you would like your form to automatically prefill the address that the member enters in their account. With the code below for your popup, your form can successfully pull the member’s email, first name, last name, and address — as long as the address is stored in the CRM Contact.

However, it’s important to note the following:

  • When a member enters an address inside their My Addresses widget in the Members Area, this data is not saved to the CRM Contact, and cannot be accessed through Velo.

  • This is expected behavior: the My Addresses widget stores data in the internal checkout profile, not in CRM, and this behavior cannot be changed.

If you would like the addresses entered on the site to be stored in CRM instead, this would require your own custom address form and saving the data through Velo.

mport { currentMember } from 'wix-members-frontend';
$w.onReady(async function () {
 
//Notes: 1) The member data is passed from the Archive Video-Level 2 page 
//       2) A user would not get to that page without a login and
//          subscription (in my case)

  const member = await currentMember.getMember();
  if (!member) {
    console.log("No logged-in member – form prefill skipped. Log in as a member and reload.");
    return;
  }
  console.log("Member object:", member);

//  Below is where I am seeing the syntax I needed
 
  const addresses = member.contactDetails?.addresses || [];
  console.log("Raw member addresses:", JSON.stringify(addresses, null, 2));
 
  let addr = null;
  if (addresses.length > 0) {
   
    addr = addresses[0].address || addresses[0];
  }
 
  const multiLineAddressValue = addr && {
   
    country:      addr.country      ?? "",
    addressLine:  addr.addressLine  ?? "",
    addressLine2: addr.addressLine2 ?? "",
    city:         addr.city         ?? "",
    postalCode:   addr.postalCode   ?? "",
    subdivision:  addr.subdivision  ?? ""
  };

// Loading the form in the Purchase Popup page, VideoPurchaseForm
 
  $w('#VideoPurchaseForm').setFieldValues({
   
    email_f1d0:        member.loginEmail,
    first_name_c60f:   member.contactDetails.firstName,
    last_name_ae59:    member.contactDetails.lastName,
    long_answer_08ac:  "",
    ...(multiLineAddressValue && { multi_line_address_6074: multiLineAddressValue }),
    video_date:        null,
  });
});

I have just incorporated this code into the page and it worked perfectly!

Pay attention to the const multiLineAddressValue syntax and the syntax in the setFieldValues for it, with the …(multiLineAddressValue &&… it all matters and causes the code to work!

The Multi-line Address used in the form contains: Country, Address Line 1, City, and Postal Code (4 fields). The email & name are from the member.loginEmail and member.contactDetails.firstName, etc. in single fields for each.

2 Likes