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 :
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!
