The new responsive theme in BV Commerce 2015 gets all of the attention, but what made that theme possible was the powerful enhancements to the theming architecture.
Themes of the Past
The biggest problem with themes before BVC 2015 was that they did not provide enough control over the site design. The reason was simple: a significant portion of the HTML was outside of the theme (e.g. templates and controls). Part of the reason that this was such a problem was that the HTML in many parts of BV Commerce 5 through 2013 was over 8 years old!
To modify this HTML to work with a specific layout, a designer was forced to alter files outside of the theme folder. This not only meant that the site design was no longer encapsulated in the theme folder but also that changes to non-theme files were now tied to a specific theme. Consequently switching themes, without reverting those changes, might cause unexpected results in other themes. Lastly, and perhaps most importantly, modifying files outside of the theme made it more difficult to upgrade to newer versions of BV Commerce.
Theming in BVC 2015
In BV Commerce 2015 this all changes. Rather than change files outside of the theme, files can now be overridden from inside the theme! Here's what can be overridden from a theme:
- Templates—category, product, kit, and custom page templates
- Pages in the site root
- Controls in the /BVModules/Controls/ folder
- Content Blocks
- Checkouts
In fact, the new responsive theme overrides a significant portion of the frontend files. Below is a screenshot that shows the new theme folder structure. The overridable items listed above have their own folders inside the theme, mirroring the folder structure of the /BVModules/ folder.
This gives designers ultimate flexibility to alter HTML for just about anything on the frontend of the website without making any changes outside the theme. For example, to change the markup of the login form, simply copy the /BVModules/Controls/LoginControl.ascx control (and its .vb code file) into the Controls folder of the theme and make the necessary changes there. BV Commerce will now automatically use the LoginControl control from the theme instead of the one in the /BVModules/Controls/ folder for all instances across the application; no additional code changes are necessary.
Functional Changes, Too
In addition to overriding the items above to alter their HTML, their VB.NET code can also be changed. That means templates, controls, and even content blocks & checkouts can be customized inside a theme. Going back to the LoginControl example above, custom code could be added to run after a user successfully logged in.
A New Way of Thinking
This powerful override functionality is a paradigm shift in how themes and customizations should be built. A designer or developer should strive to never alter code outside of the theme folder unless absolutely necessary. Keeping all custom code encapsulated inside the theme will significantly reduce the difficulty of future version upgrades.
There are, of course, some cases when a theme will not hold every piece of custom code. For example, when a new item is needed it is not something that can be overridden. The most common example of this is creating a new template.
The Downside
It's not all rosy with this powerful new architecture; there is a complexity trade-off. Beyond the initial learning curve, the ongoing challenge is keeping the copies of items in the theme up-to-date. For example, if a control is duplicated into a theme and in a subsequent version of BV Commerce a bug fix is made to that control, that bug fix will need to be applied to the control in the theme.