[Resolved] JS for plugin with multi-stage checkout process

[Gunnar]

Hi there,

I searched the forum but couldn’t find anything, hope it is not a question asked before.

I want to hide a certain element with JS. The element is on a checkout page within content generated by an e-commerce plugin. I can add JS to the footer hook and I see it running just fine when the /checkout page loads. The problem is that the element I want to hide is on the second page of the checkout process, which is dynamically rendered by the plugin within the /checkout page.

If I understand it correctly, the JS in the footer hook is only executed once when the page loads, not again when some elements are dynamically changed on the page, right? Is there anything that I can do in this case?

Kind regards,
Gunnar

[Fernando]

Hi Gunnar,

You’re correct in saying that JS runs on load usually.

When you load the second page, is it AJAX loaded, or does the entire page load again?

Perhaps you can explore doing it through CSS first? There’s an :empty pseudo-class you can use if it’s possible. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

[Gunnar]

Hi Fernando,

Thank you.

Indeed it is AJAX reloaded.

CSS does not work unfortunately. There is a list of options and I want to hide some but not others. All options have the same class and I cannot change that. Also, the options appear on various checkout pages, not always in the same order, so I cannot just target the first and third option, for example. That’s why I was hoping to use JS to find the option by their text.

Gunnar

[Fernando]

I see. You would need to find a way to run your script in the event that something changes through your plugin.

It would be good to reach out to the support of the plugin you’re using with regards to this as this would be out of our scope of support.

[Gunnar]

Ok! Thank you anyway!

[Fernando]

You’re welcome, Gunnar!

[Author]

Posts