Magento Linking Properties of UI Components

Today I’m going to show how you can link UI Component properties together and get them talking to each other. We will create an example using nested UI Components, we’ll have a parent component and a child component that will be closely linked together. There are a handful of properties we can use to link…

Continue Reading →

Installing Magento PWA Studio

The Magento Progressive Web App (PWA Studio) is becoming more talked about in the Magento space with some sites already using it in production environments. A Progressive Web App is a web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience. PWA studio uses a modern…

Continue Reading →

Magento 2 Mage Template

If you’ve been working with Magento 2 for a while you may have come across mage/template within the JavaScript files – it’s an area that isn’t covered all that well, at the time of writing I couldn’t find anything about it in the official documentation. It’s dotted about in the native code base, for example…

Continue Reading →

Magento 2 JavaScript CheatSheet

JavaScript CheatSheet for Magento 2 covering different concepts on initialisation, jQuery Widgets, UI Components and overriding methods. A quick go to reference to see the different ways of handling JavaScript. If you’re looking for something more in depth checkout some of these articles, plain modules, jQuery UI widgets and UI Components. Initialisation There are three…

Continue Reading →

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 →