Question:
The high-level problem is that I want to add a “category” attribute to groups to allow them to be sortable. The low-level problem is I can’t export and run a function to update my CMS.
Product:
Editor/Velo.
What are you trying to achieve:
I am working on a website with a growing number of Wix “groups.” Some members have suggested adding a landing page where instead of being presented with all groups at once, there are various ‘categories’ of groups, and they can choose/open that category to be presented with relevant groups. An approach that seemed reasonable to me was importing existing “groups” to my CMS, adding the categories functionality there, and having users interface with the representation of that CMS somehow, with update calls being made every so often. Right now, I am stuck at the importing stage; the groups that I currently have will not be entered into my CMS.
What have you already tried:
I’ve looked through this forum, Velo resources, and enlisted the help of Claude 3.5 Sonnet. They have gotten me far, but there appears to be some function parsing error that I cannot resolve. I have tried step-by-step debugging as well, but it is not working in the traditional sense. I’m admittedly pretty new to JS and Velo, so please let me know if I’m missing something obvious. Most importantly, if my approach is flawed, please start there. That is; if there is a better feature to accomplish the task at hand (datahooks?), please let me know. I would appreciate any suggestions!
I would attach the code in a separate file, but the upload type is restricted, so here goes.
FILE 1: backend/groupOperations.web.js
// File: backend/groupOperations.web.jsimport { groups } from ‘wix-groups.v2’;
import wixData from ‘wix-data’;export function runSync() {
console.log(“runSync function called”);
return syncGroupsToCMS()
.then(result => {
console.log(“Sync result:”, result);
return result;
})
.catch(error => {
console.error(“Sync error:”, error);
throw error;
});
}async function syncGroupsToCMS() {
try {
const existingGroups = await fetchAllGroups();
const cmsResults = await updateCMSWithGroups(existingGroups);
return { success: true, message:Synced ${cmsResults.length} groups to CMS};
} catch (error) {
console.error(“Error in syncGroupsToCMS:”, error);
return { success: false, message: error.message };
}
}async function fetchAllGroups() {
let allGroups = ;
let hasMoreResults = true;
let skip = 0;
const limit = 50;while (hasMoreResults) { const queryResult = await groups.queryGroups() .limit(limit) .skip(skip) .find(); allGroups = allGroups.concat(queryResult.items); if (queryResult.items.length < limit) { hasMoreResults = false; } else { skip += limit; } } return allGroups;}
async function updateCMSWithGroups(groups) {
const cmsResults = ;for (const group of groups) { try { const existingItems = await wixData.query("Groups_Wrapper") .eq("groupId", group._id) .find(); const cmsItem = { title: group.name, description: group.description, groupId: group._id, privacy: group.privacy, memberCount: group.membersCount, createdDate: group.createdDate, categories: group.categories || [] }; let result; if (existingItems.items.length > 0) { result = await wixData.update("Groups_Wrapper", { ...existingItems.items[0], ...cmsItem }); } else { result = await wixData.insert("Groups_Wrapper", cmsItem); } cmsResults.push(result); } catch (error) { console.error(`Error processing group ${group._id}:`, error); } } return cmsResults;}
export async function updateGroupCategories(groupId, categories) {
try {
const existingItems = await wixData.query(“Groups_Wrapper”)
.eq(“groupId”, groupId)
.find();if (existingItems.items.length > 0) { const updatedItem = { ...existingItems.items[0], categories: categories }; await wixData.update("Groups_Wrapper", updatedItem); return { success: true, message: "Categories updated successfully" }; } else { return { success: false, message: "Group not found in CMS" }; } } catch (error) { console.error("Error updating group categories:", error); return { success: false, message: error.message }; }}
export async function getGroupsByCategory(category) {
try {
const results = await wixData.query(“Groups_Wrapper”)
.hasSome(“categories”, [category])
.find();
return results.items;
} catch (error) {
console.error(“Error fetching groups by category:”, error);
throw error;
}
}export function dummyFunction() {
//will help debug
console.log(“Dummy function called”);
return “Dummy function result”;
}
FILE 2: frontend code, currently on the home page
import { runSync, dummyFunction } from ‘backend/groupOperations.web’;
$w.onReady(function () {
console.log(“Page ready”);
console.log(“Dummy function test:”, dummyFunction());$w("#debugbutton").onClick(() => { console.log("Button clicked"); // Change button color to blue $w("#debugbutton").style.backgroundColor = "blue"; // Delay the execution slightly setTimeout(() => { console.log("Attempting to run sync..."); if (typeof runSync === 'function') { runSync() .then(result => { console.log("Sync completed:", result); $w("#debugbuttontext").text = `Sync completed: ${JSON.stringify(result)}`; // Change button color back to original $w("#debugbutton").style.backgroundColor = ""; }) .catch(error => { console.error("Sync failed:", error); $w("#debugbuttontext").text = `Sync failed: ${error.message}`; // Change button color to red to indicate error $w("#debugbutton").style.backgroundColor = "red"; }); } else { console.error("runSync is not a function:", runSync); $w("#debugbuttontext").text = `Error: runSync is not a function`; // Change button color to yellow to indicate warning $w("#debugbutton").style.backgroundColor = "yellow"; } }, 100); });});
END OF CODE
Additional information:
The exact error that I am getting is:
TypeError: (0 , backend_groupOperations_web_jsWEBPACK_IMPORTED_MODULE_0.dummyFunction) is not a function
and the same one for runSync. There are no frontend changes even occurring, but I do get a message in the console when I click the button that I have designated. I’ve created the CMS itself with the appropriate categories, set up my API key, etc.