0

I'm still a novice when it comes to Magento 2 frontend with jsLayout, requireJS, etc. I have a custom module where, in javascript, I am trying to attach an onchange listener to the email textbox. I tried going the simple route by including a .phtml file via layout.xml:

checkout_index_index.xml

<referenceContainer name="after.body.start">
      <block class="Magento\Framework\View\Element\Template" name="sf.checkout.trackuser" as="sf.checkout.trackuser"
          after="sf.ads.default" template="MyVendor_SF::checkout-track-user.phtml" />
</referenceContainer>  

checkout-track-user.phtml

<script>
require(['jquery'], function($) {
    $(document).ready(function() {
        $("input#customer-email").on("change", function(e) {
            //console.log('yay');
        });
    });
});

However, when my js runs, the input#customer-email element is not yet loaded on the page, even when put inside $(document).ready(function() {});. How can run my js code after this textbox has loaded on the page?

My guess is that I need to add a component to the checkout jsLayout, but I am not sure how to go about doing this. I've looked at docs and examples, and currently, I have:

<body>
    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="sf.checkout.trackuser" as="sf.checkout.trackuser"
               after="sf.ads.default" template="MyVendor_SF::checkout-track-user.phtml" />
    </referenceContainer>

    <referenceContainer name="content">
        <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="component" xsi:type="string">MyVendor_SF/js/track-checkout-guest</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>
</body>  

I have no clue how I would code track-checkout-guest.js though.. in my case I don't think it's an actual component (no .html template or knockoutJS involved), so I'm not sure what to do.

2

1 Answer 1

0

The reason why your solution doesn't work is that e-mail component appears in DOM after DOM is "ready". You could either create a Magento JS mixin for the component and run your code after the component is initialized (see: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html), or use your approach but with MutationObserver instead of document ready event (see: https://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object).

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.