Magento 2: Videos not working in Product gallery
-
15-04-2021 - |
質問
Video at product gallery inside product detail page is not working, However, it is working from admin panel but on product view it is showing only video thumbnail.
Video is not playing while clicking on video thumbnail.
Can any one give suggestion?
Thanks
解決
Fotorama, when checking for video data, is looking for the field "video" but Magento is providing "videoUrl".
Fotorama does the check in checkForVideo() [fotorama.js - fotorama/fotorama]
Please note the line that reads the following:
var video = findVideoId(dataFrame.video, true); When I edited the cached file to put in some console logs, it showed that dataFrame did NOT contain the field "videoUrl".
Issues can be found in these files:
/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js
in function: _createVideoData
My Temporary Fix In This File:
tmpVideoData.videoUrl = tmpInputData.videoUrl; tmpVideoData.video = tmpInputData.videoUrl; //My Fix /vendor/magento/module-configurable-product/Block/Plugin/Product/Media/Gallery.php
in function: getProductGallery
My Temporary Fix In This File:
private function getProductGallery($product)
{
$result = [];
$images = $product->getMediaGalleryImages();
foreach ($images as $image) {
$result[] = [
'mediaType' => $image->getMediaType(),
'videoUrl' => $image->getVideoUrl(),
'video' => $image->getVideoUrl(), //This is new
'isBase' => $product->getImage() == $image->getFile(),
];
}
return $result;
}
/vendor/magento/module-configurable-product/Block/Product/View/Type/Configurable.php
in function: getOptionImages
My Temporary Fix In This File:
protected function getOptionImages()
{
$images = [];
foreach ($this->getAllowProducts() as $product) {
$productImages = $this->helper->getGalleryImages($product) ?: [];
foreach ($productImages as $image) {
$images[$product->getId()][] =
[
'thumb' => $image->getData('small_image_url'),
'img' => $image->getData('medium_image_url'),
'full' => $image->getData('large_image_url'),
'caption' => $image->getLabel(),
'position' => $image->getPosition(),
'isMain' => $image->getFile() == $product->getImage(),
'type' => str_replace('external-', '', $image->getMediaType()),
'videoUrl' => $image->getVideoUrl(),
'video' => $image->getVideoUrl(), //This is new
];
}
}
return $images;
}
/vendor/magento/module-catalog/Block/Product/View/Gallery.php
in function: getGalleryImagesJson
My Temporary Fix In This File:
public function getGalleryImagesJson()
{
$imagesItems = [];
foreach ($this->getGalleryImages() as $image) {
$imagesItems[] = [
'thumb' => $image->getData('small_image_url'),
'img' => $image->getData('medium_image_url'),
'full' => $image->getData('large_image_url'),
'caption' => $image->getLabel(),
'position' => $image->getPosition(),
'isMain' => $this->isMainImage($image),
'type' => str_replace('external-', '', $image->getMediaType()),
'videoUrl' => $image->getVideoUrl(),
'video' => $image->getVideoUrl(), //This is new
];
}
if (empty($imagesItems)) {
$imagesItems[] = [
'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
'caption' => '',
'position' => '0',
'isMain' => true,
'type' => 'image',
'videoUrl' => null,
'video' => null, //This is new
];
}
return json_encode($imagesItems);
}