I'm doing an extension for the shopping cart which consists on adding and removing quantities using + and - buttons without reloading the whole page.

Thus I'm using Ajax for sending the request and updating the cart data using KnockoutJS. And here comes the problem. While the Javascript is loading, those contents are blank, without even a loader on it, since the loader is also initialized using Javascript.

Is there any decent way to fill those holes while I wait for all of the Javascript to initialize?

I was thinking of actually duplicating the source code of the component using kind of placeholder values and during Knockout initialization use jQuery to set display: none to those components, but that looks like a bad idea.


You can build the UI without using KO (use standard PHTML templates) so it is rendered server side and only carry out the Ajax action using JS which will result in the elements being unaffected by the loading of JS.

The downside is if the user interacts with the buttons before the JS loads nothing will happen, which sounds fairly unlikely but you could resolve this by disabling them and enabling them with JS.

  • Yes, that was actually the first approach I used when I was developing this. The issue is, however, that I can't make use of observables this way and I'm just kind of stuck with jQuery, which doesn't quite offer the dynamicity I require. Jul 8 '21 at 16:48
  • 1
    Why not? You can still use KO observables for elements rendered within PHTML templates
    – Ben Crook
    Jul 9 '21 at 9:53

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.