I’m having trouble with
my script, it s not working, and i do not understand WHY?
Working in
Wix Studio Edito
What I’m trying to do
first check and get member pricing plan. show and expand #normSection if plan = ‘standard’, show and expand #logoSection if plan = ‘logo’, show and expand #premSection if plan = ‘premium’,
What I’ve tried so far
page code =
import { currentMember } from ‘@wix/members’;
import { orders } from ‘@wix/pricing-plans’;
$w.onReady(async function () {
// Hide and collapse all sections by default
$w(‘#normSection’).collapse();
$w(‘#normSection’).hide();
$w(‘#logoSection’).collapse();
$w(‘#logoSection’).hide();
$w(‘#premSection’).collapse();
$w(‘#premSection’).hide();
// Get the current member's ID
let member;
try {
member = await currentMember.getMember();
} catch (e) {
// Not logged in or error
return;
}
if (!member || !member._id) {
// Not logged in
return;
}
// Get all active orders for the member
let memberOrders;
try {
memberOrders = await orders.listMemberOrders({
memberId: member._id,
status: 'ACTIVE'
});
} catch (e) {
// Error fetching orders
return;
}
if (!memberOrders || !Array.isArray(memberOrders.orders) || memberOrders.orders.length === 0) {
// No active orders
return;
}
// Find the first active plan with a matching name
let matchedPlan = null;
for (let order of memberOrders.orders) {
if (!order.planName) continue;
const planName = order.planName.toLowerCase();
if (planName === 'standard') {
matchedPlan = 'normSection';
break;
} else if (planName === 'logo') {
matchedPlan = 'logoSection';
break;
} else if (planName === 'premium') {
matchedPlan = 'premSection';
break;
}
}
// Show and expand the corresponding section if a match is found
if (matchedPlan) {
$w(`#${matchedPlan}`).show();
$w(`#${matchedPlan}`).expand();
}
For your code to you should first take a look at the documentation and, use the exact syntax as specified in the examples.
In the code you’ve provided, you’re using the Javascript SDK:
And then you’re using a function
This function does not exist in the respective API. Which makes me assume that this is AI generated code and you have not referred to the documentation at all. And AI isn’t always right, like in this case. There is no function named as listMemberOrders(). The right syntax is memberListOrders()
If you’re not experienced in writing code, then you should first search the forum for topics where users have faced the exact same issue as you and have likely found the solution already. If you would have done that, you would have come across this working solution:
Use this as a foundation to build upon, and add your own functionality on top of it as you need. And remember to format your code correctly using the </> while pasting it here on the forum so that it is much more readable. Also, check if your code has red lines, hover over it and it will tell you what’s wrong. And if you’re using AI, use the Wix AI Code Assistant instead of third party tools since it is less likely to make such errors when generating code.
Hello, thank you very much for the quick response. Unfortunately, I’m not very experienced with Velo, and I had this script generated by an the Wix Code AI Assistent — but I don’t really understand it.
What I’m trying to do is show and hide sections on a page based on either a pricing plan or a member role. For this, I created three roles: Logo, Standard, and Premium. If it’s easier to implement via pricing plans instead, the alternative would be the same three pricing plans: Logo, Standard, and Premium.
I originally thought this would be fairly straightforward, but it doesn’t seem to be.
Do you have an idea how to approach this? Could you help me?
I think I managed to get it working — based on the idea you linked in your reply. Here’s the code I’m using now; it works on my side.
import { authentication, currentMember } from ‘wix-members-frontend’;
import { orders } from ‘wix-pricing-plans-frontend’;
$w.onReady(async () => {
// Check if the member is logged in
console.log(“Checking member’s login status…”);
const isLoggedIn = authentication.loggedIn;
if (isLoggedIn) {
const loggedInMember = await currentMember.getMember();
console.log("Member is logged in: " + loggedInMember.loginEmail + ". Fetching subscription status...");
// Get the subscription status and plan name
const planDetails = await getPlanDetails();
if (planDetails.status === "ACTIVE") {
if (planDetails.name === "logo") {
$w('#logoSection').show();
$w('#logoSection').expand();
} else {
$w('#logoSection').hide();
$w('#logoSection').collapse();
}
if (planDetails.name === "premium") {
$w('#premSection').show();
$w('#premSection').expand();
} else {
$w('#premSection').hide();
$w('#premSection').collapse();
}
} else {
// Hide both sections if no active plan
$w('#logoSection').hide();
$w('#logoSection').collapse();
$w('#premSection').hide();
$w('#premSection').collapse();
$w('#noAbo').show();
$w('#noAbo').expand();
}
} else {
// Handle when the member is not logged in
console.log("Member is not logged in. Cannot fetch subscriptions if not logged in.");
$w('#logoSection').hide();
$w('#logoSection').collapse();
$w('#premSection').hide();
$w('#premSection').collapse();
}
});
// Function to get the subscription status and plan name
async function getPlanDetails() {
try {
const ordersList = await orders.listCurrentMemberOrders();
console.log(“Fetched orders:”, ordersList);
if (ordersList.length === 0) {
console.log("No pricing plans ordered.");
return { status: "NA", name: null };
}
for (const order of ordersList) {
if (order.status === "ACTIVE") {
console.log("User has an ACTIVE plan:", order.planName);
return { status: "ACTIVE", name: order.planName };
}
}
console.log("No currently ACTIVE plans for this user.");
return { status: "NA", name: null };
} catch (error) {
console.error("Error fetching member orders:", error);
return { status: "NA", name: null };
}
}
If you notice anything that looks off or could be improved, feel free to message me.
Great job! The only thing I would want to suggest here is to either use hide() or collapse(). Using hide() will simply make your section invisible, and a blank space will appear, whereas collapse() will remove that blank space as well.
So depending on what your UI looks like, instead of using both together, use just one - either