时间戳

首页 > 解决方案 > 在 Fotorama - Magento 2 产品页面添加自定义视频

javascript - 在 Fotorama - Magento 2 产品页面添加自定义视频

问题描述

我正在尝试将自定义视频添加到产品页面上的 Fotorama 滑块，我已在此路径上的服务器存储中上传该视频：pub/media/videos.

我已经尝试过这段代码，但没有像我预期的那样工作......

<script type="text/javascript">
    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                }
            });
            fotorama.push({
                thumb: 'pub/media/videos/product/video1.mp4',
                'src': 'pub/media/videos/product/video1.mp4',
                type: 'iframe',
                caption: '<set your caption>'
            });
        });
    });
</script>

标签： javascriptphpmagento2fotorama

解决方案

通过 JavaScript 添加

let video = {
    thumbnail: thumbnail,
    url: url
};
$.when(getGallery()).then(function (result) {
    result.fotorama.data.push({
        videoUrl: video.url,
        src: video.url,
        img: video.thumbnail,
        isMain: false,
        thumb: video.thumbnail,
        type: 'video'
    });
}, function (error) {
        console.log(error);
});
getGallery: function () {
    let dfd = $.Deferred();
    let timer = setInterval(function () {
        let gallery = $('[data-gallery-role=gallery-placeholder]').data('gallery');
        if (typeof gallery != 'undefined') {
            clearInterval(timer);
            dfd.resolve(gallery);
        }
    }, 500);
    return dfd.promise();
}

使用 PHP 通过模块添加

文件 app/code/My/Module/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\View\Gallery">
        <plugin name="insertProductVideo" type="My\Module\Plugin\Gallery\Gallery" sortOrder="5"/>
    </type>
</config>

文件 app/code/My/Module/Plugin/Gallery/Gallery.php

<?php
namespace My\Module\Plugin\Gallery;
class Gallery
{
    public function afterGetGalleryImagesJson(ImageGallery $subject, $result)
    {
$product = $subject->getProduct();
if ($product->getVideoPath()) {
        $imagesSettings = \Zend_Json::decode($result);
        $imagesSettings[] = [
                'caption' => '',
        'position' => count($imagesSettings) -1,
        'isMain' => false,
        'type' => 'video',
        'videoUrl' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'src' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'img' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        'thumb' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        ];
        $result = \Zend_Json::encode($imagesSettings);
        }
return $result;
    }
}

推荐阅读