0

I would like to change the way the company field is rendered in the billing address and I'm trying to apply a new elementTmpl that I've defined and works well for shipping address fields.

Here's the XML


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Module::js/invoice-dependencies.js"/>
    </head>

    <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="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="vat_id" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                                                                    </item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="company" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                                                                    </item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="io_occupation" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                                                                    </item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                                <item name="io_tax_department" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                                                                    </item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>

                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="billing-address-form" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="form-fields" xsi:type="array">
                                                                            <item name="children" xsi:type="array">                                                                             
                                                                                <item name="company" xsi:type="array">
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                                                                                    </item>
                                                                                    <item name="validation" xsi:type="array">
                                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                                    </item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

However, I'm receiving an error just by inserting the new elementTmpl value even if I don't modify the original template.


Uncaught Error: Unable to process binding "ifnot: function(){return element.hasAddons() }"
Message: Unable to process binding "template: function(){return element.elementTmpl }"
Message: Anonymous template defined, but no template content was provided
    init /el_GR/knockoutjs/knockout.js:6092
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3730
    ignore /el_GR/knockoutjs/knockout.js:1563
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3729
    arrayForEach /el_GR/knockoutjs/knockout.js:168
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3715
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3573
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToDescendants /el_GR/knockoutjs/knockout.js:3789
    init /el_GR/knockoutjs/knockout.js:4857
    evaluateImmediate_CallReadThenEndDependencyDetection /el_GR/knockoutjs/knockout.js:2331
    evaluateImmediate_CallReadWithDependencyDetection /el_GR/knockoutjs/knockout.js:2288
    evaluateImmediate /el_GR/knockoutjs/knockout.js:2253
    dependentObservable /el_GR/knockoutjs/knockout.js:2085
    init /el_GR/knockoutjs/knockout.js:4819
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3730
    ignore /el_GR/knockoutjs/knockout.js:1563
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3729
    arrayForEach /el_GR/knockoutjs/knockout.js:168
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3715
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3573
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3576
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3576
    applyBindings /el_GR/knockoutjs/knockout.js:3807
    _super /el_GR/mage/utils/wrapper.js:73
    applyBindings /el_GR/Magento_Ui/js/lib/knockout/extender/bound-nodes.js:119
    wrap /el_GR/mage/utils/wrapper.js:78
    activateBindingsOnContinuousNodeArray /el_GR/knockoutjs/knockout.js:5870
    invokeForEachNodeInContinuousRange /el_GR/knockoutjs/knockout.js:5821
    activateBindingsOnContinuousNodeArray /el_GR/knockoutjs/knockout.js:5868
    executeTemplate /el_GR/knockoutjs/knockout.js:5916
    renderTemplate /el_GR/knockoutjs/knockout.js:5962
    evaluateImmediate_CallReadThenEndDependencyDetection /el_GR/knockoutjs/knockout.js:2331
    evaluateImmediate_CallReadWithDependencyDetection /el_GR/knockoutjs/knockout.js:2288
    evaluateImmediate /el_GR/knockoutjs/knockout.js:2253
    evaluatePossiblyAsync /el_GR/knockoutjs/knockout.js:2218
    notifySubscribers /el_GR/knockoutjs/knockout.js:1401
    valueHasMutated /el_GR/knockoutjs/knockout.js:1645
    observable /el_GR/knockoutjs/knockout.js:1609
    makeTemplateSource /el_GR/Magento_Ui/js/lib/knockout/template/engine.js:197
    jQuery 7
    loadFromFile /el_GR/Magento_Ui/js/lib/knockout/template/loader.js:102
    execCb /el_GR/requirejs/require.js:1650
    execCb /el_GR/mage/requirejs/resolver.js:156
    check /el_GR/requirejs/require.js:866
    enable /el_GR/requirejs/require.js:1113
    bind /el_GR/requirejs/require.js:132
    emit /el_GR/requirejs/require.js:1156
    each /el_GR/requirejs/require.js:57
    emit /el_GR/requirejs/require.js:1155
    check /el_GR/requirejs/require.js:917
    enable /el_GR/requirejs/require.js:1143
    init /el_GR/requirejs/require.js:774
    load /el_GR/requirejs/require.js:991
    bind /el_GR/requirejs/require.js:132
    loadContent /el_GR/mage/requirejs/text.js:155
    onreadystatechange /el_GR/mage/requirejs/text.js:122
