yet another coldfusion blog

Over the last few years I've devoted a lot of my development hours to building on top of the Mura CMS. During that time there has remained a bright and burning point of desire in the Mura community (and myself) for one key ingredient: Ecommerce. I've developed a couple of proprietary solutions, but never anything that was going to be flexible or configurable enough for general use. Until now, that is.

My latest project (Meld MiniCommerce) has finally provided Mura a full-cycle Ecommerce solution via a custom plugin. Now, before I get you too excited I should point out this isn't exactly a storefront application (hence the 'Mini' bit). Instead it is a kind of Ecommerce 'engine' that adds a product-agnostic shopping cart to Mura, which can then be processed through an online merchant like PayPal. Now, before I get you too disappointed (apologies for playing ping-pong with your emotions), installation of the plugin does allow you to instantly add configurable products to Mura, let people 'add to cart' them and then proceed to the checkout. This is only the smallest part of the plugin's functionality ... let me explain.

Mura and Page / Product

The first thing installing the MiniCommerce plugin will do is add a Class Extension to the Mura page called "Product". By creating a "Page / Product" in the Mura Site Manager instead of just a regular "Page", you basically turn the page into a purchasable product. MiniCommerce will automatically render an 'add to cart' form on the page, and the Class Extension variables like "Price", "Use Quantity" etc. will allow you to configure a basic product. The real power of this page comes in three parts: custom includes, custom Renderers, and Mura Events.

Product Type + Includes & Renderers

It is possible and in fact very easy to replace the basic "choose quantity/add to cart" form with one that contains custom attribute like size, color, edition, style, etc. The shortest route to doing this is by adding a new directory in the Mura /[siteid]/includes/display_objects/custom/ folder called 'meldminicommerce'. By placing a cfm file in here named product_[producttype].cfm, you can create a product template for a specific type of product. Take, for instance, a product type of "T-shirt". I can copy the default product template located at /plugins/[MiniCommerce]/includes/product_default.cfm and paste it into /[siteid]/includes/display_objects/custom/product_tshirt.cfm. I can then add the following code:

<cfsilent> <cfparam name="local.size" default="1" /> [ ... ] <cfif $.event().valueExists('cartProductBean') and not local.isUpdated and not local.isAdded> [ ... ] <cfset local.size = local.cartProductBean.getAttribute('size') /> </cfif> </cfsilent><cfoutput> [ ... ] <cfif $.content().getValue('useQuantity') eq true> <li> <label>#mmRBF.key('quantity')#</label> <input type="text" class="text small" value="#local.quantity#" name="quantity"> </li> </cfif> <li> <label>Size</label> <select name="attributes_size" id="attributes_size"> <cfloop list="S,M,L,XL,XXL" index="x"> <option value="#x#" <cfif x eq local.size>SELECTED</cfif>>#x#</option> </cfloop> </select> </li> [ ... ] </form> </div> </cfoutput>

By using the by-convention format of adding "attributes_" to my form field, MiniCommerce will realize that this is an attribute of the product. These values are automatically parsed out of the submitted form and stored as a JSON object with the product.

What's even cooler (sorry if I tend to geek myself out a little bit here) is that MiniCommerce will take any attributes added to the cart and convert the set into a unique but consistent UUID called 'attributeID'. In other words, a t-shirt with color: blue / size: Large will have a distinct but different attributeID to one with color: black / size: Large. This allows for consistency when adding and updating products to the cart. If somebody adds 3 white/Large shirts to the cart, then later adds 2 more, the combination of productID/attributeID will result in one record of 5 white/Large shirts rather than one of 3 and another of 2. This can be very important when adding specifically customized products and managing orders on the back-end.

If custom includes aren't your thing, then you can instead use a Mura Renderer to replace the product form. By listening for the event onPageProductBodyRender a developer can replace the form dynamically. All of the associated variables (productID, userID, etc.) are passed in the event, and the developer can then dynamically generate the replacement form.

Events & Renderers

MiniCommerce as an 'Engine'

Download Now!