Show/hide elements (in this case an image) based on member badge

Ask the community
, , ,
1

Question
Is it possible hide/show elements, in my case an image, based on member badge?

Product:
Wix Editor

What are you trying to achieve:
If logged member has “Sagittario” badge hide #img1. I need it for make the “classic” lock image on a content that disappear just if you have specific badge.

I’ve tried everything, I’ve been changing and replacing names, functions, APIs and variables for days; I’ve searched on Google, asked on the fb group, asked the AI, there’s nothing to do, that image that I put on my page to do this test doesn’t disappear. The log is always the same and it says that the collection doesn’t exist! Sorry but I’m really a beginner and self-taught in coding!

What have you already tried:

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

$w.onReady(function () {
// Check if the user is logged in
if (wixUsers.currentUser.loggedIn) {
const userId = wixUsers.currentUser.id; // Get the user ID

    // Query the Badges collection
    wixData.query("Badges")
        .eq("userId", userId) // Match the user ID
        .eq("badge", "Sagittario") // Check for the "Sagittario" badge
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                // User has the badge, hide the image
                $w("#img1").hide();
                console.log("Badge found. Image hidden.");
            } else {
                // User doesn't have the badge, show the image
                $w("#img1").show();
                console.log("No badge found. Image shown.");
            }
        })
        .catch((error) => {
            console.error("Error querying the Badges collection:", error);
        });
} else {
    // User is not logged in, show the image
    $w("#img1").show();
    console.log("User not logged in. Image shown.");
}

});

Additional information:
I find all this very strange because I have this other similar code on my site that always refers to the same collection and it works well… even if it always gives me the error that the collection doesn’t exist

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

$w.onReady(function () {
const user = wixUsers.currentUser;

if (user.loggedIn) {
    const userId = user.id;

    wixData.query('Badges')
        .eq('userId', userId)
        .eq('badge', 'Sagittario')
        .find()
        .then(results => {
            if (results.items.length > 0) {
                $w('#statebox8').changeState('Si');
            } else {
                $w('#statebox8').changeState('No');
            }
        })
        .catch((error) => {
            console.log('Error querying badges: ', error);
        });
} else {
    $w('#statebox8').changeState('No');
}

});

So thanks if you can help me solve this issue.

2

Have you looked into the API docs regarding member badges?

https://dev.wix.com/docs/velo/api-reference/wix-members-backend/badges/list-member-badges

3

Hi codequeen,

thanks for your suggestion, yes I looked API docs but my current level of knowledge of programming codes does not allow me to understand the meaning of these strings, so consider that for me it is almost Arabic! In the last few days I have been doing a lot of research, I am looking for information, watching tutorials also on java to understand the meaning of these commands.

What I understand from your comment is that, perhaps, I have to insert this string

import { badges } from “wix-members-backend”;

at the beginning together with the other APIs?

4 
//import { currentMember } from 'wix-members';
//import { getMemberBadges, getSagittarioBadge } from 'backend/getBadges'
//import wixData from 'wix-data'

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import { badges } from “wix-members-backend”; 

$w.onReady(function () {
    const user = wixUsers.currentUser;

    if (user.loggedIn) {
        const userId = user.id;

        wixData.query('Badges')
            .eq('userId', userId)
            .eq('badge', 'Sagittario')
            .find()
            .then(results => {
                if (results.items.length > 0) {
                    $w('#statebox8').changeState('Si');
                } else {
                    $w('#statebox8').changeState('No');
                }
            })
            .catch((error) => {
                console.log('Error querying badges: ', error);
            });
    } else {
        $w('#statebox8').changeState('No');
    }
});


$w.onReady(function () {
// Check if the user is logged in
if (wixUsers.currentUser.loggedIn) {
const userId = wixUsers.currentUser.id; // Get the user ID

    // Query the Badges collection
    wixData.query("Badges")
        .eq("userId", userId) // Match the user ID
        .eq("badge", "Sagittario") // Check for the "Sagittario" badge
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                // User has the badge, hide the image
                $w("#img1").hide();
                console.log("Badge found. Image hidden.");
            } else {
                // User doesn't have the badge, show the image
                $w("#img1").show();
                console.log("No badge found. Image shown.");
            }
        })
        .catch((error) => {
            console.error("Error querying the Badges collection:", error);
        });
} else {
    // User is not logged in, show the image
    $w("#img1").show();
    console.log("User not logged in. Image shown.");
}
});

So…tried to add

import { badges } from “wix-members-backend”;

but obviously doesn’ t work! The first function (for state box) works well; I don’ t understand why the second one not!

Can someone help me solve this issue?

5

You need to create a backend function that can be called from the frontend to get the badges. Try using ChatGPT for the code and mention Wix Velo. It works amazingly well. Don’t forget the permissions - as shown in the code example.

6

Hi Kleh,

thanks for your suggestion. Asking the AI was one of the first things I did and the result is the code you see, modified several times; I did many tests, they also helped me but it still doesn’t work. If I need to create a backend function (which I don’t know how to do!) how do you explain that the previous code, that changes the state of the state box, works well without a backend function? The badge collection is the same (the default one of wix member), the principle is the same; this function, as an inexperienced user, seems like a stupid thing to me, I’m not trying to write code to send a missile on mars!

I believe that Wix is ​​a really good company and with their softwares you can do many things but, after paying a subscription I realize that there are big holes to do more basic things! I see that they spend a lot of resources on things like animations and “woOow” effects but that, often, remain an end in themselves.

I have already requested to implement conditions applied to elements, without codes, such as images, texts, menu items, forms and so on… I hope they will take it into consideration.

Finally, can someone in this developer forum paste me a working code, please?