[{"data":1,"prerenderedAt":35},["ShallowReactive",2],{"8rUe5YshCD":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},"2057d71a-9777-4e8b-94ea-62c5acc2fa4a","notes/javascript-in-magento-2-requirejs-jquery","JavaScript in Magento 2: RequireJS and jQuery Basics","Rewritten from my 2020-2022 videos: the simplest sane way to add JavaScript to a Magento 2 theme, RequireJS to load it and jQuery to write it, kept modular.","The simplest sane way to add JavaScript to a Magento 2 theme: RequireJS to load it and jQuery to write it, kept modular and easy to maintain.",{"blocks":10},[11,19],{"id":12,"data":13,"type":18},"28e9a91f-c5fa-4a1b-b571-8f5cf98472da",{"url":14,"title":15,"provider":16,"subtitle":17},"https://www.youtube.com/watch?v=Mkg9lglBE1I","Magento 2 - Require JS is so simple!","youtube","The original video this piece is based on.","video",{"id":20,"data":21,"type":24},"7c1310af-6354-47cf-9041-ea102f67d88d",{"content":22,"maxWidth":23},"\u003Cp>This started as a few videos I recorded between 2020 and 2022, rewritten here as one guide because the question behind them still lands in my inbox: what is the simplest, sanest way to add JavaScript to a Magento 2 theme? The honest answer has not changed much. For theme level work, use RequireJS to load it and jQuery to write it, and keep it modular. Here is how I do it, and why I still think it holds up even as the platform moves on.\u003C/p>\u003Ch2>RequireJS is simpler than the internet makes it look\u003C/h2>\u003Cp>There are a lot of over complicated explanations of RequireJS floating about. Most of them put people off before they have written a line. The reality is small. A \u003Cstrong>requirejs-config.js\u003C/strong> file sits in the root of your theme, you point it at your custom script with a path relative to the web directory, and that is most of the setup. Two files do the job: the config that registers your script as a dependency, and the script itself. I said it in the original video and I will say it again here, it is genuinely about six lines to wire up a dependency. You are not building a build system, you are telling Magento where your code lives and in what order to load it.\u003C/p>\u003Ch2>jQuery is already in there\u003C/h2>\u003Cp>This trips up newcomers constantly. You do not need to add jQuery to a Magento theme, and you definitely should not be pulling the latest version off a CDN. Magento ships jQuery in its lib, so you declare it as a dependency in your RequireJS module and pass the dollar sign into your function. From there you write jQuery the normal way. Letting the RequireJS callback run your code means it fires when the document is ready, so you are not scattering ready handlers through the file either.\u003C/p>\u003Ch2>Write it in functions, not one long blob\u003C/h2>\u003Cp>jQuery gets a bad name, and most of that is people writing it quick and dirty to get something working. Set the theme up properly and jQuery can be as neat and tidy as ES6, and frankly easier to explain to a junior than a screen of Knockout. The habit I drilled into every team I led was to keep one behaviour per function. A back to top button is not one function, it is three: one that appends the markup, one that handles the fade on scroll, and one that handles the click and the animate back to the top. That is overkill for a back to top button and I know it, but the discipline is the point, because the moment the feature is real you are glad the code is in pieces you can follow.\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>One behaviour per function.\u003C/strong> Easier to debug, easier to read, easier to hand over.\u003C/li>\u003Cli>\u003Cstrong>Use the built in jQuery.\u003C/strong> Do not ship your own copy and do not chase the newest version.\u003C/li>\u003Cli>\u003Cstrong>Let RequireJS handle the timing.\u003C/strong> Your init runs on document ready for free, so you do not need ready wrappers everywhere.\u003C/li>\u003Cli>\u003Cstrong>Name things for the next person.\u003C/strong> The dev who picks this up in a year, often you, will thank you for it.\u003C/li>\u003C/ul>\u003Ch2>A real example: a slider on the product page\u003C/h2>\u003Cp>The one that comes up most is turning the related products area into a carousel. I use Slick slider rather than the Owl carousel that ships with parts of Magento. Drop the minified Slick into your theme's js folder, require jQuery and the Slick path in your script, and initialise it. The trick I always teach: do not bind the slider to a generic hook like the product items list, because that markup shows up in more than one place, related, upsells and cross sells all share it, and your sliders will end up fighting each other. Put the init in the template, drive the display off a PHP variable for the product type, and related and upsells each get their own clean instance. You could instead pass the type as a data attribute and pick it up in your main script. Both work. As ever with Magento, there is more than one way to skin it, and the right one is the one your next change does not break.\u003C/p>\u003Ch2>Why this still matters, and where it is going\u003C/h2>\u003Cp>All of this is the Luma frontend world: RequireJS, jQuery, Knockout and LESS. It works. I shipped a lot of stores on exactly this stack, and if you are maintaining a Luma theme today this is still how you do it well. But it is worth being honest that the ground has shifted under it. The modern Magento frontend conversation is Tailwind and Alpine now, and the heavier this older stack got, the more it pushed me toward rebuilding storefronts properly rather than patching them. That is a longer story I have told in \u003Ca href=\"/notes/why-i-moved-from-magento-to-headless\">why I moved from Magento to headless\u003C/a>. Learn this anyway, because plenty of live stores still run on it and someone has to keep them tidy. Just know that the judgement behind it, keep it modular, keep it simple, do not load what is already there, carries over to whatever you build next far better than the RequireJS syntax ever will.\u003C/p>","lg","wysiwyg","",{"author":27},"Headless Digital",[29,30],"magento","dev-workflow",true,"2026-07-15T08:00:00+00:00","2026-06-19T07:14:00+00:00","2026-07-15T08:00:01.652391+00:00",1784102450281]