0

I'm using magento 2.0.7, and I've loaded a video for all my products.
Now what I'm trying to do, is to add a button on the product page, under the image gallery(cause that's where you find the video if you slide) that sends me to the slide with the video.

The video is not allways in the same slide, for some products might be the second slide, some other third slide ecc.

0

First, within your custom theme, create the directory {theme_directory}/Magento_Catalog/templates/product/view. Now copy the file {magento_root}/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml into that directory.

Now we add the button to show the video into your theme's gallery.phtml file. Add this code before the first script tag:

<div>
    <button type="button" id="video-button" class="video-button">
        <span><?php /* @escapeNotVerified */ echo __('View Product Video') ?></span>
    </button>
</div>

Now find the beginning of the second script tag and modify it like this:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "js/gallery/gallery": {
                "videoButton": "#video-button",
                "mixins":["magnifier/magnify"],
                ...

We changed "mage/gallery/gallery" to "js/gallery/gallery" and adding the line "videoButton": "#video-button"

Next we need to extend the javascript that controls the gallery slides. Create the file {theme_directory}/web/js/gallery/gallery.js with contents as follows:

define([
    'jquery',
    'mage/gallery/gallery'
], function ($, Gallery) {
    'use strict';

    return Gallery.extend({

        /**
         * Initializes gallery.
         * @param {Object} config - Gallery configuration.
         * @param {String} element - String selector of gallery DOM element.
         */
        initialize: function (config, element) {
            var self = this;

            this._super();

            $(config.videoLink).click(function (e) {
                self.settings.api.last();
            });
        }
    });
});

Now flush the cache and it should be working. Note that this assumes that the video will always be the last slide in the gallery.

| improve this answer | |
  • Hello @Aaron Allen, I've did so, cleared the cache and everything, but no View Product Video come's out. I'm using Yume Venustheme. Any suggestions? Thank you for your time! – alexcr Jul 18 '16 at 13:01
  • Ensure that put the template file in the correct directory. Wherever the Yume theme directory is, this will be your file structure: {Yume_directory}/Magento_Catalog/templates/product/view/gallery.phtml – Aaron Allen Jul 18 '16 at 23:40
  • Yes, is in the right directory! Here is the path /app/design/frontend/Venustheme/yume/Magento_Catalog/templates/product/view/gallery.phtml – alexcr Jul 20 '16 at 14:49
  • Try deleting the contents of pub/static and var/view_preprocessed. – Aaron Allen Jul 20 '16 at 17:00
  • I've tryed to do that also, but still nothing.. any other suggestion? Thank you for your time @Aaron Allen – alexcr Jul 22 '16 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.