Pourquoi une vidéo de produit ?
La vidéo produit est un outil puissant qui met en valeur les fonctionnalités de votre produit de manière plus efficace. Ajouter des vidéos de haute qualité à votre produit engage vos clients car les yeux humains sont naturellement attirés par les lumières et les images en mouvement, ainsi les visiteurs du site web sont 73 % plus susceptibles d'acheter des produits ! Selon Google également, environ 58 % des consommateurs préfèrent la vidéo de produit en vedette pour acheter un produit. Les utilisateurs favorisent toujours la vidéo produit sur les pages de produit car cela leur demande moins d'efforts de regarder une vidéo que de lire du texte. Cela augmente finalement l'expérience utilisateur des visiteurs.
Ajouter une vidéo Vimeo à la page de produit
Magento 2 permet par défaut d'ajouter une vidéo Vimeo ou YouTube à vos produits. Cependant, lors de l'ajout d'une vidéo Vimeo depuis le panneau d'administration, il arrive parfois qu'une erreur 'Vidéo non trouvée' se produise sur Magento version 2.3.x. Ce problème survient en raison de la mise à jour de l'API Vimeo. Alors, comment ajouter une vidéo à votre produit ? Essayons de résoudre ce problème.
Suivez les méthodes ci-dessous pour résoudre le problème.
Ouvrez le fichier du répertoire Fournisseur, vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js
Allez à la ligne de code 'src = 'https://player.vimeo.com/video/' +this._code + '?api=1&player_id=vimeo' +this._code +timestamp +additionalParams;' et remplacez cette ligne par le code 'src = 'https://player.vimeo.com/video/' +this._code + '?api=2&player_id=vimeo' +this._code +timestamp +additionalParams;'
Après cela, allez à la fonction _onRequestHandler() et remplacez cette fonction par le code donné ci-dessous.
/**
* @private
*/
_onRequestHandler: function () {
var url = this.element.val(),
self = this,
videoInfo,
type,
id,
googleapisUrl;
if (this._currentVideoUrl === url) {
return;
}
this._currentVideoUrl = url;
this.element.trigger(this._REQUEST_VIDEO_INFORMATION_TRIGGER, {
url: url
});
if (!url) {
return;
}
videoInfo = this._validateURL(url);
if (!videoInfo) {
this._onRequestError($.mage.__('Invalid video url'));
return;
}
/**
*
* @param {Object} data
* @private
*/
function _onYouTubeLoaded(data) {
var tmp,
uploadedFormatted,
respData,
createErrorMessage;
/**
* Create errors message
*
* @returns {String}
*/
createErrorMessage = function () {
var error = data.error,
errors = error.errors,
i,
errLength = errors.length,
tmpError,
errReason,
errorsMessage = [];
for (i = 0; i )/ig, ''),
thumbnail: tmp['thumbnail_large'],
videoId: videoInfo.id,
videoProvider: videoInfo.type
};
this._videoInformation = respData;
this.element.trigger(this._UPDATE_VIDEO_INFORMATION_TRIGGER, respData);
this.element.trigger(this._FINISH_UPDATE_INFORMATION_TRIGGER, true);
}
type = videoInfo.type;
id = videoInfo.id;
if (type === 'youtube') {
googleapisUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' +
id +
'&part=snippet,contentDetails,statistics,status&key=' +
this.options.youtubeKey + '&alt=json&callback=?';
$.getJSON(googleapisUrl,
{
format: 'json'
},
$.proxy(_onYouTubeLoaded, self)
).fail(
function () {
self._onRequestError('Video not found');
}
);
} else if (type === 'vimeo') {
$.ajax({
url: 'https://vimeo.com/api/v2/video/' + id + '.json',
dataType: 'jsonp',
jsonpCallback:'jsonResults',
data: {
format: 'json'
},
timeout: 5000,
success: $.proxy(_onVimeoLoaded, self),
/**
* @private
*/
error: function () {
self._onRequestError($.mage.__('Video not found'));
}
});
}
}
Maintenant, exécutez simplement les commandes suivantes et vous êtes prêt à partir php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy Et maintenant, vous pouvez facilement ajouter une vidéo Vimeo à notre produit sans aucun problème. Ensuite, vous pouvez simplement enregistrer le produit et voir la vidéo sur la page de produit de votre vitrine.
Vidéo du produit non visible sur le site?
Dans certains cas, il peut arriver que les vidéos de produit ne soient pas visibles sur le site et vous verrez seulement la vignette de la vidéo ou un aperçu de la vidéo du produit, bien qu'elles aient été ajoutées depuis le panneau d'administration. Il y a maintenant principalement deux raisons pour lesquelles vous rencontrez ce problème.
Raison - 1
Vous avez remplacé catalog_product_view.xml dans votre thème personnalisé
Dans ce cas, vous pouvez simplement résoudre cette erreur avec les étapes suivantes :-
Ouvrez catalog_product_view.xml dans votre dossier de thème personnalisé situé à app/design/vendor/theme/Magento_Catalog/layout/catalog_product_view.xml.
À l'intérieur de ce fichier xml, recherchez le nom du conteneur 'product.info.media'.
Ajoutez maintenant le code ci-dessous sous ce conteneur
Vous n'avez pas remplacé catalog_product_view dans votre thème mais rencontrez toujours ce problème.
$.widget('mage.videoVimeo', $.mage.productVideoLoader, {
/**
* Initialize the Vimeo widget
* @private
*/
_create: function () {
var timestamp,
additionalParams = '',
src;
this._initialize();
timestamp = new Date().getTime();
this._autoplay = true;
if (this._autoplay) {
additionalParams += '&autoplay=1';
}
if (this._loop) {
additionalParams += '&loop=1';
}
/* change for vimeo video start */
src = 'https://player.vimeo.com/video/' +
this._code + '?api=2&player_id=vimeo' +
this._code +
timestamp +
additionalParams;
/* change for vimeo video end */
Maintenant, dans ce cas, le problème pourrait être l'URL de la vidéo que vous obtenez sur le site et l'URL de la vidéo que vous obtenez dans le panneau d'administration pour le cadre de la vidéo sont différentes. Pour résoudre ce problème, vous devez remplacer vendor/magento/module-product-video/view/frontend/web/js/load-player.js. Dans ce fichier, le problème se situe dans le code ci-dessous remplacez la ligne 332 par le code this._code + '?api=2&player_id=vimeo' + Maintenant, exécutez simplement php bin/magento setup:upgrade et actualisez votre page de produit et vous devriez obtenir la vidéo du produit dans la galerie de produits sur le site.
Ici, il se peut que vous utilisiez la fonctionnalité de zoom avant et arrière de Fotorama pour la page de vue de votre produit dans la galerie de produits. Dans cette situation, votre vidéo de produit peut fonctionner uniquement lorsque vous visionnez la vidéo du produit en plein écran. Ce problème survient car le cadre de la vidéo du produit n'est pas disponible pour Fotorama lorsque vous cliquez sur l'aperçu de la vidéo du produit dans la galerie de produits. Vous pouvez résoudre ce problème simplement en apportant des modifications à la fonction _setVideoEvent existante dans le fichier vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js avec le code suivant en remplaçant le fichier vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js dans votre thème
Et ensuite, remplacez le code de la fonction _setVideoEvent par le code donné ci-dessous
/**
*
* @param {Object} $image
* @param {Object} PV
* @param {Object} fotorama
* @param {Number} number
* @private
*/
_setVideoEvent: function ($image, PV, fotorama, number) {
$image.find('.magnify-lens').remove();
/* change for vimeo video start */
if (!this.isFullscreen) {
if ($('.fotorama-item.fotorama .fotorama__nav-wrap').find('.video-thumb-icon.fotorama__active')) {
var videoContainer = $('.fotorama__stage__shaft.fotorama__grab').find('.fotorama-video-container.fotorama__active');
this.createVimeoIframe(videoContainer);
if (this.Base) {
this._hideCloseVideo();
}
}
}
/* change for vimeo video end */
$image
.off('click tap', $.proxy(this._clickHandler, this))
.on('click tap', $.proxy(this._clickHandler, this));
this._handleBaseVideo(fotorama, number); //check for video is it base and handle it if it's base
},
createVimeoIframe: function (element) {
var type;
if ($(element).hasClass(this.VU) && $(element).find('iframe').length === 0) {
$(element).removeClass(this.VU);
type = $(element).find('.' + this.PV).data('type');
if (this.vimeoJSFrameworkLoaded && type === this.VI) {
$(element).find('.' + this.PV).productVideoLoader();
} else if (type === this.VI) {
this._showLoader();
this.onVimeoJSFramework = function () {
$(element).find('.' + this.PV).productVideoLoader();
this._hideLoader();
}.bind(this);
} else {
$(element).find('.' + this.PV).productVideoLoader();
}
$('.' + this.FTAR).addClass(this.isFullscreen ? 'fotorama__arr--shown' : 'fotorama__arr--hidden');
}
},
Maintenant, exécutez simplement php bin/magento setup:upgrade puis actualisez votre page produit maintenant. la vidéo devrait commencer à fonctionner lorsque vous cliquez sur l'aperçu vidéo dans la galerie de produits sans zoomer également.
that.requestFullScreen = function () {
if (o_allowFullScreen && !that.fullScreen) {
/* these lines are commmented to enable zoom functionality for product video */
//check that this is not video
// var isVideo = $((that.activeFrame || {}).$stageFrame || {}).hasClass('fotorama-video-container');
// if(isVideo) {
// return;
// }
scrollTop = $WINDOW.scrollTop();
scrollLeft = $WINDOW.scrollLeft();
lockScroll($WINDOW);
updateTouchTails('x', true);
measuresStash = $.extend({}, measures);
$fotorama
.addClass(fullscreenClass)
.appendTo($BODY.addClass(_fullscreenClass));
$HTML.addClass(_fullscreenClass);
unloadVideo($videoPlaying, true, true);
that.fullScreen = true;
if (o_nativeFullScreen) {
fullScreenApi.request(fotorama);
}
that.resize();
loadImg(activeIndexes, 'stage');
updateFotoramaState();
triggerEvent('fullscreenenter');
if (!('ontouchstart' in window)) {
$fullscreenIcon.focus();
}
}
return this;
};
Cependant, il peut arriver que la vidéo de votre produit fonctionne correctement, mais que la fonctionnalité de zoom ne fonctionne pas pour la vidéo du produit. Dans ce cas, vous devez vérifier votre fotorama.js. Dans ce fichier js, recherchez la fonction that.requestFullScreen. Ici, vous pouvez voir qu'il y a une vérification pour la vidéo et si, à la demande du plein écran, fotorama constate qu'il s'agit d'une vidéo, il renvoie simplement false. C'est la principale raison pour laquelle la fonctionnalité de zoom ne fonctionne pas pour la vidéo du produit dans la galerie de produits. Ainsi, pour activer le zoom sur la vidéo du produit, commentez ou supprimez simplement le code comme ci-dessous. Maintenant, exécutez simplement php bin/magento setup:upgrade et actualisez la page maintenant, vous devriez voir la fonctionnalité de zoom avant fonctionner également pour la vidéo de votre produit.
Mais voici le point crucial partie, supposons que vous ayez ajouté uniquement la vidéo du produit à partir du panneau d'administration et que vous en ayez fait un base et vous n'avez ajouté aucune image pour le produit. Dans ce cas si vous avez commenté ou supprimé le code comme ci-dessus, et lorsque vous chargez la page d'affichage du produit, la vidéo du produit sera ouvrez immédiatement le mode plein écran pour lire la vidéo. Ne vous inquiétez pas, nous pouvons également résoudre ce problème. Pour résoudre ce problème, vous devez simplement remplacer le fichier supplier/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js dans votre thème et en ajoutant des modifications dans _handleBaseVideo existant avec le code suivant. Maintenant, exécutez simplement la commande php bin/magento setup:upgrade et actualisez la page d'affichage de votre produit, vous devriez voir que tout fonctionne correctement.
/**
* Handle base video
* @param {Object} fotorama
* @param {Number} srcNumber
* @private
*/
_handleBaseVideo: function (fotorama, srcNumber) {
var waitForFroogaloop,
videoData = this.options.videoData,
activeIndex = fotorama.activeIndex,
number = parseInt(srcNumber, 10),
activeIndexIsBase = videoData[activeIndex];
if (!this.Base) {
return;
}
if (activeIndexIsBase && number === 1 && $(window).width() > this.MobileMaxWidth) {
if (this.options.videoData[fotorama.activeIndex].provider === this.VI) {
waitForFroogaloop = setInterval($.proxy(function () {
if (window.Froogaloop) {
clearInterval(waitForFroogaloop);
this.fotoramaItem.data('fotorama').activeFrame.$stageFrame[0].click();
this.Base = false;
}
}, this), 50);
} else { //if not a vimeo - play it immediately with a little lag in case for fotorama fullscreen
setTimeout($.proxy(function () {
fotorama.requestFullScreen();
this.fotoramaItem.data('fotorama').activeFrame.$stageFrame[0].click();
this.Base = false;
}, this), 50);
}
}
},
Des doutes sur cette solution ?
Si tel est le cas, n'hésitez pas à Nous contacter Je serais heureux de vous aider. Merci ! Bon codage.
