Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Magento2 knockout render specific child

I need help with custom checkout process that I am working on in magento2. I've found this code in the file magento/module-checkout/view/frontend/web/template/shipping-address/form.html ( Magento 2.1.1 ).

<!-- ko foreach: getRegion('additional-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

And as I understood, this will echo whole form in the checkout. Single fields like firstname, lastname, aren't defined in checkout_index_index.xml and I don't know what getTemplate() means. I thought that it basically means render all children, but they aren't in the xml. I want to style the form so for example address is on top, firstname second etc.. But i want to do other changes as well, so the question is

How to render a specific child from the current scope?

Can I do something like:

<!-- ko foreach: getRegion('additional-fieldsets.address') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('additional-fieldsets.firstname') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

? Thank you.


Another example is in the file /view/frontend/web/template/onepage.html

<div class="opc-wrapper">
    <ol class="opc" id="checkoutSteps">
        <!-- ko foreach: getRegion('steps') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </ol>
 </div>

What I'd like to do is something like:

<div class="opc-wrapper">
    <ol class="opc" id="checkoutSteps">
        <li>
            <!-- ko foreach: getRegion('steps.column1') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
        <li>
            <!-- ko foreach: getRegion('steps.column2') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
        <li>
            <!-- ko foreach: getRegion('steps.column3') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </li>
    </ol>
</div>

P.S.: I found the additional-fieldsets not in item name="", but in displayArea. What does displayArea mean here ?

like image 215
Marián Zeke Šedaj Avatar asked Oct 23 '25 16:10

Marián Zeke Šedaj


1 Answers

To render a specific child, use

<!-- ko with: getChild('my-child') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
like image 56
Vinai Avatar answered Oct 26 '25 07:10

Vinai



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!