Many times we need to show some sort of information in modal overlay when customer comes to the site.
We can use it for many kind of purposes like newsletter subscription form, coupon codes or just some
general information.
In this article I’ll show you how to create the most basic functionality around this.
Frontend
Javascript Bundling in Magento 2
Javascript bundling is a technique that groups separate files in order to reduce the number of HTTP requests that are required to load a page. Bundling is commonly used in today’s “module-based” development where some functionalities are basically split into Modules (roughly explained). For loading modules, we usually use some of popular module loaders such as rollup.js or RequireJS (which is Magento’s weapon of choice).
Read moreDon’t Mess with the Magento 2 Checkout
Hello! Do you hate editing Magento Checkout? I know how you feel… 😀
The checkout in Magento 2 is built up from a series of Knockout JS components which are then rendered using the Knockout JS templating system. Magneto 2 defines each one of these components and their parent/child relationship in a large XML file which can be extended or overridden in your own theme or module.
Read moreHow to create a custom Grunt task in Magento 2
With almost 10 months after Magento 2 has been officially launched, Google has indexed a decent number of articles related to creating themes, fallback mechanisms and LESS compiling. Great job, community! =). But there was not a single one on how to create your own Grunt task. =(
Read moreWorking with CSS in your first Magento 2 project
So, you’ve finally managed to create your new theme in Magento 2. After a few hours of swearing and sweating, you’ve successfully created all necessary files, defined fallback to Luma (you can blame Luma for all the mess that will happen later on), registered your theme within the system, activated it in the Magento Administration…aaaand…you are ready to go!
But, what now?
Read moreExtending Magento 2 default JS components
Since Magento 2 is out for quite some time now and new projects based on the platform are rapidly approaching, there is no doubt that we, as developers, need to be adequately prepared for the challenge.
In this post I will demonstrate how to deal with platform’s default javascript components (widget instances). More precisely, a javascript component responsible for the site main navigation functioning. If you’re interested, just keep reading.
Read moreUse browsersync in Magento frontend development workflow
As a frontend developer today you have tons of tools at your disposal. In everyday use you will need at least one tool which will be assigned to watch, process, generate, clean, minimize code. I will try to convince you to start using one which can be great assistant in modern frontend workflow. I will talk about Browsersync.io.
Read moreEvaluating 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 moreCSS 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 moreAdd 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 moreFeatured 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 moreHow to use Knockout in Magento 2
Knockout is javascript library which is used on frontend in Magento 2. It implements Model-View-View Model (MVVM) design pattern. You can find Knockout in Magento 2 on almost every page. The place where it’s most present is the checkout page. This is the most complicated implementation in Magento 2.
Read moreHow 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 moreMeet Magento Spain features an Inchooer talking about Magento 2 Javascript workflow
Last Meet Magento which will host an Inchooer is Meet Magento Spain. Curious about what will be the topic Filip Svetličić will talk about, we decided to dig into what you can expect. If you happen to wonder why you should visit Madrid and be at Meet Magento, changes in Magento 2 Javascript workflow should be one of them.
Read moreMagento 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