Frontend

Nobody is happy with default theme. Almost everyone wants unique look and feel of his online store. That’s where frontend development shines. Following articles will talk about different ways of changing your website design.


Version control systems in UI design

Version control systems in UI design

Our design team switched to working in Sketch a while ago but it wasn’t until version 43 we really started seeing some opportunities to change our workflows more significantly. It was also an opportunity for more designers to work on the same project as well as collaborate with developers more easily. If you’re looking for professional Magento web design services, feel free to check out our Magento Web Design Service for more information.

Read more

Minify your CSS and JavaScript code!

Minify your CSS and JavaScript code!

If you are reading this article, you are probably somehow involved with web development. It is also most likely that you already know how search engines use page speed as one of the parameters for evaluating your site. We have couple of options on our disposal when it comes to increasing site speed. Today we will cover one of them.

Read more

Getting started with CSS Flexbox

Getting started with CSS Flexbox

The CSS3 Flexible Box Layout, or as a shorter and more widely recognised term – Flexbox, is a CSS box model optimised for designing user interface layout.

It is the addition to the four basic layout modes, previously defined in CSS: block layout, inline layout, table layout, and positioned layout. But, in contrast to these earlier ones, this is the first CSS module designed for laying out complex pages.

Read more

A simple frontend workflow for Gulp

A simple frontend workflow for Gulp

What is Gulp?

Gulp is a task/build runner which uses Node.js for web development. In this tutorial, I will not explain how to create your Gulp plugin but I will show you how you can create a simple, basic, customized build process for your frontend workflow to ease your job.

Read more

Adding static blocks to specific CMS pages with Magento layouts

Adding static blocks to specific CMS pages with Magento layouts

While working on a project, I had to add a unique static block between header and main content of the CMS page on each CMS page. Element had to be fully customizable via Magento admin panel and it had to be easy to create on new CMS pages, easily modifiable and removable. Since that element needed to be placed outside of the main content, it couldn’t have been added using CMS in Magento admin. It had to be added using Magento layouts. Here’s how I achieved that.

Read more

Creating a Magento theme from scratch

Creating a Magento theme from scratch

Powerful fallback system, organized folder structure and tons of functionality is what makes Magento one of the most flexible and powerful eCommerce platforms out there. By default, Magento offers a lot, but as eCommerce evolved during the years, there is always additional work required to fit client needs.

Probably the first thing you will do when starting a new Magento project will be to create a Magento theme that will have custom styling and functionality. Although creating a Magento theme is a pretty simple thing to do (just ask any certified frontend developer), by not following Magento recommendations and rules you can easily make your life a bit complicated.

So, how to do it properly? Read on…

Read more

Out of the box Form Validation in Magento

Form Validation in Magento

Magento uses Prototype library to manage form validation. This comes in handy, because all you need to do when writing custom form is to assign a valid class names to your input fields, and pass the form id to VarienForm object.

Read more

Custom category menu navigation in Magento

Custom category menu navigation in Magento

Magento has its top menu reserved for category navigation. It’s pretty solid for displaying categories, even when there is a large number of them.

What some of the clients want is a vertical (sidebar) category menu, so they can display sibling categories of a category their customers are exploring.

In this article we’ll cover the creation of a full vertical menu. We’ll go 3 levels deep: category, subcategory, and sub-subcategory. You can always expand on this, but I believe 3 levels are more than enough for most stores.

Read more

Utilizing Magento notification system

notifications-featured

Building your own Magento modules (extensions) can be a tedious task. We always strive to develop everything ‘the Magento way’, which is why we frequently dig into the core to see how Magento’s Core team does things. Once in a while, we stumble upon useful features we think are useful and share them with you. One of such features is Magento’s notification system.

Read more

Magento functional testing with casper.js

Magento functional testing with casper.js

Testing can be boring and time consuming task. So why don’t we use some tools and make our lives easier? In Magento there are numerous “boring” tasks that need to be done after the first install and then again when you test a new functionality. For example, create a test account, add product to cart, go trough checkout process, add product to wishlist, compare etc.

Read more

One of the first Magento Certified Front End Developers in the World

One of the first Magento Certified Front End Developers in the World

We received a news few days ago that Vanja Devcic and Hrvoje Jurisic achieved the passing score and therefore have achieved the status of Magento Certified Front End Developers. It was a great news for us since they are one of the first in the world.

We were invited late January to participate in a certification beta testing session for Magento Front End Developers. We couldn’t just take the voucher to some testing centre as we normally do. Instead, we needed to go to a place called Fast Lane Institute for Knowledge Transfer GmbH – Munich.

Read more

Ultimate Magento Robots.txt File Examples

Ultimate Magento Robots.txt File Examples

Extremely common question when it comes to eCommerce – and for that matter Magento SEO – is how a robots.txt file should look and what should be in it. For the purpose of this article, I decided to take all of our knowledge and experience, some sample robots.txt files from our clients sites and some examples from other industry leading Magento studios to try and figure out an ultimate Magento robots.txt file.

