Work
ATG BluePrint Commerce On Demand
- Client
- ATG
- Project
- Commerce On Demand
ATG Commerce On Demand (COD) are available on a subscription and managed services basis. Whereas licensed customers usually build their own from scratch custom front-end and UI on top of the ATG commerce application, COD implementations involve less custom code and utilize more of the OOTB ATG provided commerce solutions. Often an implementations starting point would be the COD demo store “Sketch”. This store would then be customized and restyled to meet the COD customers needs, budgets and time frames.
Problem
As an extension of our relationship with ATG Product and Technology group, Media-Hive became involved in a number of the COD implementations. At the time, the baseline starting point for a project would be the sketch demo store. This store had not been designed or coded with consideration that it might be used as a foundation or template for new ecommerce implementations.
In many places the business logic of the application bubbled up into the UI and visual layer, and the store was very reliant on ‘old’ HTML techniques; tables for layouts, inline JS and styles and the JSP’s where structure in a way that meant even simple hierarchical changes in the output HTML would produce errors. Working with the P&T and internal UI team, we looked at totally refactoring the HTML base inline with more modern standards, componentized all the UI code so that the site was reduced to pure building blocks that could be reordered or renested with simple include changes and reproduced the original demo site and created from scratch 2 additional demo “skins”.
Solution
There were 3 steps involved in this project: breaking everything apart, creating the building blocks, rebuilding everything.
Step One - Breaking Everything Apart
We went through a lengthy process of going through every section of the entire ecommerce site, and breaking everything that was rendered into unique self contained blocks of UI. This was accomplished with a great deal of meetings where the team would literally draw red boxes around print outs of each and every page of the site.
Great care had to be taken to ensure that each of these blocks would be truly self contained, this close collaboration between the back-end and UI development teams as well as the UI Designers. At the end of this we had a list of every red box with what they needed to contain.
Step Two: Create the Building Blocks
Using the finding of step one, we were able to go away and create individual div contained blocks of HTML that could then be used to create the UI. We created 140+ of this blocks of code, which were termed “Gadgets”. Great care was taken when creating the HTML for them to make the code as semantically correct as possible.
The aim was to include no stylistic or positional markup in the rare Gadget code, they followed a number of semantic rules we created to keep code consistent. The aim here was to create small blocks of code that could be easily moved, styled, and/or extended by an implementation team. As we created the vanilla HTML, we worked with the back-end development team who was reapplying the JSP to make them render the business logic.
Step 3: Rebuilding Everything
Once we had all of the Gadget blocks, we recreated the original Sketch demo (adding a couple of UI tweaks as we went), and using the same gadget code, we created 2 additional ‘demo’ skins that could be used to demonstrate the flexibility of the code base. The demos relied on virtually no changes to the baseline Gadget code. So they represented what could be achieved through a combination of changing order and nestedness of the gadget code and CSS styling techniques.
Sketch Skin:
Coolwear Skin:
Argo Skin:
Outcome
The irony on this project is that since we completed it Media-Hive has become one of ATG’s preferred COD implementation partners. So we have become the target audience for the project that we worked on and delivered.ATG now has an application that is very modular in nature and that is founded on semantic markup. This means it is lighter weight, easier to maintain and style, it degrades gracefully and benefits from all of the accessibility benefits you get from semantic clean markup.An interesting side effect is that COD implementations have not become any shorter in length.
What seems to have happened is that now clients can get more of what they want for the same time-frame. The scope of the possibilities has become almost endless.This huge step forward is not the end of the line, and we’re already working with ATG on a set of new features for the next few releases that should further improve the implementation process and possibilities.
-
Tags: ATG, CSS, eCommerce, Javascript, User Interface Design