Locating and Editing minicart.js

How do you locate the component? There are many ways, but lets try to use both common sense and common tools.

In Google Chrome, just like mentioned earlier, in any Magento page (except the checkout), right click in your browser and then click “Inspect”. Then move to the “Sources” tab.
For those of you who prefer Firefox, right click in your browser and then click “Inspect Element”. Then move to the “Debugger” tab.

Now, in the left sidebar we see all available sources, and we will continue to focus on the pub/static folder.
Continue to open this path: /pub/static/frontend/[vendor]/[theme]/[locale].
This usually resolves to: /pub/static/frontend/magento/luma/en_US. (And yes, /pub may not be there is your web server is pointing to the /pub folder directly.)

But, moving back to the important issue. What’s next?
Well, common sense says that if the cart itself is part of the Magento Checkout module, perhaps the Mini Cart is too.

So, we continue to try and open folder Magento_Checkout/js and then we see it is very easy to spot /view/minicart.js. This is our component!

So far, we were looking at the deployed file in the /static folder, but now it is not hard to locate the actual source file:

https://gist.github.com/marjan7790/6999f2ad14af620b49143a47d5d0e73c
Now, lets solve the problem in a bad way.

Find this code

https://gist.github.com/marjan7790/9b8096668cb4a31e9a47ef1b5e733159

and change it to

https://gist.github.com/marjan7790/f6d49ea064af25765ac1b8e5763eac0a

Tip: if you’ve edited the file in the /vendor folder, you might need to re-deploy the static content. This given, changing the file directly in /static folder, may be more practical for trial and error approach like this.

Eventually, reload the page and click on the mini cart icon. It works! The window scroll on the right of the window is gone.

However, if we now close the mini cart, the scroll is still gone.

So, add this code

https://gist.github.com/marjan7790/2b51050947e15f1b5cebeece92454903

below the code that you edited earlier (but above return Component.extend({)

There, done.

Now, move a bit down and spot this line

https://gist.github.com/marjan7790/7aed17b35d43850040e748f2eeb9e931

change it to

https://gist.github.com/marjan7790/1cb374a40be8bd05e1384f4ea7764694

Re-deploy and clean cache if you must. But there, you are done! Take a brake now 🙂

Next, we will apply mixins to the original minicart component.