2

Background story

I am building a new payment method. I'm in the process of adding the frontend in the checkout page. The payment method require javascript.

So I have managed to add a script to the header of the checkout page.

<?xml version="1.0"?>
<layout>
    <checkout_onepage_index>
        <reference name="head">
            <action method="addJs">
                <script>foo/bar.js</script>
            </action>
        </reference>
    </checkout_onepage_index>
</layout>

The problem:

However in my case, foo/bar.js bind a DOM element which not yet exists. Hence error in the JavaScript. That DOM element is only added to the page after the buyers reach the payment stage.

One dirty solution is to addJs together with the content, such that the script is executed together. This method however give me a problem that the block checkout.payment.methods does not have the method addJs. If we're to use this approach, what should I do to be able to addJs in checkout.payment.methods block?

Alternatively, I keep the script at head block, and I update my JavaScript to be triggered only when the buyer select my payment method. However I am not sure what JavaScript event is being dispatch if we were to listen on payment method selected. What would it be?

1

I cant be 100% sure because I dont know what the javascript what you want to add does. But I think the question here should be:

Why you want to add javascript that instantly fires when its not possible because elements are not there yet?

You have to build the JS in a manner that no errors occur when this happens.

And, to answer your question, fire the JS when the payment is selected. Just because it's probably irrelevant to the other payment options. So why would you run it?

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.