Passing data to the checkout

Unlike the mostly static CMS, category, and product pages, the checkout page has a more dynamic nature. It is an application on its own, primarily constructed out of JS components, which further utilize Magento's API endpoints to move us through the checkout steps. Magento's MagentoCheckoutModelCompositeConfigProvider type allows us to push the necessary server-side information easily to the uiComponent of the storefronts.

A quick lookup for the name="configProviders" string across the content of di.xml in the <MAGENTO_DIR> directory reveals dozen of definitions. A closer look at the <MAGENTO_DIR>/module-tax/etc/frontend/di.xml reveals the following:

<type name="MagentoCheckoutModelCompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="tax_config_provider" xsi:type="object">MagentoTaxModelTaxConfigProvider</item>
</argument>
</arguments>
</type>

We are essentially injecting new items under the configProviders argument of the MagentoCheckoutModelCompositeConfigProvider type. The implementation of a custom config provider, such as the MagentoTaxModelTaxConfigProvider, must implement the MagentoCheckoutModelConfigProviderInterface . The underlying getConfig method returns an array of key-value mappings, such as:

return [
'isDisplayShippingPriceExclTax' => $this->isDisplayShippingPriceExclTax(),
'isDisplayShippingBothPrices' => $this->isDisplayShippingBothPrices(),
'reviewShippingDisplayMode' => $this->getDisplayShippingMode(),
/* ... */
];

These, in turn, become available to the uiComponent, as observed in <MAGENTO_DIR>/module-tax/view/frontend/web/js/view/checkout/shipping_method/price.js:

isDisplayShippingPriceExclTax: window.checkoutConfig.isDisplayShippingPriceExclTax,
isDisplayShippingBothPrices: window.checkoutConfig.isDisplayShippingBothPrices,

We can see the values returned by the getConfig method now available under the JavaScript window.checkoutConfig object. This is a simple mechanism by which we can push our server-side data to our storefront when a page loads.

To understand checkout modifications better, we should familiarize ourselves with the content of the window.checkoutConfig object.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.227.69