In this follow up on our first blog post about customising product info tabs in Magento 2 we’ll be talking about reordering tabs. Again it’s a fairly easy task. We already know that we’ll be looking at product page layout and template files in Magento Catalog module.
Read moreFrontend
Build your custom form validation rule
This article is sort of a follow up on my previous article on custom form validation, which explains step-by-step what it takes to validate any form. The Magento 2 way, of course.
But what if you have to implement another field that has to be in a particular format or that kind of rule does not even exist? Well… Keep reading, my dear visitor, keep reading.
Read moreCustomising product info tabs in Magento 2
Whether horizontal (which are more common) or vertical, tabs are a great way to avoid information overload by organizing large content into easily digestible chunks of data. When done right they provide all the information (related to one specific subject) without overwhelming users, allowing them to quickly navigate through the content by showing data from just one tab at a time. From the UX standpoint tabs’ main purpose is to simply facilitate access to information and it’s also useful to know that they don’t have any negative effect on your SEO and site ranking in any way.
Read moreWhy not start using Magento2 UI library, it’s easy and fun
Magento2 came with very “controversial” frontend architecture approach. We will not discuss that but we will try to explain how to empower current Magento2 UI library to achieve most common frontend task.
Read moreMagento 2 with Slick Carousel
Slick is a great Carousel plugin good for any product list like Most Popular, Featured, Upsell, Cross sell products, or any other custom product list. I will guide you with step by step on how to add Slick Carousel and apply it on product list widget on Homepage.
Lets get started!
Read moreMagento 2 Custom CMS page layout
We’ve had a request to add a new custom layout for CMS pages in one Magento shop.
This can be very useful and can save you a lot of time for different static pages of your shop.
In this example we’ll create a layout named Inchoo Layout.
We should focus on two xml files: layouts.xml and page_layout/inchoo-layout.xml under Magento_Theme folder.
Read moreValidate a custom form in Magento 2
This article will cover the fundamentals of validating any form in Magento 2.
The contact form on Contact us page will be used and modified for the purpose of the article. The form itself can be found in the following paths, depending on the type of installation you are using:
Read moreCSS Media queries in Magento 2
It’s highly unlikely that there are some frontend developers involved in a responsive website development who are not familiar with the concept of CSS Media queries. In this post, I’ll be looking at Magento 2 way of implementing this functionality in its default theme development workflow.
Read moreAdding videos to product page in Magento2
Today is even impossible to imagine a good product detail page without product video/s. In Magento 2, adding videos to the product details page is quite easy. The major problem is in most cases with an initial setup. Most of the product videos already exist online, either on youtube.com or vimeo.com. In the first case, it’s the most popular video publishing platform and for vimeo.com we can say it is more or less dedicated to professionals and photo/video enthusiast.
Google, company behind youtube, set few rules regarding sharing and embedding videos to other domains, in our case our online store. They require to have enabled youtube API key if you want to use embedding youtube videos beyond simple grabbing embed code from youtube videos page.
Read moreOverride Magento 2 Layout: Product page example
Layouts play a major roll in Magento. This roll is well known from Magento 1x layout approach. With Magento 2 couple of things are changed and improved. Really, we finally have on our disposal useful layout manipulation options.
Read moreManaging My Account Navigation Links in Magento 2
Looking at the old articles on our website that long for a rewrite, I sometimes stumble upon a gem that can be useful. This is a rewrite of the article originally written for Magento 1 – Managing navigation links in the account dashboard
In this article I’ll demonstrate how to manage navigation links in your customer’s account dashboard.
Read moreBypassing Magento 2 layout update restrictions in Admin
Magento’s layout system has been vastly improved in Magento 2 to be more accessible, more powerful and to be more streamlined. But, for some reason, only a very small subset of layout functions is made available for use in Magento 2 Admin (category layout XML updates, to be more precise). In this article, we’re going to show a very simple way of bypassing this pesky restriction.
Read moreMore/Less functionality in Magento2
While working on a Magento 2 project for our client, I was supposed to create more/less button, which is not part of neither Blank or Luma themes. The button should be on product page, but only inside of Details tab on desktop (accordion on mobile), which displays product description field in Admin.
Before we get started, I have created a custom theme (Inchoo/MoreLess that is extending Blank theme), make sure to update the correct path for your theme as we go along. The code was written on latest (2.1.6) installation with sample data.
Read morePagination with rel=”next” and rel=”prev” in Magento 2
Out of the box, Magento 2 offers fair amount of search engine optimization options but when it comes to category pages, we only have option to add canonical meta tags. In today’s blog post, we will try to spice that up a bit by implementing our own variation of canonical tag and by adding rel=”next” and rel=”prev” tags to help bots with paginated content.
Read moreMagento 2: How to display static block content in modal overlay
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.