Skip to content

How to update a function in a mixin that was defined outside a return?

In lib/web/mage/gallery/gallery.js L:22 I want to update this function:

var getMainImageIndex = function (data) {
            var mainIndex;

            if (_.every(data, function (item) {
                    return _.isObject(item);
                })
            ) {
                mainIndex = _.findIndex(data, function (item) {
                    return item.isMain;
                });
            }

            return mainIndex > 0 ? mainIndex : 0;
        },

So I created a mixin gallery-mixin.js :

define(function () {
    'use strict';
    alert("gallery outside")

    var mixin = {
        /**
         *
         * @param {Column} elem
         */
        getMainImageIndex: function (data) {
            alert('test');
            var imageIndex = -1;
            for (var i = 0; i < data.length; i++) {
                if (_.isObject(data[i]) && data[i].type === "image") {
                    imageIndex = i;
                    break;
                }
            }
            return imageIndex >= 0 ? imageIndex : 0;
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../columns returns.
        return target.extend(mixin); // new result that all other modules receive
    };
});

This in fact does trigger the alert("gallery outside"), so the require-config.js configuration is correct, but does not trigger the alert in the function I want to override (getMainImageIndex). In the source file it seems to be defined outside of the return as a variable (not a method). I feel that’s where the problem lies.