0

In magento you can add a new address during the checkout process. I need to add a little text at the position seen in the screenshot:

checkout address form

I can't figure out how this is done. I've read through the section "Customize Checkout" in the documentation, but there is nothing helpful which points me in the right direction.

I know that the form can be addressed under this UiComponent path:

checkout.steps.shipping-step.shippingAddress.billing-address-form

But what steps are required to add my changes? There is no template for this form anywhere.

I dont want to solve it by a dirty javascript workaround.

What I have tried:

THEME\Amasty_Checkout\layout\amasty_checkout.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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="required_info" xsi:type="array">
                                                            <item name="component" xsi:type="string">Amasty_Checkout/js/view/required_info</item>
                                                            <item name="template" xsi:type="string">Amasty_Checkout/required_info</item>
                                                            <item name="elementTmpl" xsi:type="string">Amasty_Checkout/required_info</item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
 ...

THEME\Amasty_Checkout\web\template\required_info.html

<p id="required_info">* Pflichtfelder</p>

THEME\Amasty_Checkout\web\js\view\required_info.js

define([
    'uiComponent'
], function (
    Component
) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
        }
    });
});
Improve this question
5
  • 'I dont want to solve it by a javascript workaround.' Can I ask why? As the whole form is rendered via Javascript it's typically much easier to modify it with Javascript/Knockout templates – Ben Crook Jan 26 at 15:02
  • I mean with custom javascript workaround. for example creating the element and add it in place by using setInterval to detect when the element is ready and all that. I have no problem if it is proper magento solution javascript/knockout. I hope you understand what I mean. – Black Jan 26 at 16:51
  • 1
    Ah yeah that makes sense. I don't have time to write up an answer and test it, but it will be a case of adding a component via layout XML (or PHP if needed) so there is a child component/item of checkout.steps.shipping-step.shippingAddress or a child of that. Creating a custom template and setting that as your new item's template. That likely isn't very helpful with it being so vague but hopefully puts you on the right track – Ben Crook Jan 27 at 13:05
  • @BenCrook Thats exactly what I tried today, but unfortunately it is not that easy in my case. I updated my question. Maybe if you find some time you can look at it and see if you can find any mistakes. Thank you! – Black Jan 27 at 14:31
  • 1
    I solved it by loading the component into the template of the parent (shippingAddress) by using knockoutjs and getChild() – Black Jan 27 at 18:27

Your Answer

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

Browse other questions tagged or ask your own question.