knockout.js:6092:39
    init /el_GR/knockoutjs/knockout.js:6092
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3730
    ignore /el_GR/knockoutjs/knockout.js:1563
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3729
    arrayForEach /el_GR/knockoutjs/knockout.js:168
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3715
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3573
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToDescendants /el_GR/knockoutjs/knockout.js:3789
    init /el_GR/knockoutjs/knockout.js:4857
    evaluateImmediate_CallReadThenEndDependencyDetection /el_GR/knockoutjs/knockout.js:2331
    evaluateImmediate_CallReadWithDependencyDetection /el_GR/knockoutjs/knockout.js:2288
    evaluateImmediate /el_GR/knockoutjs/knockout.js:2253
    dependentObservable /el_GR/knockoutjs/knockout.js:2085
    init /el_GR/knockoutjs/knockout.js:4819
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3730
    ignore /el_GR/knockoutjs/knockout.js:1563
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3729
    arrayForEach /el_GR/knockoutjs/knockout.js:168
    applyBindingsToNodeInternal /el_GR/knockoutjs/knockout.js:3715
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3573
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3576
    applyBindingsToDescendantsInternal /el_GR/knockoutjs/knockout.js:3555
    applyBindingsToNodeAndDescendantsInternal /el_GR/knockoutjs/knockout.js:3576
    applyBindings /el_GR/knockoutjs/knockout.js:3807
    _super /el_GR/mage/utils/wrapper.js:73
    applyBindings /el_GR/Magento_Ui/js/lib/knockout/extender/bound-nodes.js:119
    wrap /el_GR/mage/utils/wrapper.js:78
    activateBindingsOnContinuousNodeArray /el_GR/knockoutjs/knockout.js:5870
    invokeForEachNodeInContinuousRange /el_GR/knockoutjs/knockout.js:5821
    activateBindingsOnContinuousNodeArray /el_GR/knockoutjs/knockout.js:5868
    executeTemplate /el_GR/knockoutjs/knockout.js:5916
    renderTemplate /el_GR/knockoutjs/knockout.js:5962
    evaluateImmediate_CallReadThenEndDependencyDetection /el_GR/knockoutjs/knockout.js:2331
    evaluateImmediate_CallReadWithDependencyDetection /el_GR/knockoutjs/knockout.js:2288
    evaluateImmediate /el_GR/knockoutjs/knockout.js:2253
    evaluatePossiblyAsync /el_GR/knockoutjs/knockout.js:2218
    evaluatePossiblyAsync self-hosted:1178
    notifySubscribers /el_GR/knockoutjs/knockout.js:1401
    valueHasMutated /el_GR/knockoutjs/knockout.js:1645
    observable /el_GR/knockoutjs/knockout.js:1609
    makeTemplateSource /el_GR/Magento_Ui/js/lib/knockout/template/engine.js:197
    jQuery 7
    loadFromFile /el_GR/Magento_Ui/js/lib/knockout/template/loader.js:102
    execCb /el_GR/requirejs/require.js:1650
    execCb /el_GR/mage/requirejs/resolver.js:156
    check /el_GR/requirejs/require.js:866
    enable /el_GR/requirejs/require.js:1113
    bind /el_GR/requirejs/require.js:132
    emit /el_GR/requirejs/require.js:1156
    each /el_GR/requirejs/require.js:57
    emit /el_GR/requirejs/require.js:1155
    check /el_GR/requirejs/require.js:917
    enable /el_GR/requirejs/require.js:1143
    init /el_GR/requirejs/require.js:774
    load /el_GR/requirejs/require.js:991
    bind /el_GR/requirejs/require.js:132
    loadContent /el_GR/mage/requirejs/text.js:155
    onreadystatechange /el_GR/mage/requirejs/text.js:122
    openPromptSync resource://gre/modules/Prompter.jsm:1057
    alert resource://gre/modules/Prompter.jsm:1329
Improve this question
1
  • It seems that when modifying via a LayoutProcessorInterface class, it will work correctly but it won't through the XML. I'm wondering why that difference. Any help is appreciated.
    – gabtzi
    Dec 13, 2021 at 16:44

2 Answers 2

Reset to default
0

if you want to edit the content of the file, you need to copy the vendor file into your design theme.

Otherwise, if you want to change the template file (with a custom filename) you need to copy the xml file into your design theme (app/design/frontend/Vendor/Theme/Magento_Checkout/layout/checkout_index_index.xml) and change the elementTmpl with a valid path to your custom filename

Improve this answer
0

Here is an example (using Plugin) for changing field order, disabling field or adding missing field to address.

File:

etc/di.xml

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin disabled="false" name="Vendor_Module_Plugin_Block_Checkout_LayoutProcessor" sortOrder="99"
                type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>

File:

Plugin/Block/Checkout/LayoutProcessor.php

https://pastebin.com/VxnyuCcg

Improve this answer
2
  • Hi, I'm curious why XML instructions won't work, as noted above using a layout processor it actually works correctly. No need for a plugin either, just include the additional layout processor in the pool. But XML instructions won't work and cause abnormal behaviour
    – gabtzi
    Dec 17, 2021 at 8:49
  • Maybe you changed something else with the core file. You can refer to this file of mine pastebin.com/TLgbBtnz
    – LitExtension Magento Migration
    Dec 20, 2021 at 2:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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