Question:
Trying to create an object field in my collection. The objects will have a colors as the key and link to value of the image files. The idea is when users select a button, it’ll change a gallery to show the product with those colored images.
What is the syntax to make the object field in the collection valid?
I’ve tried something like this:
{
"red": [
"https://example.com/red-tshirt-front.jpg",
"https://example.com/red-tshirt-back.jpg"
],
"blue": "https://example.com/blue-tshirt.jpg" ,
"black": [
"https://example.com/black-tshirt-front.jpg",
"https://example.com/black-tshirt-back.jpg"
]
}
But I get an error saying “The value does not match the field type Object”.
Can you share the code that isn’t working?
Here’s an example where I was able to setup a button that stores this object when it’s clicked:
import wixData from 'wix-data';
$w('#storeObject').onClick(() => {
const myObject = {
"red": [
"https://example.com/red-tshirt-front.jpg",
"https://example.com/red-tshirt-back.jpg"
],
"blue": "https://example.com/blue-tshirt.jpg",
"black": [
"https://example.com/black-tshirt-front.jpg",
"https://example.com/black-tshirt-back.jpg"
]
}
const item = {
"objectField": myObject
}
wixData.insert("myCollection", item);
})
Hi Anthony,
Is the object field in a collection write only? I’m trying to use the stored information to populate a gallery, but I can’t get the syntax right in the CMS. The error is showing up in the collection.
Here is the code I’m hoping to use with the collection if I can figure out the syntax:
// Get references to elements
const gallery = $w("#galleryElement"); // Replace with your gallery element ID
const colorButtonRed = $w("#colorButtonRed");
const colorButtonBlue = $w("#colorButtonBlue"); // Add references for other color buttons
// Assuming your color variants are listed in a specific order within the CMS collection
let selectedColor; // Variable to store the selected color
// Function to update gallery based on color
function updateGallery(color) {
selectedColor = color; // Update selectedColor for button clicks
wixData.query("Products") // Replace with your product collection name
.limit(1) // Get only the first product (assuming color order)
.then( (results) => {
if (results.items.length > 0) {
const product = results.items[0];
const imageSource = product.get("imageUrls")[color];
if (imageSource) {
// Check if it's an array (multiple images)
if (Array.isArray(imageSource)) {
gallery.items = imageSource;
} else {
gallery.items = [imageSource];
}
} else {
console.warn("No image URLs found for color:", color);
}
} else {
console.warn("No product found");
}
})
.catch( (error) => {
console.error("Error fetching product data:", error);
});
}
// Initial gallery population (default to first color)
updateGallery("RED"); // Replace with the first color variant in your collection (uppercase for clarity)
// Add click event listeners to color buttons
colorButtonRed.onClick( (event) => {
updateGallery("red");
});
colorButtonBlue.onClick( (event) => {
updateGallery("blue");
});
// Add similar click event listeners for other color button
Each product will have a few color choices, so I’m hoping to store all the different color choices in an object field for each item in the collection, then adding buttons to allow users to choose.
No it’s not. Collection permissions are set across the entire collection, details here: CMS: Collection Permissions Overview | Help Center | Wix.com
.get() is a function typically used for maps it wouldn’t exist on the product object.
Is this code generated with the AI assistant?
Yeah, some parts of the code were generated using AI. I’m unable to find the proper syntax for the collection in order to test the code. It just shows an error.
The example provided above inserts the data correctly. Can you try using that example?
Thank you anthony, you are right. It inserted into the collection perfectly and now the object field is working. I assume there was some blank space or something messing up the original object. Appreciate your help.
1 Like
