Magento 2 Get JS Layout

When configuring your JavaScript file its usually added where your calling it from, in the script tag or in the data-mage-init attribute. For Magento UI components things tend to work a bit differently as it uses XML for the configuration by using the $block->getJsLayout() which is a nice way of doing it as it keeps…

Continue Reading →

Magento 2 UI Component

Magento UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. It uses the Knockout JS library to bind data to certain DOM elements on the page which then gets displayed to the user. Magento UI components are used in various areas across the store front, the main area…

Continue Reading →

Magento 2 Extend jQuery UI Widget

In the previous article I showed you how to create a new jQuery UI widget from scratch. Today will be a bit different and I’ll demonstrate how you can extend existing jQuery UI widgets to add bespoke functionality – sometimes the original functionality isn’t enough. In our examples we will be extending the DropdownDialog widget….

Continue Reading →

Magento 2 Create jQuery UI Widget

Today we are going to build a custom jQuery UI widget in Magento 2. The jQuery widget factory is a part of jQuery UI. Magento 2 has built in widgets it uses across the platform but we also have the option to build our very own bespoke widgets for our own needs which is what…

Continue Reading →

Magento 2 Compile Less With Grunt

Let’s face it, frontend development on Magento 2 is extremely slow! It is a long winded process, each time you make a change to a Less file you have to clear cache and delete the pub/frontend directory to see any visible changes on the frontend. It isn’t a good workflow, it’s not workable. By using…

Continue Reading →

Magento 2 Create New Page Layout

Quick post on how to add a custom page layout within Magento 2. I find these are very useful for landing pages such as the home page, about page or promotional page where you need to have a completely bespoke layout. Setting up a new page layout will give you a base to work with…

Continue Reading →

PWA Install Prompt

Progressive web apps (PWA) are becoming increasingly popular and with the recent announcement that Chrome 73 now supports Desktop PWAs on all desktop platforms let’s see how we can make our users aware of this feature. Today I’m going to show you how to prompt the user to install your PWA or give them the…

Continue Reading →

Magento 2 Add Library JavaScript File

Quick post to show you how to add in a third-party library via RequireJS. In this example I will be using the popular carousel library Slick Slider. Configuring RequireJS First add your third-party library file to your theme directory, app/design/frontend/<VendorName>/<ThemeName>/js/vendor/slick.min.js Next we need to configure our RequireJS. If you haven’t already got a configuration file…

Continue Reading →

Magento 2: Calling and Initializing JavaScript

In the last post I showed you how to add a JavaScript file globally across your Magento 2 store. Today I’ll show you two more methods of loading, imperative and declarative. These methods allow you to only load the relevant JavaScript when required, as apposed to one global JavaScript file. Imperative notation The simplest method…

Continue Reading →

Magento 2 Add Global JS File Through RequireJS

Adding in a JavaScript library to Magento 2 is very different to how you might be used to doing things from Magento 1. Magento 2 uses the RequireJS library for nearly every JavaScript feature it has. Today I’m going to show you the most basic example of how to utilise this library by adding a…

Continue Reading →