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.

1 Answer 1

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.

5
  • 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
    Commented Jul 18, 2016 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 Commented Jul 18, 2016 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
    Commented Jul 20, 2016 at 14:49
  • Try deleting the contents of pub/static and var/view_preprocessed. Commented Jul 20, 2016 at 17:00
  • I've tryed to do that also, but still nothing.. any other suggestion? Thank you for your time @Aaron Allen
    – alexcr
    Commented Jul 22, 2016 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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