There are some questions need your help.
Could you explain the following code?
Can any one have idea how address()
object works?
At least Where can I find definition of address()
?
<!-- ko if: (isVisible()) -->
<div class="shipping-information">
<div class="ship-to">
<div class="shipping-information-title">
<span data-bind="i18n: 'Ship To:'"></span>
<button class="action action-edit" data-bind="click: back">
<span data-bind="i18n: 'edit'"></span>
</button>
</div>
<div class="shipping-information-content">
<!-- ko foreach: getRegion('ship-to') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
</div>
<div class="ship-via">
<div class="shipping-information-title">
<span data-bind="i18n: 'Shipping Method:'"></span>
<button class="action action-edit" data-bind="click: backToShippingMethod">
<span data-bind="i18n: 'edit'"></span>
</button>
</div>
<div class="shipping-information-content">
<span class="value" data-bind="text: getShippingMethodTitle()"></span>
</div>
</div>
</div>
<!--/ko-->
<!-- ko if: (visible()) -->
<!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
<!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
<!-- ko text: address().street --><!-- /ko --><br/>
<!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
<!-- ko text: address().telephone --><!-- /ko --><br/>
<!-- /ko -->
Best Answer
How I usually debug UI Components
I couldn't find the exact code you need but here are some of my tips and findings, I'll use some related shipping address code as an example.
Layout
The first step is to look at the XML to check the configuration, so open up
magento/module-checkout/view/frontend/layout/checkout_index_index.xml
and look at lines 420.Now this gives us some helpful information, mainly:
Component - This is the JS file which is a good place to look.
The JS
Open up
magento/module-checkout/view/frontend/web/js/view/shipping-information.js
.Here you will find the logic responsible for rendering the shipping area, if you look on line 19 you'll also see the template used for rendering the information:
So let's have a look there.
The template
Open up
magento/module-checkout/view/frontend/web/template/shipping-information.html
and here you will see many Knockout bindings such asclick: backToShippingMethod
on line 26. Now to debug that look in the JS file forbackToShippingMethod
. This returns the function:Your example
I've used the above steps on your example and I've ended up in a maze of shipping and address JS. A few files look like they might be what you're after though:
magento/module-checkout/view/frontend/web/js/model/new-customer-address.js
- I think this may be the onemagento/module-checkout/view/frontend/web/js/model/quote.js
magento/module-checkout/view/frontend/web/js/model/shipping-rate-processor/new-address.js
I know this isn't an answer that solves your issue but I hope it helps, if I get more time I will revisit it.