Having trouble overwriting JS component in minicart dropdown

Question

Having a tough time trying to overwrite the JS component and template around the product image in the minicart dropdown.Here's what I am trying to achieve:

I have a custom Product Type depending on the users selection, a different photo should appear in this minicart dropdown. To do this, I will need access to the current quote and product from the JS component.

I have identified the template and component is specified in Magento_Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml:

<item name="children" xsi:type="array">
<item name="item.image" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Catalog/js/view/image</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Catalog/product/image</item>
        <item name="displayArea" xsi:type="string">itemImage</item>
    </item>
</item>

Which points to template Magento_Catalog/web/template/product/image_with_borders.html and component Magento_Catalog/js/view/image.

I have already written a custom endpoint elsewhere that will return the correct image based on a quote ID and product ID. So I need to extend Magento_Catalog/js/view/image to call this endpoint and bind it to the image's "src" property.

I want to do things "the Magento way" so I have tried using a "mixin" to extend Magento_Catalog/js/view/image, this just doesn't appear to work, no error but no calls to my file or any logging.

I have also attempted to simply update the <item name="component" xsi:type="string"></item> from checkout_cart_sidebar_item_renderers.xml to my chosen component path:

Convert_GivexAW/js/view/product/giftcard

But this produces the error:

[ERROR] Failed to load the "Convert_GivexAW/js/view/product/giftcard" component.

Here is my Convert/GivexAW/view/frontend/requirejs-config.js:

var config = {
map: {
    '*': {
        "Convert_GivexAW/js/view/product/giftcard": "Convert_GivexAW/js/view/product/giftcard"
    }
}
};

The path to the file is: app/code/Convert/GivexAW/view/frontend/web/js/view/product/giftcard.js

Where am I going wrong? What is the correct approach to extend this component?

Thanks

Answer 1

You try below mixin code to extend Magento_Catalog/js/view/image

I assume you are using a custom theme "Vendor_theme".

step 1)

Define requirejs-config.js under

/app/design/frontend/Vendor/theme/Magento_Catalog/

File : requirejs-config.js

var config = {
    config: {    
        mixins: {
            'Magento_Catalog/js/view/image':            
             {'Magento_Catalog/js/view/image-mixin': true},
        },        

    },
};

step 2)

create image-mixin.js under

/app/design/frontend/Vendor/theme/Magento_Catalog/web/js/view/

File : image-mixin.js

console.log('init image-mixin.js');
define([], function () {
    'use strict';

    return function (Form) {
        return Form.extend({
            initialize: function () {
                this._super();
                console.log('Hello from the mixin!');
            }
        });
    }
});

step 3) Run below Commands to remove static content

sudo rm -rf var/view_preprocessed/*
sudo rm -rf var/pub/static/*
sudo rm -rf var/cache/*
sudo rm -rf var/generated
sudo rm -rf var/composer_home
sudo rm -rf var/page_cache
sudo rm -rf var/view_preprocessed
sudo rm -rf pub/static/frontend/*

Now you should see the console log for image-mixin.js .

Answer 2

So Magento recently updated the doc on Mixin's which can be found here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_mixins.html which appears to be the only example I could find that works. As a run down, here is a boilerplate of the required scripts for JS Mixins:

requirejs-config.js

var config = {
    map: {
        '*': {}
    },
    config: {
        mixins: {
            'Magento_Catalog/js/view/image': {
                'My_Module/js/view/product/image-mixin': true
            }
        }     
    }
};

app/code/My/Module/view/frontend/web/js/view/product/image-mixin.js

define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';

    var mixin = {

        /**
         * @var {string} imgSrc
         */
        imgSrc: "blah",

        /**
         * Initialization method
         */
        initialize: function () {
            this._super();
            console.log("MIXIN");
            $(document).ready(() => {
                console.log("READY");
            });
        }
    };

    return function (target) { // target == Result that Magento_Catalog/js/view/image returns.
        return target.extend(mixin); // New result that all other modules receive
    };
});

Then from within the mixin object, you can add additional / overwrite existing methods.