I want a button that when clicked updates a product’s photo gallery to show the images and videos of a different product.
What I have so far works with creating a new gallery of images, but any videos lack the following features:
- Automatically playing when you click them
- The correct URL structure for Vimeo videos
- The correct embed size on YouTube (the video does not match the placeholder)
These features seem to be added by Magento’s Product-Video module, specifically the fotorama-add-video-events.js functions. They don’t seem to be part of core Fotorama.
The format I am sending data is as follows:
{
"thumb": "https://...",
"img": "https://...",
"full": "https://...",
"caption": "Caption text",
"position": "4",
"isMain": false,
"type": "video",
"videoUrl": "https://www.youtube.com/watch?v=2PuFyjAs7JA",
"mediaType": "external-video",
"videoProvider": "youtube",
"videoId": "2PuFyjAs7JA",
"video": "https://www.youtube.com/watch?v=2PuFyjAs7JA"
}
And the code that runs to create a gallery is as follows
var $gallery = jQuery('[data-gallery-role="gallery-placeholder"]');
var galleryDataAttr = jQuery(this).attr('data-gallery-json');
var galleryApi = $gallery.data('gallery');
if (!galleryDataAttr) return;
var galleryData;
try {
galleryData = JSON.parse(galleryDataAttr);
} catch(e) {
console.error('Invalid gallery JSON', e);
return;
}
if (!Array.isArray(galleryData) || galleryData.length === 0) return;
galleryApi.updateData(galleryData);
Any idea how you get this gallery to load with Magento’s video functionality in place?