Loading Javascript for minicart in Magento 2

Question

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.

1. 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'
 }
 }
};

2. 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.

3. 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());
}); 

4. Configure magento to load main.js Since Magento is configuration based framework we have to explicitly configure it to load main.js in whole site. I did that using requirejs-config.js in my theme as follows:

var config = {

// When load 'requirejs' always load the following files also
deps: [ "js/main" ]

};

5. Output My main.js file is loaded in every page. And it outputs

Hola
undefined

Since 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?

Answer 1

You should use on jquery function instead change event, because content of the minicart item is loading via ajax, after page loading.

$('#minicart-content-wrapper').on('change', '#minicart-qty-select', function() {
 console.log($(this).val());
});

I hope it'll help.

• Purushotam Sangroula: Hello, It seem to work, could you elaborate why this particular selector and event working and not mine.

Answer 2

You need to set your selector on change event of jquery.

$( document).on("change","#minicart-qty-select",function() {
 var currentValue = $('.cart-item-qty').val();
 var selectedValue = $('#minicart-qty-select:selected').val();
 console.log(currentValue , selectedValue);
 alert($('.cart-item-qty').val());
});

minicart object generate using ko js and once ko js render complete they got minicart-qty-select object. so you need to use on function of jquery.

• Purushotam Sangroula: Thanks @Rakesh, similar solution was suggested by Evgeny, so I had to select his answer. You have been so helpful.