BuddyPress.org

Hello all. This code is intended to add a border to each member’s avatars throughout the BB website (profile, members loop, heartbeats, widgets, etc.) based on profile type, using different colors. It’s not working. Help!!!

document.addEventListener(‘DOMContentLoaded’, function() {
// Get all member links with classes starting with “avatar user” because all avatars images are in a class which starts with those words
let memberLinks = document.querySelectorAll(‘a[class^=”avatar user”]’);

// Loop through each member link
memberLinks.forEach((link) => {
// Get the member ID from the link’s href attribute
let memberId = link.getAttribute(‘href’).match(/\/members\/(.+)\//)[1];

// Get the member’s profile type from the BuddyBoss API
fetch(wp-json/buddyboss/v1/members/${memberId})
.then(response => response.json())
.then(data => {
let profileType = data.xprofile_data.find(x => x.field_name === ‘Categoria’).value;

// Add a border to the member’s avatar based on their profile type
if (profileType === ‘admin’) {
link.querySelector(‘img’).style.border = ‘3px solid black’;
} else if (profileType === ‘RedTeam’) {
link.querySelector(‘img’).style.border = ‘2px solid red’;
} else if (profileType === ‘BlueTeam’) {
link.querySelector(‘img’).style.border = ‘2px solid blue’;
} else if (profileType === ‘GreenTeam’) {
link.querySelector(‘img’).style.border = ‘2px solid green’;
}
})
.catch(error => console.log(error));
});
});