Read more

Changing default category sort order in Magento

Changing default category sort order in Magento

Category toolbar has many options. By default it shows how many items are in the category, you can choose how many products you wish to be displayed per page, you can change the listing type (List or Grid) and you may choose Sort Order. This “Sort Order” can be confusing. The default “Sort Order” is “Best Value”. What does it mean? How is the Best value determined? Can we change the default sort order?

Read more

Magento form field AJAX validation

Magento form field AJAX validation

In this short article I will show you a quick way of adding an AJAX-ed validation on Magento form field. If you open up the {MAGENTO_ROOT}/js/prototype/validation.js file and look into its header comments you will see that Magento’s JavaScript validation is actually done trough 3rd party JavaScript library called Really Easy Field Validation by an author named Andrew Tetlaw, with its own GIT repository available here.

Read more

Prevent PO Boxes in shipping address field on Checkout

Prevent PO Boxes in shipping address field on Checkout © jechasteen@sxc.hu

We recently integrated a feature that would prevent users from creating an order with a PO Box in Australia. Since we are already familiar with Australia Post shipping integration (and heavy modifications of it, I might add :)), the first thing that came to mind is to have a look if there’s some API or web interface that can be used to filter out post codes that are linked to PO Boxes. Many high volume addresses and/or PO Boxes in Australia have their own post code, so it looked like an obvious solution. It turns out that it’s not that simple or logical, since there are many edge cases where you can not reliably tell if you should filter the code out or not. There is a guide made by Fontis that shows how to validate the input fields in order to filter out PO Boxes. However, in our case we had some dynamic content loading with Temando shipping method integrated. This guide is intended as a more general solution that is compatible with Checkout page’s dynamic content and third party Shipping methods integration like Temando.

Read more

Adding product image lightbox effect using jQuery plugin (a better way)

Adding product image lightbox effect using jQuery plugin (a better way)

This is not a copy-paste kind of tutorial. It is made for beginners so please try to understand what is going on before you start copying the code. If you are an experienced developer you can skip to the end and inspect the final code.

Nowadays every client wants some kind of lightbox effect for product images on the product page. Although there are a lot of ways to do it, I often stumble upon Magento stores that have a buggy and sometimes useless implementation of this feature. In my opinion, it should be simple, fast, easy to use and above all intuitive.

Read more

How to hide shipping method on Magento frontend but leave it on in admin area

How to hide shipping method on Magento frontend but leave it on in admin area

For some of you, this might come as a surprise, but Magento does not support “disabling” the shipping method on frontend but leaving it on in admin area. OK, thats not 100% correct since you can do some sort of a “tweak config” that would enable this effect. The thing is that although Magento supports “global/website/store” configs, shipping methods are turned on/off on a global and website level. On store level you can simply edit the title of a shipping method plus few other things, but usually you cannot enable/disable shipping method on a store level.

Read more

Enhance Magento 404 page

Enhance Magento 404 page

Magento default installation already has a predefined custom 404 page (no-route). But is it enough to help visitor/customer get back on right track!?. Let’s look over a few examples of custom designed 404 pages. http://centar-alata.hr/404, https://github.com/404, http://www.bluedaniel.com/404, http://www.casino-lemonade.com/404/ – as you can see, it can be funny, creative or you can take advantage of this “case” and try to engage potential customer. Here are a few quick and dirty ideas on how to reuse custom 404 page in Magento and try to serve specific content on it.

Read more

Inchoo Flickr Gallery Magento Extension

Inchoo Flickr Gallery Magento Extension © By Wholtone (Own work) [CC-BY-3.0], via Wikimedia Commons

Inchoo Flick Gallery is an easy-to-use Magento extension that will integrate any Flickr gallery into your Magento website. It is fully customizable using a simple Magento back-end configuration page and it uses Flickr API to get all the required information and data. Extension is tested on Magento 1.6 and 1.7 but it’s still the first version so be careful if you decide to use it on your live site.

Read more

Magento mobile theme – imobile

Magento mobile theme – imobile

Magento meets jQuery mobile (ver 1.1.0), before we start please note this is only experiment, use this theme on your own, this is not (yet) production ready. In a nutshell we have “package” under which we place all edited files. For start we use magento iphone theme and then add some “extra stuff”.

Read more

Teraflex’s Magento Design featured on the CSS Design Awards

Teraflex’s Magento Design featured on the CSS Design Awards

For those who are still not aware; at Inchoo we handle your store front design with the same care we do your development and transform your online store into an online success. Teraflex is a good example, last Friday we were advised that Teraflex’s storefront design had been nominated for the CSS Design Awards.
Just like when inchoo.net was nominated for the prize; we need your support, vote for Terraflex.biz on cssdesignawards.com

If you want to check out your store’s UX and usability or need design services, feel free to drop us a line!

Read more