1

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

  • For the 2nd case, you may try to enter JS component path (without .js) directly into the checkout_cart_sidebar_item_renderers.xml. <item name="component" xsi:type="string">Company_Module/js/view/product/giftcard</item> – Pritam Info 24 Dec 21 '18 at 11:15
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 .

0

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.

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.