What's new in nopCommerce 3.0 - part 4 - HTML refactoring.

If you have missed the other parts of this blog series, please feel free to read more here:

What's new in nopCommerce 3.0 - part 1 - multi vendor support.

What's new in nopCommerce 3.0 - part 2 - multi store support.

What's new in nopCommerce 3.0 - part 3 - Nop-Tempalates themes and plugins.

The multi-store and multi-vendor are the big stars in the nopCommerce 3.0 release. But there is one more major feature, which we have not talked about yet. NopCommerce 3.0 will be released with a brand new HTML and CSS. The whole markup of the system has been refactored to be clean, optimized, semantically correct, modern and most importantly easy to work with and customize.

This major feature was done by Nop-Templates and contributed to nopCommerce. We have had our top front-end developer work on the system for almost 2 months so that the markup that nopCommerce generates can be, as he likes to put it, "Shining"!

There are three major directions, which were followed during the refactoring.

1. Add or remove elements to achieve flexibility of styling.

Take the sorting options on the nopCommerce category pages for example:

NopCommerce Sorting Options

 

Imagine you would like to style the sorting options panel, put a background on it or a border. Before the refactoring the sorting options panel elements (the three dropdowns) did not have a parent element and styling the whole panel was quite difficult. You would probably end up overriding the category template view, just to do that. Now these elements have a common panel and if you would like to change it, you only need to work with CSS.

Another good example for this type of refactoring is the product page of nopCommerce where you have a separate line of markup for each product variant:

NopCommerce Product Variant

 

It is common to divide the elements for each variant (picture, description, attributes, buttons) into two separate panels, left and right. Before the refactoring to achieve this, each element had to be floated separately as there were no elements to act as left and right panel. Imagine doing this also for your theme RTL support. Now this is easily achieved as there are two separate panels, left and right, and elements can be arranged in these panels.

Another good example of this newly added markup to achieve flexibility are new class names added to table elements so that columns in a table could be styled separately. Before the refactoring separate styling of columns could not be achieved via CSS only. Now this is possible and is handy on pages like the shopping cart for example where you might need different font, color, centering, etc for a column:

NopCommerce Shopping Cart

 

There are numerous such changes through the code, which involve not only the pages mentioned so far but also blog, news, etc. pages. The purpose of this refactoring direction was to add flexibility to the markup so that customizations to the nopCommerce pages could be achieved only via CSS and not by overriding views and working with Razor, which complicates not only the development process but also creates problems with the maintenance and upgrade of these changes.

2. Unification of common elements. This refactoring direction has to do mainly with adding class names to common elements so that they can be styled together.

Take the nopCommerce category navigation for example:

NopCommerce Category Navigation

In this case the Categories and Recently Viewed Products navigation require the same styling as they both present a list ot items. Before the refactoring this could be achieved but without a common class declaration as there was no such class. Now these two panels can be styled with a single class declaration.

Such unification changes were done to many nopCommerce page elements like form elements, form lines, form labels and controls. Before the refactoring the nopCommerce forum for example had a lot of common tables, but without common class names. Now the nopCommerce forum is much easier to style because of this. This is also valid for the MyAccount pages, which depend heavily on form elements. Unification changes were done to whole pages too. The search page of the web site and of the forum were unified for example.

3. Remove deprecated elements and code approaches to achieve standard-compliant and semantically correct markup.

If you are a front-end developer familiar with nopCommerce you could be reading this blog only to find the answer to this question.

Is the <div class="clear"/> still used in nopCommerce 3.0?

The answer is no! This was an old, deprecated approach to clear floats, back from the days when HTML was written with IE 6 in mind. It was semantically incorrect and added waste to the HTML markup of the system, which not only looked bad to developers and search engines but was more difficult to work with. Now floats throughout nopCommerce are cleared only via CSS, which means that you cannot expect it to be perfect in IE 6, but to be honest who cares about IE 6. In fact please do good to developers and the web by not using this browser:

http://www.ie6countdown.com

With the <div class="clear"/> out of the way we had to take care of the next big front-end oldie: using table elements for layout. Table elements should be used where there is table data, like the nopCommerce shopping cart for example. But using tables to achieve layout, like presenting the products on the catalog pages for example is wrong and also frowned upon by search engines. So all tables used for layout were removed from nopCommerce.

NopCommerce Products

Another example of semantically incorrect use of HTML markup in nopCommerce, which was corrected by the refactoring is definition lists (dl elements) being used to define forms in the website. This was replaced with a more appropriate markup as definition lists should be used where there is specification data, (color - blue, material - cotton, etc.).

The whole nopCommerce generated markup was rid of all old-fashioned and semantically incorrect elements and approaches to make the system modern and much more appealing to developers and search engines.

The HTML Refactoring is not as widely talked about and advertised as the multi-store and multi-vendor support, which bring direct benefits to the nopCommerce store owner. The refactoring is a feature, which the developers will relate to. But as such it is extremely important. It will boost the theme development in the community and will allow nopCommerce developers to complete more quality nopCommerce projects much faster and with greater ease, which will again result in benefits for the store owners.

If you are a developer keen on looking at all the HTML Refactoring changes, please follow the changes in this nopCommerce branch:

http://nopcommerce.codeplex.com/SourceControl/network/forks/7Spikes/HtmlImprovement

This concludes our insight into the nopCommerce 3.0 major release. I hope you have found the series useful. Do not forget to send us your feedback and thoughts in the comments below or on the related facebook post on our facebook page.

Nopcommerce 3.0 will be released next week so stay tuned and do consider following us on Facebook, Twitter or Google+!