I need to show/hide elements based on the users’ badge ownership. Unfortunately, the badge feature stops on page/post level. How can I realize the following?
If user has silver > then hide elementA and show elementB.
If user has gold or platinum badge > then hide elementA and show elementC.
Hello. Have you tried passing the current member ID to listMemberBadges then applying your conditional logic based on what badge id’s are returned?
Hey Amanda. This is what I thought would do the trick. But I failed miserable doing so. There are some posts in this forum which are trying to achieve the same. But after reading these posts I’m completely confused now, And non of the examples is working.
@kuklick No problem. I don’t have a running example right now but am happy to work through the code with you. Do you have enough to paste your attempt and we can go from there? I’ll also see if I can quickly set up a snippet that might be more useful than what you have found
@kuklick I had a few minutes so I made a little example. It works as expected.
In the backend file you need a function to check for the badge ids.
import { badges } from 'wix-members-backend';
export function getMemberBadges(memberID) {
return badges.listMemberBadges([memberID])
.then((memberBadges) => {
return memberBadges;
})
.catch((error) => {
console.error(error);
});
}
Then in your front end, you will get your current member and pass it to your badge checking function. Depending on what it returns you can decide what to show/hide in the UI
import { currentMember } from 'wix-members';
import { getMemberBadges } from 'backend/getBadges'
const options = {
fieldsets: [ 'FULL' ]
}
$w.onReady(function () {
currentMember.getMember(options)
.then((member) => {
getMemberBadges(member._id).then((badges) =>{
if(badges[0].badgeIds.includes('2007b7ea-0e8e-41f7-8d58-57cc8e1dbc70')){
showCherry();
}else {
noCherry()
}
console.log(badges)
})
console.log(member._id);
return member._id;
})
.catch((error) => {
console.error(error);
});
});
function showCherry(){
$w('#cherry').show()
}
function noCherry(){
$w('#noCherry').show()
}
I’m sure this isn’t the only way to go about it, but hopefully this will help illustrate how to use the badges API
It says:
Failed to process file ‘public/pages/nt3s6.js’. Access to backend script ‘backend/getBadges.js’ denied! Client-side scripts can only import web-modules (.jsw) from backend code context.
@kuklick Yes, the backend file must be a .jsw if you want the code to be able to be exposed to the front end. Change getBadges.js to getBadges.jsw
For more information about web modules, here is an article
@amandam Error: Ambassador client request failed: HTTP STATUS: -1 RESPONSE: “Load failed” See the httpStatus and response fields for more information.
TypeError: undefined is not an object (evaluating ‘member._id’)
@kuklick I would start by dumping your member object to the console and see what’s going on. So right after this line: . then (( member ) => {
you can console.log(member) → publish → go to the front end and login and see what returns
So if you are successfully getting your memberID and badge ID back, where in the code is throwing your errors? Where does it think you are using member._id as an object?
I just checked my test site again and I am receiving no console errors using the code I shared above, so I’m not 100% sure what is different about your setup but you can look to see if there is more error information and address each part individually.
Then if following the errors doesn’t work I would break down the code and debug one step at a time. Comment out the code to get the badges and make sure your current member call isn’t getting any errors
Then in the backend, debug the file there by manually placing a member ID and running in the backend to see if that returns as expected
@amandam Maybe I said it wrong. The browser console shows me badgeIds and memberId. The EditorX Velo console shows me nothing but the error.
Where does it think you are using member._id as an object?
Line 144
//////// Hide/Show based on badges
const options = {
fieldsets: [ 'FULL' ]
}
$w.onReady(function () {
currentMember.getMember(options)
.then((member) => {
144 > getMemberBadges(member._id).then((badges) =>{
// console.log(member)
if(badges[0].badgeIds.includes('cc23f640-4b88-41d2-a27b-548a11388416')){
showCherry();
}else {
noCherry()
}
console.log(badges)
})
console.log(member._id);
return member._id;
})
.catch((error) => {
console.error(error);
});
});
function showCherry(){
$w('#LikeButtonOn').show()
$w('#LikeButtonOff').hide()
}
function noCherry(){
$w('#LikeButtonOff').show()
$w('#LikeButtonOn').hide()
}
@kuklick Ah, I see so above that line console.log(member)
Then inspect the member object in your console and see what you need to point to that will retrieve your id. For me, it was _id which I would expect to be the same for you, but perhaps it isn’t. Once you know, you can change member._id to member.whateverItWants
Here is what I see in the console as an example:
member._id is also fine on my side.
@amandam Maybe we looking on the wrong part?
Status code: 400, message: {“message”:“Unexpected value for field member_ids”,“details”:{}}
@kuklick It’s expecting a value for the function to run. You can hardcode it in to test before you run
put a member ID from your site in the listMemberBadges function
Then you should see this output on run
@amandam It all seems ok and you say your code is running on your end. But it’s not running on my end. I don’t think more texting back and forth will fix my problem. Anyway, thanks for your time.
@amandam I tried your code on clean setup and it fails with the same errors. Given the fact that it runs on your side, there must be an issue in my environment. So I wrote a ticket.
@kuklick Please report back what the issue was once you know. I tested the code snippet I shared on my personal computer/account and my work machine and was able to get it running so I’m perplexed as well
@amandam I have no idea when I hear back, unfortunately you don’t get a ticket number when writing a ticket. So strange.
