Here we can learn to display a YouTube video related to the product in whose PDP page we are currently present.
define(‘JobinAndJismiITServices.ProductVideo.ProductVideos.View’, [
‘jobinandjismiitservices_productvideo_productvideos.tpl’, ‘ProductVideoIframe’, ‘Utils’, ‘Backbone’, ‘jQuery’, ‘underscore’
], function (
jobinandjismiitservices_productvideo_productvideos_tpl, ProductVideoIframe, Utils, Backbone, jQuery, _
) {
‘use strict’;
return Backbone.View.extend({
template: jobinandjismiitservices_productvideo_productvideos_tpl,
initialize: function (options) {
this.item = options.itemInfo.item;
console.log(‘this.item’, this.item);
this.application = options.container;
var self = this;
var matrixChildvideo = [];
this.videoObj = [];
this.videos = this.item.custitem_jj_ptc_62_productvideo.split(‘,’).filter(Boolean);
try {
if (this.item.matrixchilditems_detail) {
matrixChildvideo = _.map(this.item.matrixchilditems_detail, function (child) {
return child.custitem_jj_ptc_62_productvideo.split(‘,’).filter(Boolean);
});
matrixChildvideo = _.flatten(matrixChildvideo);
}
} catch (e) {
// statements
console.log(e);
}
this.videos = _.union(this.videos, matrixChildvideo);
this.createYoutubeObj(this.videos);
this.on(‘afterViewRender’, function () {
setTimeout(function () {
jQuery(‘body’).on(‘hidden.bs.modal’, function (e) {
var $iframes = $(e.target).find(“iframe[data-isvideo=’true’]”);
$iframes.each(function (index, iframe) {
$(iframe).attr(“src”, $(iframe).attr(“src”));
});
});
_.initBxSlider(self.$(‘[video-gallery-slider]’), {
minSlides: 1,
maxSlides: 6,
slideWidth: 100,
slideMargin: 10,
nextText: ”,
prevText: ”,
controls: true
});
}, 1500);
});
},
createYoutubeObj: function (videos) {
this.videoObj = _.map(this.videos, function (video, index) {
var obj = {};
var link = ”;
var img = ”;
var params = Utils.parseUrlOptions(video);
if (params && params.v)
link = params.v;
img = ‘https://i.ytimg.com/vi/’ + link + ‘/1.jpg’;
return { link: link ? link : false, img: img, position: index };
});
},
events: {
‘click [data-action=”showModal”]’: ‘ShowModal’
},
ShowModal: function (event) {
var html = $(event.currentTarget);
var view = new ProductVideoIframe({ link: html.attr(‘data-video-link’) });
this.application.getLayout().showInModal(view);
},
getContext: function getContext() {
return {
showVideo: this.videos.length ? true : false,
videoObj: this.videoObj
};
}
});
});