Hey fam!
I am using Memberstack + Webflow + Snipcart for my project
I want to send the member details such as first-name, last-name , email and other form-field values as metadata to Snipcart.
I want to have these values as the values of key of metadata
In this format
data-item-metadata='{"key": "value"}'
where value will be, say email from Memberstack field
I tried using Mmeberstack function, getting retrieving them as mention in this article
<button class="buy-button data-item-metadata='{"memberEmail": "value"}' Buy </button>
I tried to inject members from MemberStack by using this formula
document.querySelector('.buy-button').dataset.itemMetadata["memberEmail"] = MemberStack.onReady.then(function(member) { return member.email });
But it doesn’t make any effect to the value and nothing is being passed from MemberStack.
Am I missing anything here? Any insights on this is very much appreciated🙏
Hey Mohammed
Would you be willing to share your URL so we can take a look?
Oh yeah, for sure.
This is the URL of my events page built in Webflow + MemberStack.
After a quick glance it looks like your custom javascript code is wrong. Working on trying to fix it now.
1 Like
It returns the Webflow Collection ID of member.
This would be your code.
<input type="hidden" data-ms-member="secret" />
I believe the code should be something like this:
<script>
let button = document.querySelector(".snipcart-add-item");
MemberStack.onReady.then(function(member) {
let memberSecret = member["secret"];
let memberID = member["id"];
document.querySelector('button[data-item-custom2-name]').dataset.itemCustom2Name = memberSecret;
button.dataset.itemMetadata["memberid"] = memberSecret;
});
</script>
1 Like
<script>
let button = document.querySelector(".snipcart-add-item");
MemberStack.onReady.then(function(member) {
if (member.loggedIn) {
let memberSecret = member["secret"];
let memberID = member["id"];
document.querySelector('button[data-item-custom2-name]').dataset.itemCustom2Name = memberSecret;
button.dataset.itemMetadata["memberid"] = memberSecret;
}
});
</script>
1 Like
Thanks @Josh-Lopez I am trying it now and looks like metadata is not getting filled by the id value.
When I console logged, I see the promisevalue is undefined.
Any idea?
However there is an alternate way to pass metadata using Javascript API mentioned in the Snipcart api
await Snipcart.api.cart.update({
email: 'john.doe@example.com',
metadata: {
customMetadataKey: 'value'
},
billingAddress:{
name: 'John Doe'
}
});
and then call using UpdateCartPayload .
Just linking them here in case if that would be better way to pass MemberStack data
so something like this?
<script>
MemberStack.onReady.then(function(member) {
if (member.loggedIn) {
let memberSecret = member["secret"];
let memberEmail = member["email"];
let memberID = member["id"];
let firstName = member["first-name"];
let lastName = member["last-name"];
await Snipcart.api.cart.update({
email: memberEmail,
metadata: {
customMetadataKey: memberSecret,
},
billingAddress:{
name: firstName + " " + lastName,
}
});
}
});
</script>
I havent used snipcart so I’m not sure all the ins and outs about it.
1 Like
Thanks so much @Josh-Lopez . I will try this code and might check with the Snipcart team for further debugging if any. Thanks again
1 Like