I would like to know where the template is for #summery on cart page.
For instance, in
Magento\Checkout\view\frontend\web\template\summary.html ,
<div class="opc-block-summary" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order Summary'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>And there is no HTML code on this template for input region, postcode, etc.
I would like to know where I can find the html code and also how we can change data-bind attributes.
For Magento2, All the field in shipping form came from Xml file.
You can find all the input from checkout_index_index.xml file,
Please check above xml file where all the input field is coming.
Hi @tvgarden
Template for #summery on cart page is coming from this file - Magento/Checkout/view/frontend/layout/checkout_index_index.xml
But as mention by you if you would like to get data-bind attributes for this pincode and other details - it is coming from js file , so form where you need to get data-bind attributes
Below i am listing two js file which is responsible for this !!
Magento\Checkout\view\frontend\web\js\model\shipping-service.js
Magento\Checkout\view\frontend\web\js\model\shipping-rates-validator.js
So you can call data-bind attributes from here and do further customization on the same !
Hope it helps !
Hello @tvgarden
Your question is little bit confusing for me. is that cart page or checkout page?
If it is cart page then check below XML file
checkout_cart_index.xml
<block class="Magento\Checkout\Block\Cart\Shipping" name="checkout.cart.shipping" as="shipping" template="Magento_Checkout::cart/shipping.phtml" after="checkout.cart.summary.title">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="types" xsi:type="array">
<item name="form.input" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkoutProvider</item>
</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
</item>
</item>
<item name="components" xsi:type="array">
<item name="summary-block-config" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="shipping-rates-validation" xsi:type="array">
<item name="children" xsi:type="array">
<!--Step configuration components-->
</item>
</item>
</item>
</item>
<item name="block-summary" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">summary-block-config</item>
</item>
<item name="children" xsi:type="array">
<item name="block-rates" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/cart/shipping-rates</item>
<item name="sortOrder" xsi:type="string">2</item>
</item>
<item name="block-shipping" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/cart/shipping-estimation</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">block-summary.block-shipping.address-fieldsets</item>
</item>
<item name="children" xsi:type="array">
<item name="address-fieldsets" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkoutProvider</item>
</item>
</item>
<item name="displayArea" xsi:type="string">address-fieldsets</item>
<item name="children" xsi:type="array">
<item name="city" xsi:type="array">
<item name="sortOrder" xsi:type="string">115</item>
<item name="dataScope" xsi:type="string">shippingAddress.city</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">110</item>
<item name="dataScope" xsi:type="string">shippingAddress.country_id</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="region_id" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
<item name="sortOrder" xsi:type="string">112</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
<item name="customEntry" xsi:type="string">shippingAddress.region</item>
</item>
<!-- Value of region_id field is filtered by the value of county_id attribute -->
<item name="filterBy" xsi:type="array">
<item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
<item name="field" xsi:type="string">country_id</item>
</item>
</item>
<!-- The following items override configuration of corresponding address attributes -->
<item name="region" xsi:type="array">
<!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
<item name="visible" xsi:type="boolean">false</item>
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="sortOrder" xsi:type="string">111</item>
<item name="dataScope" xsi:type="string">shippingAddress.region</item>
</item>
<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="dataScope" xsi:type="string">**bleep**</item>
<item name="sortOrder" xsi:type="string">114</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<item name="checkoutProvider" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
</item>
</item>
</argument>
</arguments>
</block>Above code useful for to show summary on cart page.
Hope it will help you.
Thank you.
Can we change the data in data-bind ="<<data>>" ?
I would like to call my own function when a value is changed.