Hi,
We are using the Google Books API to fetch book information such as title, author, description, and price. All this data is successfully saved to Wix Stores using wixStoresBackend.createProduct().
We are also downloading the book cover image from Google and uploading it to Wix Media using mediaManager.upload(). This works fine, and we receive a valid image URL and mediaId.
Then, we use both
wixStoresBackend.addProductMedia()
wixStoresBackend.updateProductFields()
to attach the image to the product.
There are no errors in the code, and the image appears in the Wix Media Library, but it does not show up on the Product Page.
All other product fields (title, price, description) show correctly.
Only the image is missing on the live product page.
Example media ID format:
wix:image://v1/5dc8db_abc123xyz456~mv2.jpg/book-cover-1742455602868.jpg#originWidth=500&originHeight=750
We also made sure to set:
metadataOptions: { isPrivate: false }
Everything seems to be working, except the image is not displayed unless added manually via the Wix dashboard. Any help or guidance would be greatly appreciated.
Thanks in advance!
Adds the product (book) to the Wix Store without an image
The function starts by creating a new product using the book’s title, description, price, ISBN, and initial stock quantity. This product is added as a physical item, and inventory tracking is enabled. At this point, the product is created without an image.
Downloads the book cover image from the internet
It fetches the cover image from the URL received via the book object. If the cover image is not available, it uses a placeholder image instead. The image is downloaded using fetch() and converted into a buffer to prepare it for upload.
Uploads the image to Wix Media
The downloaded image is uploaded to Wix Media using the mediaManager.upload() method. The metadataOptions.isPrivate flag is set to false, so the image will be publicly accessible. After the upload, a URL to the image is received.
Converts the image URL into Wix Media ID format
Since Wix requires a special mediaId format to use images in the product catalog, the standard URL is transformed into the appropriate format. This includes adding the file name and image dimensions.
Adds the image to the product’s media gallery
The formatted image ID is then added to the product’s productMedia field. This makes the image appear in the product’s media gallery on the Wix admin panel.
Sets the image as the main product image
In this step, the same image ID is used to update the product’s mainMedia field, which determines the primary image shown on the product page. The productMedia list is also updated again for consistency.
Returns the success message
If all operations complete successfully, a success response is returned. Otherwise, any errors are caught and logged, and a failure message is returned.
here is the code
import wixStoresBackend from ‘wix-stores-backend’;
import { mediaManager } from ‘wix-media-backend’;
export async function addBookToStore(book) {
try {
// 1. Create product without image
let newProduct = await wixStoresBackend.createProduct({
name: book.Title,
description: book.Description,
price: Number(book.Price) || 0,
sku: book.ISBN,
stock: {
quantity: 10,
trackInventory: true
},
visible: true,
productType: “physical”
});
console.log("✅ Product created (no image):", newProduct);
// 2. Upload cover image to Wix Media
let imageUrl = book.CoverImage || "https://via.placeholder.com/150";
let response = await fetch(imageUrl);
let buffer = await response.arrayBuffer();
let fileName = `book-cover-${Date.now()}.jpg`;
let uploadResult = await mediaManager.upload("", Buffer.from(buffer), fileName, {
mediaOptions: { mimeType: "image/jpeg" },
metadataOptions: { isPrivate: false } // Make image public
});
let fileNameFromUpload = uploadResult.fileName;
let mediaId = `wix:image://v1/${fileNameFromUpload}/${fileName}#originWidth=500&originHeight=750`;
console.log("✅ Converted Media ID:", mediaId);
// 3. Add image to productMedia
let mediaResponse = await wixStoresBackend.addProductMedia(newProduct._id, [
{ mediaId: mediaId, type: "image" }
]);
if (!mediaResponse || !mediaResponse.length) {
throw new Error("Failed to add product media. Response is empty.");
}
console.log("✅ Product media added:", mediaResponse);
// 4. Update mainMedia
await wixStoresBackend.updateProductFields(newProduct._id, {
mainMedia: mediaId,
productMedia: [{ mediaId: mediaId, type: "image" }]
});
console.log("✅ Product image updated.");
return { success: true, message: "✅ Book added with image to product page!" };
} catch (error) {
console.error("❌ Error:", error);
return { success: false, message: "⚠️ Error: " + error.message };
}
}