Show/Hide elements based on badge ownership

Ask the community
,
5

@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