Mfrhtyj

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

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 .

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.