How is product data passed from a Block to knockout template?

Question

I'm investigating loading some product images via knockout templates.

While looking for an example from the core I saw the minicart has this behaviour but right now i don't fully understand how the data is passed to the knockout templates?

Config from

module-checkout/Block/Cart/Sidebar.php

is bound to window.checkout in the minicart template and the initSidebar() function in this block is called when the minicart dropdown is triggered, this window.checkout object includes config for the various Checkout related URL's and the class to render images:

Magento_Catalog/product/image_with_borders

but curiously does not include any products the customer my have in their cart.

The scope for the minicart is minicart_content, this is defined in a number of XML files found in module-checkout/view/frontend/layout:

checkout_cart_sidebar_item_price_renderers.xml
checkout_cart_sidebar_item_renderers.xml
checkout_cart_sidebar_total_renderers.xml
default.xml

I cannot see anywhere in these layout files where a product model or cart specific data is passed to this minicart_content scope. So I don't understand how the knockout image template receives its data object which contains alt, height, src & width values for the product. Or for that matter how the minicart receives data for the products the customer has in their cart?

What's the missing link, how is product data passed from a Block to a knockout template?

Answer 1

Well I spent a lot of hours looking how templates and other stuffs are related with knockout.js, i will try to explain how subtotal price format is displayed to order summary at checkout module, but is same to other things too. My current version is Magento ver. 2.0.4.

First if you navigate to the corresponding layout file for checkout at

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

you will see at line 392 inside cart_items block the subtotal block like this:

As you can see , Magento calls a js template to display subtotal of product right after product details.

If you navigate to

vendor/magento/module-checkout/view/frontend/web/js/view/summary/subtotal.js

you will see at line 15 is called subtotal template , and a function called getValue(),

 getValue: function () {
    return this.getFormattedPrice(this.getPureValue());
  }

which later i saw it is called in subtotal template , which is located to

vendor/magento/module-checkout/view/frontend/web/template/summary/subtotal.html

with this code:

Subtotal.js file uses

Magento_Checkout/view/frontend/web/js/view/summary/abstract-total.js getFormattedPrice()

function, while this file uses

Magento_Checkout/view/frontend/web/js/model/quote.js getPriceFormat()

function read about require.js dependencies , which returns a price format, and here i saw that this variable is populated like this,

var priceFormat = window.checkoutConfig.priceFormat;

So where does window.checkoutConfig.priceFormat comes from?

Magento 2 did this:

If you navigate to

/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml

at line 26 is initialized window.checkoutConfig with $block->getCheckoutConfig(), which function is at

/vendor/magento/module-checkout/Block/Onepage.php

line 89, here it takes all config providers and returns them.

Where are config providers defined?

They are defined at

vendor/magento/module-checkout/etc/frontend/di.xml

at line 46, at sends us to

Magento\Checkout\Model\DefaultConfigProvider.php

which has getConfig() function, at line 254 you can see getConfig() function and at line 271 is priceFormat populated like this:

 $output['priceFormat'] = $this->localeFormat->getPriceFormat(
            null,
            $this->checkoutSession->getQuote()->getQuoteCurrencyCode()
        );

This means priceFormat is declared at populated here at getConfig() function, so you can later use it with window.checkouConfig.priceFormat.