[{"data":1,"prerenderedAt":35},["ShallowReactive",2],{"RnMT39zAZ1":3},{"id":4,"slug":5,"title":6,"excerpt":7,"meta_title":6,"meta_description":8,"page_content":9,"featured_image":25,"fields":26,"tags":28,"published":31,"published_at":32,"created_at":33,"updated_at":34},"bbfbd05b-1ad7-4df1-9100-905d33109dbc","notes/javascript-in-magento-2-knockoutjs-checkout","JavaScript in Magento 2: KnockoutJS and the Checkout","Rewritten from my 2022-2023 videos: how the Magento 2 checkout and mini cart really work, what Knockout is actually doing, and how to customise them without losing a day.","How the Magento 2 checkout and mini cart really work, what Knockout is doing under the hood, and how to customise them without losing a day.",{"blocks":10},[11,19],{"id":12,"data":13,"type":18},"ea9667ba-25cc-4693-a256-5074cfd792a2",{"url":14,"title":15,"provider":16,"subtitle":17},"https://www.youtube.com/watch?v=ekMuA0NdDJA","Debugging Knockout JS on Magento 2 Checkout","youtube","The original video this piece is based on.","video",{"id":20,"data":21,"type":24},"6376877e-cb9b-464e-bc91-bd8225550831",{"content":22,"maxWidth":23},"\u003Cp>This is the companion to my piece on \u003Ca href=\"/notes/javascript-in-magento-2-requirejs-jquery\">RequireJS and jQuery basics\u003C/a>. That one covered theme level JavaScript, the stuff you add to a product page or a header. The checkout is a different animal, and it is where most Magento developers first meet Knockout and first decide they hate it. I pulled this together from a run of videos I recorded across 2022 and 2023, because the questions behind them keep coming back. The honest version is that the checkout is not as scary as it looks once you stop fighting it and learn how it is put together.\u003C/p>\u003Ch2>The checkout is a single page app bolted onto Magento\u003C/h2>\u003Cp>The first thing to accept is that the Luma checkout, and the mini cart with it, is basically a small single page application living inside Magento. It is built from HTML template files, JavaScript components and a layout XML file that stitches the whole thing together. That file is \u003Cstrong>checkout_index_index.xml\u003C/strong> in the checkout module, and it is a beast. There is more nesting in there than a David Attenborough documentary. Do not let that put you off. Once you can read the nesting you can get your own customisations into the right slot, and reading it is a skill you pick up faster than you expect. Start by opening the core file in \u003Cstrong>vendor/magento/module-checkout\u003C/strong> and just following how the components hang off each other. You are not editing it. You are learning the map before you try to drive.\u003C/p>\u003Ch2>Knockout, in one honest paragraph\u003C/h2>\u003Cp>People write thousands of words explaining Knockout and put everyone off before they have tried it. Here is the short version. Knockout binds data to HTML. You have a JavaScript component that holds values, some of them observables which means the page updates when they change, and an \u003Cstrong>.html\u003C/strong> template with \u003Cstrong>data-bind\u003C/strong> attributes that say where those values go. The bindings you will use ninety percent of the time are text, foreach and if. The component and its template are a pair: the JS provides the data, the HTML renders it. That is most of it. It is not React and it was never trying to be, and for the checkout it does the job.\u003C/p>\u003Ch2>Get something showing before you write anything clever\u003C/h2>\u003Cp>The biggest mistake I see, and the one I made early, is trying to write the full feature straight into the checkout and then wondering why nothing renders. The amount of nesting you have to get right just to make a component appear is genuinely overwhelming if you also have logic to debug at the same time. So use Occam's razor. Do the simple thing first. Get a plain block showing on the checkout page through your own module's layout XML, with no JavaScript at all, just to prove your file paths and your nesting are right. A block is the one part of the checkout you can add without touching a Knockout template, so it is the perfect smoke test. Once you can see it, then you swap in the real component and build the actual functionality. Separating those two problems will save you hours.\u003C/p>\u003Ch2>The debugging job that taught me the most\u003C/h2>\u003Cp>A client once asked me to change a single line of text on the checkout. Easy, I thought, two minute job. It was not in the translation CSV where that kind of string usually lives, because part of it was being rendered at runtime by Knockout from an HTML template. The lesson was not really about that one string. It was about process. When something on the checkout will not behave, search the vendor folder for a fragment of what you can see on screen, follow the hits, and notice when one of them is an \u003Cstrong>.html\u003C/strong> file rather than a PHP or CSV one. That tells you straight away that you are dealing with a Knockout rendered chunk and you need to override the template, not the translation. Most of getting good at Magento is knowing where to look, and the checkout rewards that more than anywhere else in the system.\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Search for what you can see.\u003C/strong> Take a visible string or class and grep the vendor folder for it.\u003C/li>\u003Cli>\u003Cstrong>Watch the file extension.\u003C/strong> An .html hit means Knockout, so you override a template, not a CSV.\u003C/li>\u003Cli>\u003Cstrong>Override, do not edit core.\u003C/strong> Copy the template path into your theme or module and change your copy.\u003C/li>\u003Cli>\u003Cstrong>Prove the render before the logic.\u003C/strong> See it on the page first, then make it do something.\u003C/li>\u003C/ul>\u003Ch2>Learn it on the mini cart first\u003C/h2>\u003Cp>If the full checkout feels like too much, start with the mini cart. It is the same machinery, HTML templates driven by Knockout, but far smaller and lower stakes. A real job I did was simply reordering the lines in the basket dropdown so the subtotal sat where the client wanted it. That kind of task looks fiddly and turns out to be a small template change once you have found the right file. The mini cart is the gentlest place to get comfortable with how the bindings and templates fit together, and everything you learn there transfers straight to the checkout.\u003C/p>\u003Ch2>Why this still matters, and where it is going\u003C/h2>\u003Cp>All of this is the Luma frontend stack: RequireJS, Knockout, jQuery and LESS. It works, and plenty of live stores still run on it, so someone has to keep it tidy. I will be straight with you though, the checkout was the part of Magento that pushed me hardest toward rebuilding storefronts properly. When a one line text change can turn into an afternoon of tracing Knockout templates, you start asking whether the whole front end should be lighter. The modern answer is Tailwind and Alpine, or a headless build where the checkout is yours and not a nest of someone else's components. I have told that longer story in \u003Ca href=\"/notes/why-i-moved-from-magento-to-headless\">why I moved from Magento to headless\u003C/a>. Learn the Knockout checkout anyway, because the maintenance work is real and well paid. Just carry the judgement, find the file, override do not hack, prove the render first, rather than the Knockout syntax, because the judgement is what survives the platform.\u003C/p>","lg","wysiwyg","",{"author":27},"Headless Digital",[29,30],"magento","dev-workflow",true,"2026-07-17T08:00:00+00:00","2026-06-21T09:30:00+00:00","2026-07-17T08:00:02.129435+00:00",1784275254446]