Suppose we have the following two requirements:
- disable window scroll if the Mini Cart block is activated
- do not display more than three items
These are minor requirements, and not particularly practical, but, once done, you will have some insides in Magento 2 UI components.
Our use case is: add any product to the cart and position yourself on any front-end page (but not the checkout).
You will notice in the right upper corner the Minicart is showing a count of the items in cart. Clicking on that cart icon results in displaying the block with full details.
Clicking then away closes that block.
The following few articles will guide you through achieving the two simple requirements that are imagined with the idea to try to offer more than one approach and/or solution.
- First, we will locate the component, and edit it directly to meet the requirements
- You are right, step one is not a good idea, and thus we will continue with altering the behavior by applying mixins
- Next, we will see how server side data is being passed to the Minicart UI component.
- Later, we will pass our own server data to the Minicart
- Finally, we will completely override the Minicart
Assuming you’ve completed the articles listed above, I will touch on two more interesting topics to try to complete the picture for the front-end implementation
- How to pass and use the original customer data
- How to use the local browser storage for your front-end component
Finally, you must have noticed by now that neither there is one solution to a given problem, nor a clear end of how some default software like Knockout is extended and thus used.
That is why it is likely that very little from here could be applicable to your next problem directly, but I certainly hope I have helped you to better understand the insides about the Magento 2.2 Minicart.
Thank you for reading.
Marjan's technical articles 