Hello all,
I have a dynamic page, with a repeater connected to the Stores/Products collection. I want to change the displayed image when I hover the mouse on the product in the repeater to the second in the product.
I use this code to do so:
export function repProdContainer_mouseIn(event) {
// Get item from repeater
let $item = $w.at(event.context);
let prodItem = $item("#datasetStoresProducts").getCurrentItem();
// Show button with slide effect
$item('#repProdButton').show('slide', slideOptions);
// Change to second image
$item('#repProdImage').link = prodItem.mediaItems[1].src;
}
export function repProdContainer_mouseOut(event) {
// Get item from repeater
let $item = $w.at(event.context);
// Hide button with slide effect
$item('#repProdButton').hide('slide', slideOptions);
// Change back to main image
let prodItem = $item("#datasetStoresProducts").getCurrentItem();
$item('#repProdImage').link = prodItem.mainMedia;
}
In both cases (mouseIn and mouseOut) I get the same error, as if the link of the image is not in the expected format, but looking to the documentation in here, I can not see why this string is in the wrong format.
Wix code SDK error: The link property that is passed to the link method cannot be set to the value "wix:image://v1/1fe34d_78427492ce054df682b5bafa03e0549f~mv2_d_1200_1500_s_2.jpg/file.jpg#originWidth=1200&originHeight=1500" as this is not a supported link type.
What am I doing wrong? I would appreciate any help on this.
Thanks!
Change this:
$item('#repProdImage').link = prodItem.mediaItems[1].src;
To this:
$item('#repProdImage').src = prodItem.mediaItems[1].src;
Hi Gaspar,
Try converting the image location to a proper url - https://www.wix.com/corvid/forum/community-discussion/string-url-for-images
Did you read the Corvid page about the Wix Stores Product Collection as shown here. https://support.wix.com/en/article/corvid-wix-stores-product-collection-fields#mediaitems-mediaitems
MainMedia (mainMedia)
Description: Displays the main media item (image or video) for this product as it appears in the Store Manager.
Type: Image
Can connect to data: Yes
Can use in dynamic page URL: No
Can be sorted: No
Can be filtered: No
Read-only: Yes
MediaItems (mediaItems)
Description: Lists all the media items available for this product in an array of JSON objects.
Type: Text
Can connect to data: No
Can use in dynamic page URL: No
Can be sorted: No Can be filtered: No
Read-only: Yes
{ type: "Image", src: "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120", title: "title", description: "whatever first line\nthe second line.", link: "https://www.whatever.com" } { type: "Video", src: "wix:video://v1/11062b_03c50f8fe4a34cc297a984e483a282ef/simpsons.mov#posterUri=96fbec_52cd5b00f7fd48e0a83bc1fb1dfb06ea.jpg &posterWidth=1920&posterHeight=1080", title: "title", description: "whatever first line\nthe second line.", link: "https://www.whatever.com", thumbnail: "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120" }
Although, if you read Wix Stores own Support pages, you will see that you can do that already through Wix Stores settings in the Wix Editor.
https://support.wix.com/en/article/setting-an-image-as-a-products-main-image-in-wix-stores
Your product images appear according to the order in which you added them:
Main image: This is the first image you add. It appears in the product gallery.
Alternate image: The second image added. It is displayed when you hover over the product in the product gallery.
Additional images: These are displayed as thumbnails on the product page. Your customers can click them to view the full image.