Troubleshooting Magento Knockout Out Errors During Checkout

Published by John on March 2, 2023 Under Javascript, Magento

While working on a custom theme for a Magento 2 site, I ran into an issue with Amasty’s One Step Checkout plugin. This plugin is intended to simplify the checkout process and normally as you make changes, like choose a shipping method, the tax and items get redrawn on the right column.

However, in this case, the loading spinner gif never went away over the Order Summary section and it did not correctly update. In my javascript console, I got an error related to Knock Out to the effect of:

Unable to process binding "Cannot find closing comment tag to match:"

I spent some time checking the html code used to generate this section and verifying that each opening ‘<!– ko’ tag had a closing ‘<!– /ko –>’ tag, but was unable to find any mismatched tags. I tried adding an extra closing tag, but this would just cause a different issue and since I was working on a custom tax plugin as well, spent some time debugging that thinking it might be the culprit.

Eventually, I determined that the issue was caused by the use of self closing divs in the knockout templates. Basically something similar to this:

<div id="some_id" onclick="somecode();" />

I found and replaced 3 of these, like this:

<div id="some_id" onclick="somecode();"></div>

After doing this, the javascript errors were resolved and I was able to checkout correctly.

No Comments |