Frontend

Evaluating and improving accessibility of eCommerce websites

Sir Tim Berners-Lee once said that “Access (to the Web) by everyone regardless of disability is an essential aspect”. We, as developers, always strive to create a website which looks and feels good on a wide range of devices, resolutions, operating systems, network speeds, etc., but how often do we consider designing or creating a website for a wide range of people? In this article, we’re going to cover some basic frontend principles of improving accessibility and what that means in context of a Magento website.

Read more

CSS preprocessing in Magento 2

Magento 2 has been out in the wild for some time now. Most developers I know haven’t worked on Magento 2 project yet. However, most of them installed it and played around with it, learning and experimenting.

From the comments on github and social media, and from chats with developers, conclusion is that Magento 2 Frontend has a lot of issues, one being the most important: CSS preprocessing.

Read more

Add qty increment buttons to product page

As you probably know, Magento is using a plain text field to handle quantity on product page. This is the bulletproof solution – it is simple and covers all needs. But, sometimes, merchants want to use something more appealing, and many of them settle for quantity increment buttons (those + and buttons next to the quantity input field). Adding this kind of behaviour will be the topic of this post.

Read more

Featured products in Magento 2 with Catalog Products List widget

By checking various e-commerce websites one thing which can be found in almost all of them are featured products. A list of hand-picked products, usually placed on the home page, used for promotion. So far Magento lacked that most requested feature and developers had to look for other solutions or to code one of their own. Let’s look what’s the situation like in Magento 2.

Read more

How to add custom javascript in Magento 2 with requireJS

Magento 2 brings some new features in javascript. One of them is “requireJS” (javascript file loader) and second is “jQuery“, a very popular js library. One of the biggest benefits is using requireJS which means that Magento 2 is ready for the upcoming HTTP2 protocol. In the next few steps we will explain how to create valid javascript code for use in requireJS. Let’s start with an example.

Read more

Magento 2 frontend architecture

Although still in development phase, Magento 2 comes with a distinctive set of changed/improved frontend approaches compared to its predecessor Magento 1.X. The big difference is that frontend is now updated with newer technologies such as HTML5, CSS3 and jQuery.

There are also significant changes/improvements to overall layout manipulation, file structure and a brand new introduction to Magento UI library heavily based on LESS preprocessor with built in compiler.

One of the main goals besides performance and scalability was to serve RWD out of the box. In this article I’ll try to cover some of the main differences, dive into development and demonstrate some practical examples.

Read more