I want to make certain customization in minicart, for that purpose I have created a module which overrides Magento_Checkout/template/minicart/item/default.html
.
- Overriding html
I have created a module inside which I have a requirejs-config.js
file:
var config = {
map: {
'*': {
'Magento_Checkout/template/minicart/item/default.html':
'Anime_Minicart/template/minicart/item/default.html'
}
}
};
- My default.html
My default.html is a copy of core file except I've added a dropdown next to input field as follows.
mydefault.html
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<select id ='minicart-qty-select'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I'm pretty sure that core file is overridden by my file since I get to see the mydefault.html text on output.
- Adding a Javascript file that loads in every page.
For this purpose I have created my custom theme and configured it through backend. I have created main.js
file in location app/design/frontend/Anime/Mytheme/web/js
, which needs to load in every page.
define([
"jquery"
],
function($) {
"use strict";
$( "#minicart-qty-select").change(function() {
var currentValue = $('.cart-item-qty').val();
var selectedValue = $('#minicart-qty-select:selected').val();
console.log(currentValue , selectedValue);
alert($('.cart-item-qty').val());
});
console.log('Hola');
console.log($('.cart-item-qty').val());
});
- Configure magento to load
main.js
Since Magento is configuration based framework we have to explicitly configure it to loadmain.js
in whole site. I did that usingrequirejs-config.js
in my theme as follows:
var config = {
// When load 'requirejs' always load the following files also
deps: [ "js/main" ]};
- Output
My
main.js
file is loaded in every page. And it outputs
Hola
undefinedSince Hola is logged it is confirmed that custom js file is loaded. But undefined value in second line makes me think that the minicart element is not loaded when page is refreshed.
On changing the values in dropdown the change event is not triggered since neither alert nor console.log outputs anything.
This concludes that my javascript file does not have effect for minicart. So what should be the right way to load javascript for minicart?