**Update**

Since we launched Tea Commerce back in November 2010 much has happened. We have launched a starter kits that you can install – its a complete Umbraco/Tea Commerce site so you can quickly and easily get started with an Umbraco ecommerce solution.

Getting started

So you downloaded the latest version of Tea Commerce and installed it – now what to do? In this blog post i will walk you though a very simple setup of a web shop on top of a umbraco runway install. The web shop will sell four products and the shop will be an american shop with USD as the currency. So lets start.

The initial setup of Tea Commerce

Country

Lets start by setting up the “United States” as a country. Make it the default country – as this is the country we “expect” customers to shop from and based on that we can calculate the prices from the country VAT. ( The selected VAT group in my example is 0% as we doesn’t need to calculate VAT in this simple setup )

Currency

With Tea Commerce comes 3 standard currencies – DKK, EUR and USD. Let me explain the different properties of a Currency.
- ISO code – used to passed along to payment providers and can be used in the UI
- Price field – this is the property alias for where to find the USD price on a product node from Umbraco
- Culture name – is used to format the currency

E-mail template

For the shop to send a confirmation e-mail to the customer and the shop owner we have to setup the e-mail settings. These properties should be pretty basic to setup
Remember – if you want to send email you will have to specify the smtp in your web.config

Products

Defining the product document type

One of the great thing about Umbraco is the possibility to create almost anything with document types and it’s properties. Of course Tea Commerce is build with this in mind, so all you products/product categories etc. you will create as your familiar Umbraco document types. For my demo i have only made a product document type as it’s enough to show how to do it.

Let me walk you though the properties:
- Product name – is used in the standard teaCommerceAdminOrder.xslt and teaCommerceEmailTemplate.xslt to output the product name ( this is for setups with product variants – for simple setups you could use nodeName in the XSLT files instead of productName )
- Product number – again used in the standard XSLT files
- Image – What to say :)
- Product price USD – this is the USD price field that we specified earlier for the USD currency

Display the products

Now we need to create some products and display them. Lets create a XSLT file and matching macro to output the products. To display the products i have created a text page “Products” and 4 products below it. Below is the XSLT and screenshots of the products in Umbraco and when displayed at the website.

<xsl:for-each select="$currentPage/Product [@isDoc]">
  <div>
    <h3><xsl:value-of select="@nodeName"/></h3>
    <xsl:if test="./image != ''">
      <img src="{umbraco.library:GetMedia(./image, false)/umbracoFile}" style="float: none; padding: 0;" />
    </xsl:if>
    <span><xsl:value-of select="productPriceUSD"/></span>
    <a href="#" class="productAddToCart" nodeid="{./@id}">Add to cart</a>
  </div>
</xsl:for-each>

Adding order lines the cart

Configure order line properties to copy

Next step is to have the different products added to a cart. Before we make the javascript to do this, we have to go back to the “General settings” for Tea Commerce. When we add order lines to the cart, Tea Commerce need to know which properties to copy from the product node – as these properties can we used in the email template and the admin interface. These properties is configured in the “Order line property aliases” field. In the standard admin and email XSLT i know that “productName” and “productNumber” is used so I specify these two.

Adding order lines with javascript

Tea Commerce has an extensive javascript API to do a lot of the shop functionality through /base calls – but in this post i will only touch about three of the API methods – to read more about the javascript API, please read my colleague Rune’s blog.
Before we can do anything through javascript we need to have some script references in the head section – i have created a script file “default.js” where i will implement the javascript necessary to run my specific web shop.

<script type="text/javascript" src="/scripts/TeaCommerce/teaCommerce.js"></script>
<script type="text/javascript" src="/scripts/default.js"></script>

default.js

/* When we add product to cart */
jQuery(".productAddToCart").live("click", function () {
  var nodeId = jQuery(this).attr('nodeid');

  /* Add orderline is called using the Tea Commerce javascript API */
  TeaCommerce.addOrderLine(nodeId, 1, false);
    
  return false;
});

Now when i click the “Add to cart” the product is added as an order line to my cart – BUT at the moment the content of the cart isn’t displayed – lets do that as the next thing

Building a mini cart

Before making my mini cart XSLT macro, I will make my checkout pages as i need to link to them in my minicart, so i created a “Cart” page with two subpages – “Personal information – Step 01″ and “Order confirmation – Step 02″.
Next step is to create the mini cart XSLT and insert the macro in my text page template so the customer can see what is in his cart. In my demo setup i haven’t used a lot of nifty javascript so the customer has to refresh with F5 to get the mini cart to display the newly items added to the cart :)

<xsl:variable name="order" select="teacommerce:GetOrderXml()"/>

<xsl:if test="$order/@id != ''">
  <div>
    <h2>Mini cart</h2>
    <xsl:for-each select="$order/orderLine">
      <div><xsl:value-of select="./properties/nodeName"/> - <xsl:value-of select="./@totalPriceFormattedNoSymbol"/></div>
    </xsl:for-each>
    Total: <xsl:value-of select="$order/@totalPriceFormattedNoSymbol"/>
    <a href="/cart/personal-information-step-01.aspx">Checkout</a>
  </div>
