Umbraco e-commerce webshop

UPDATE

As many readers of my blog probably have discovered Tea Commerce have allready been released. Read much more about its features here at the official website. Lots of cool Tea Commerce websites are being launched and we sell licenses to all continents of the globe. An amazing feeling.

---

Right now we are putting the final touches to a super exciting Umbraco project at Tea Solutions. So exciting that I must share it with you.

Very recently I was in Copenhagen for a small Umbraco meetup with Anders Burla and a few other Umbraco developers. The theme of the day was not established in advance, so all subjects where open. The biggest talking point was the lack of an inexpensive e-commerce software for Umbraco. Not only should it be cheap, it should also be easy to set up for a not so technical web-designer/developer.

After the meeting it was clear that there is a need for an Umbraco web shop. All the way home we used the time to brainstorm about a possible product, and came up with a solution that would not be too expensive to produce.

The big idea for a Umbraco e-commerce solution

The project is called Tea Commerce and is an plugin to Umbraco using javascript to access an e-sales API on the server, developed by ourselves. The plugin consists of three parts.

• An extensive javascript API and related server REST API
• An xslt library for Umbraco
• A server kernel API used by the two above. This API might be accessible by third party developers. This part, however, are not of the highest priority at present.

Common to all three is that each, in their own way, creates an interface to a webshop’s basket, orders and options. However, they each take a different approach and have different security clearances.

Tea Commerce products

Each developer will have 100% freedom to build he’s or her products, variants and any related products in Umbraco. Any Umbraco node / page can be a product, as long as it has a price. We do NOT offer a large product catalog system. In contrast we offer will offer freedom in creating and maintaining products in the structure that you are accustomed to from the development of ordinary Umbraco websites.

You can add as many or as few data to a product that you want. Users or owners of the webshop will not be confused by a lot of product fields, which are not required. Important fields such as price and stock condition is controlled with some simple settings in the backend.

Variants of products

Basically, we support only one variant type. So for example color or size, but not both. The idea is to have the main product in the Umbraco node tree with all variant being subnodes. When a variant is put in the basket the developer chooses whether to pull information from the variant, or the main product.

In principle, you could have several variant types, but in this model it would require even more layers of Umbraco nodes, which would complicate maintenance. Depending on the task, the variants could undoubtedly be solved in other, more inventive ways.

Tea Commerce core API

The core API is the hub of the system. Nothing can be done without the Tea Commerce core, which ensures uniformity in the use of the system. The API consists of some controller classes, from which one can retrieve or change its data. The core can access any order, old as well as new. This is also the case with the Tea Commerce settings, which can also be accessed and edited with the core controllers.

Caching

The main storage device is the database which must contain the correct data at all times. A system like this could make many calls to the database, especially for pulling data out. If you have a small basket on all of the websites pages, this will be loaded each time a page is opened and again when an orderline is created or edited.

In order to speed up the system we use the Application cache, alongside with the database. This ensures the data to be close at hand and we save the system for a lot of trips in the database. The core ensures that all necessary objects are cached and keeps the database in sync with the cache.

We keep the data in the cache and ensures that all changes are seen in both data stores simultaneously. This course, provides some challenges to keep consistency in data. To overcome this we have created some “bottlenecks” through which all modifications must occur. In this way, we do not risk the database and cache to get out of sync with each other.

In order not to overload the cache we set a relatively short time-out to our objects in the cache. This timeout must obviously support the users navigation pattern on the page, so the cache is maintained as long as the user clicks around the web shop.

XSLT library

A small library for Umbraco initially provides the basket contents as XML and render it in all the Umbraco xslt files. The system is simple and effective and based on the same model as the umbraco.library. We still do not know how many functions will be necesary in our Umbraco library, so for now, it will only extract data.

Tea Commerce’s Javascript API

This part of course had my greatest interest from the beginning, since it is one of my core specialties. The whole idea of the system is based on a JavaScript API that can / should be used for all commands to the server. Basically the system will be created so you can make the whole setup, using only javascript. If you want to.

With javascript you will be able to:

• Adding one or more order lines to the basket
• Update the order lines in the cart
• Add optional information to one or more order lines
  • Could be the name, color, size, etc., etc.
• Delete one or more order lines
• Retrieve cart details
• Add optional information to the cart
  • Could be the customer information, notes or data about gift wrapping. The sky should be the limit.
• Select country, currency, tax groups, delivery, etc..

All calls to the server is done with jQuery’s ajax and it is therefore a necessity to have included jQuery on the page. All calls to the server will have JSON data returned. Create one or more order lines, and the new order lines will be returned. Delete or change order lines and you are returned the affected lines. Furthermore, the API lets you easily subscribe to events fired when the basket is updated, or whenever there are any errors. An error could be if it is attempted to add a larger quantity of a product to the cart than is in stock.

With the return data and update event, the page can be changed on the fly and give the user a good experience. An example would be to update a small cart and show the user which order lines that have been changed. When deleting an item, you can animate it away from the basket or make a nice effect when an item is added.

XSLT invocation

We have made it possible for javascript to request any xslt file from the Umbraco solution. With our API, it will be possible by simply sending the ID of the page that the xslt should be based on. Only the xslt’en will be run, and not a whole lot of other loads of Umbraco templates and umbraco document types, etc.

What do we need it for?
The great thing is, that you can make a xslt for showing a basket. When the page is loaded the xslt is used with a macro like allways. Then, when updating the basket contents, you can generate and download the same html with ajax. That way you can control your html in one place, but use it even more places than usual. The alternative is to let the javascript write the html AND additionally write it with xslt on the first load.

Security in Tea Commerce

Others before us have built webshops based on javascript. Our javascript however is just as a shell on top of the server API, which takes care of all data handling. Sessions on the server saves the IDs of the user’s cart and other data. The cache and the database keeps the data and an advanced controller structure make the data available.

Javascript’s and xslt’s only have access to their own order object and they have no influence in what order they are viewing. This structure ensures that you can not access other people’s orders and therefore can not change them for your own benefit or steal data. We believe that our approach ensures the shop against malicious attacks from hackers.

Backend and administration

We plan that this part should be as simple as possible. The system must be cheap and removing advanced UI saves a lot of time. While other e-commerce systems have a huge back end, we aim to include only the most necessary items. You have to make some general settings such countries, currencies, VAT groups, etc. In addition, of course, you should be able to handle the orders, which are produced by the system.

The entire backend is built into Umbraco and builds on the same structure and setup as Umbraco’s own Content, Media, etc. Node structure gives a good overview of the user’s options while providing a consistent user experience for the entire system.

Rounding

Thereby my review of the project called Tea Commerce. We have set an introduction price of the product to €179.00 ex. VAT. The price will not be much higher when we raise it in 2011, so even a budget of an 1500 dollars, could afford a webshop. The system will be ultra simple to set up and if a website already have a product catalog in umbraco Tea Commerce could be integrated without having to modify the products.

I’m very excited about the finished product. Initially, we must be ready with a demo of the system for 19 November when we go to Umbraco UK Festival – Copenhagen where you can see Tea Commerce with own eyes. Then sign up for the event so you can hear our little talk and ask questions. Alternatively you are more than welcome to write to me.

Also, you would want to follow my colleague and co-developer Anders Burla who, like myself, will be blogging about Tea Commerce here the next weeks. Anders’ first post can be read here and have a more business-minded entrance to the Tea Commerce.

Tea Commerce links

• Official Tea Commerce Website
• Tea Commerce Documentation
• Tea Commerce Multilanguage Kit
• Tea Commerce Starter Kit
• Tea Commerce Demo Webshop