Having trouble overwriting JS component in minicart dropdown
-
07-02-2021 - |
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
Solution 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.
OTHER TIPS
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 .