</xsl:if>

Building the checkout – step 1

Now that the customer has order lines in his cart – he want to go through the checkout flow. In the mini cart there is a “Checkout” link that will take the customer to step 1 of the checkout flow.

Personal information form

For step 1 i have created an XSLT macro and inserted it on the step 01 page. This step will let the customer fill in some information needed to ship the products to him.

<xsl:variable name="order" select="teacommerce:GetOrderXml()"/>

<xsl:if test="$order/@id != ''">
  <div id="personalInformation">
    <span>Company:</span><input type="text" id="company" /><br/><br/>
    <span>First name:</span><input type="text" id="firstName" /><br/><br/>
    <span>Last name:</span><input type="text" id="lastName" /><br/><br/>
    <span>Email:</span><input type="text" id="email" /><br/><br/>
    <span>Street address:</span><input type="text" id="streetAddress" /><br/><br/>
    <span>Zip code:</span><input type="text" id="zipCode" /><br/><br/>
    <span>City</span><input type="text" id="city" /><br/>
    <a id="confirmOrder" href="#">Confirm order</a>
  </div>
</xsl:if>

Order properties

Order properties is a property bag in the Tea Commerce API, which means that there is no limit to what you can add as order properties.
Important To give the ability to search orders by customer name and to send email to the customer, Tea Commerce needs to know the order property names of these three. This can be configured in “General settings” in the Tea Commerce custom section. Please specify the order property names – as default values the system uses “firstName”, “lastName” and “email”.

Confirm order

Before we can click the “Confirm order” in this demo setup and go to the next step we need to specify the “Default continue URL” in “General settings”. Tea Commerce will redirect to this URL when a payment provider ( a payment method uses a payment provider ) makes a positive feedback about a payment. In my demo shop i will use the “Account” payment method that uses the default Tea Commerce payment provider.

Now that we have specified these things we are ready to create the javascript that will do the magic. The javascript is hooked up to the “Confirm order” click event, and when its clicked these things happens:
- Build a an array with the information to save as order properties and send it to the server
- Set the payment method to “Account” ( id = 2 )
- Go to payment – the default payment provider in Tea Commerce – will finalize the order, send a confirmation email and redirect to the “Default continue URL” ( this is the step 2 page in my demo )

/* The confirm order step of the cart */
jQuery('a#confirmOrder').live("click", function () {
  var personalInformation = jQuery("#personalInformation");

  /* We fetch the information from the form and creates
    an object that can be sent to the server as a form
    POST submit */
  var formObj = {
    "company": personalInformation.find("#company").val(),
    "firstName": personalInformation.find("#firstName").val(),
    "lastName": personalInformation.find("#lastName").val(),
    "email": personalInformation.find("#email").val(),
    "streetAddress": personalInformation.find("#streetAddress").val(),
    "zipCode": personalInformation.find("#zipCode").val(),
    "city": personalInformation.find("#city").val()
  };

  /* The properties is sent to the server with a syncronous call
    This way we lock the UI and can redirect the user.*/
  TeaCommerce.updateOrderProperties(formObj, false);
  TeaCommerce.setPaymentMethod(2, false);
  TeaCommerce.goToPayment();
  return false;
});

Building the checkout – step 2

Now that the customer has recieved his email, the order will be finalized and his cart is empty again. But to show exactly what the customer bought, I have a confirmation page that will display the personal information entered in the previous step and his order lines.

<xsl:variable name="order" select="teacommerce:GetFinalizedOrderXml()"/>
  
<xsl:if test="$order/@id != ''">
  <div>
    <span>First name:</span><xsl:value-of select="$order/properties/firstName"/><br/>
    <span>Last name:</span><xsl:value-of select="$order/properties/lastName"/><br/>
    <span>Email:</span><xsl:value-of select="$order/properties/email"/><br/>
    <span>Street address:</span><xsl:value-of select="$order/properties/streetAddress"/><br/>
    <span>Zip code:</span><xsl:value-of select="$order/properties/zipCode"/><br/>
    <span>City:</span><xsl:value-of select="$order/properties/city"/><br/>
    
	<h2>Orderlines</h2>
    <xsl:for-each select="$order/orderLine">
      <div><xsl:value-of select="./properties/nodeName"/> - <xsl:value-of select="./@totalPriceFormattedNoSymbol"/></div>
    </xsl:for-each>
    Total: <xsl:value-of select="$order/@totalPriceFormattedNoSymbol"/>
  </div>
</xsl:if>

The end

Thats it – I have created a simply web shop and hope that you got the basic knowledge to begin setup your own web shop in Umbraco, using Tea Commerce. Please ask any questions regarding this basic demo shop or tell me what you would like to see in my next blog post – where I will dive deeper into what is possible with Tea Commerce