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 →

Magento 2 Create New Theme

A quick post to show you how to create a new theme in Magento 2. Perfect when getting started with Magento 2. This post assumes you have an installation already setup and your looking to make your own customisations. Step 1: Folder structure Create a new directory for your theme: app/design/frontend/<VendorName>/<ThemeName> As a best practice…

Continue Reading →

Git Hooks To Automate Deployment

Deploying your git repository into production can be made a lot easier by using Git hooks. In this article I’ll be showing you how to use the post-receive hook to deploy your repository into your production environment. It will only deploy your master branch, which should be your stable code. If you attempt to push…

Continue Reading →