0

I trying to add a custom template @ checkout between form customer login and shipping address inside div id="checkout-step-shipping" there are 2 forms : enter image description here

I've tried a few thing like 'before-form' etc.. I've manage to add before and after everything following this :https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_step.html But Not able to add in between! Here is my xml :

...<referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="MYCUSTOMHTML" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/MYCUSTOMCOMPONENT</item>
                                                        <item name="sortOrder" xsi:type="string">1</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>...

Here is my component :

define(
[
    'uiComponent',
    'jquery',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/quote',
    'Magento_Ui/js/modal/alert',
    'Magento_Ui/js/modal/modal',
    'ko'
],
function (Component, $, stepNavigator, quote, alert, modal, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping-address/MYCUSTOMCOMPONENT'
        },
        initialize: function () {
            this._super();
            console.log('LOADED!');
        }
    })
}

);

My html:

<div>TEST TEST TESTE</div>

This works I console.log LOADED but the html does not gets added!

Does anyone have any idea I ma not sure why the html not showing up as the component loads! any help Appreciate thanks!

0

I've got it! I was actually missing ** displayArea** before-form

but I was trying :

       ...<item name="shippingAddress" xsi:type="array">
             <item name="children" xsi:type="array">
                <item name="before-form" xsi:type="array">
                     <item name="MYCUSTOMHTML" xsi:type="array">
                           <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/MYCUSTOMCOMPONENT</item>
                       <item name="sortOrder" xsi:type="string">1</item>
                     </item>
                </item>   
            </item>
        </item>...

And I should be

...<item name="shippingAddress" xsi:type="array">
                     <item name="children" xsi:type="array">
                    <item name="before-form" xsi:type="array">
                         <item name="MYCUSTOMHTML" xsi:type="array">
                      <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/MYCUSTOMCOMPONENT</item>
                   <item name="displayArea" xsi:type="string">before-form</item>
             </item>
        </item>   
    </item>
</item>...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.