I still haven't figured how Magento 2 structures the knockout js part.
For example how does the process work (step by step) of fetching the cart summary number.
You can find this in app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml
:
<span class="counter qty empty"
data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
<span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
<span class="counter-label">
<!-- ko if: getCartParam('summary_count') -->
<!-- ko text: getCartParam('summary_count') --><!-- /ko -->
<!-- ko i18n: 'items' --><!-- /ko -->
<!-- /ko -->
</span>
</span>
The question is how I would find all the code js, php (,html) that is in use to get the summary_count
number.
I found a minicart.js
but summary_count
is nowhere to be seen there. I suspect this is some kind of identifier that is given to a function getCartParam
. But I can not find getCartParam
too.
Another example would be the onepage checkout for example:
I can find all the templates for the appropriate steps like shipping.html
or payment.html
. But how do they come together?
Where are they loaded and what defines ie. the order?
I not only seek to find the exact information on these two cases but be generally able to find this information myself. Thus I think to understand how the process works generally would be helpful.
Some enlightenment would be great here!
Best Answer
Unfortunately I can't paste the content (it's too extensive anyway) so I can just give a link.
I found Alan Storm has written a series where he explains the Javascript concepts of Magento 2. If you read this answer you will hopefully still find it here:
http://alanstorm.com/category/magento-2/#magento2-advanced-javascript
With the information from above I try to analyze what happens (feel free to add any information to clarify things or correct me):
Actually the code in the question is not enough to analyze it. Let's look at the whole code.
You need to go further up the code sample than what I initially posted. The first thing to find is:
<a class="action showcart" ... data-bind="scope: 'minicart_content'"
. What Magento does here is (I'll quote Alan's series):But where does the
minicart_content
view model come in place? You have to look a bit further down in the code at thex-magento-init
script tag:Here Magento sets, via knockoutJs, the loaderAnimation.gif. And before the minicart is somehow initialized to the
data-block
namedminicart
by[data-block='minicart']
which suspiciously looks like a CSS style selector. For me what is returned by$block->getJsLayout()
is the following:Now that's a whole lot of hoopla! For our purpose here we will find where the
minicart_content
view model comes from. I'll quote Alan again:Now we can see that a whole lot of components are initialized here like for the product images in the cart. But also this one:
"component":"Magento_Checkout\/js\/view\/minicart"
. This translates to the filemodule-checkout/view/frontend/web/js/view/minicart.js
that @Mitch7663 pointed at in his answer.Here you find the function
getCartParam
that's referenced in the template file:With the use of knockoutJs magic this places a text node with the return of
getCartParam
called with the identifiersummary_count
. Which itself is the key of a field inthis.cart
.This is as far as I got now. I'm not yet sure where the data from
this.cart
gets into all of this. Also I skipped all the hazzle with observables and what not that you can read about in Alans series...no actually you should read it!Also it seems like Magento breaks its own standards here as I see stuff selected with jQuery in that file when actually that should come from outside of it.
Anyway I'll update the answer if I get further.