Join Enno Stuurman for an in-depth discussion in this video JavaScript in Magento 2 themes, part of Building Magento 2 Themes.
- [Instructor] In this video we're going…to explore Magento 2 JavaScript.…JavaScript's an important part of your custom theme…because without JavaScript you…couldn't even order a single product…in your Magento 2 webshop.…The JavaScript stack consists of jQuery, jQueryUI,…RequireJS, KnockoutJS, Underscore,…and, forget about it, Prototype.…You will find the JavaScript stack in the lib web folder.…Don't expect the latest versions…of your favorite framework.…
For example, jQuery is 1.12.4…so you have to take that into account.…So let's get started with adding…JavaScript to our own custom theme.…So what does Magento say about it?…In the devdocs.magento.com…XML guide…they show you how to add static resources…to the head of your theme…so let's first use that as an example.…I'm going to scope it to the home page…which then is a nice example of how you can scope code…to a specific part of your Magento 2 installation.…
I'm actually going to add that to the…Magento_Cms…folder,…the module folder, and we're going to create a…index.…
Author
Enno Stuurman
Released
4/4/2018Learn how to create and customize Magento 2 themes. Instructor Enno Stuurman begins the course by taking a look at the default Luma theme. After he goes over the structure of Luma, he helps you use that knowledge to build your own unique theme. Enno discusses page layouts in Magento themes, overriding and extending Magento theme CSS, deploying Magento 2 themes to production, and more. Throughout the course, he covers Knockout.js, Grunt, and other tools you need to master Magento theming.
- Creating custom Magento themes
- Changing the theme logo and favicon
- Moving elements inside a theme layout
- Customizing a product page
- Understanding CSS in Magento themes
- Changing your theme style with overrides
- JavaScript in Magento 2 themes
Skill Level Intermediate
Duration
Views
-
Introduction
-
1. Starting the Theme
-
Creating a custom Magento theme10m 23s
-
Customizing a Magento theme11m 13s
-
-
2. Front-End Layout
-
Customizing the product page13m 3s
-
3. CSS in Magento Themes
-
4. JavaScript and Deployment
-
JavaScript in Magento 2 themes17m 24s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: JavaScript in Magento 2 themes