Product variants

Fig. 1 – Variants in Tea Commerce

Tea Commerce Master Product

Fig. 2 – Master product and variants in Tea Commerce

Fig. 3 – Master product without variants in Tea Commerce

How to setup Tea Commerce Master products

1. The product Document Type

2. Set up the Tea Commerce section

3. Choose a Master product on one of your products

4. Print product info on your product page

How Tea Commerce Master products works

1. We query after e.g. the property “productPrice” on the product “Red”, with the library method GetProperty.
2. Tea Commerce will first query the node “Red” itself. If it has a property called “productPrice” and the property is not blank the search stops right here.
3. If nothing was found the search is continued up through the node tree starting at the node “Red”. Now it will then search through, the node “Product A1″ but also “Category A”, “Products”, etc. The search is done by xpathing the Umbraco cached XML, so performance is kept high.
4. If Tea Commerce still have not found anything it will find “Red”‘s Master product and based on this will do the same search up through the tree, hopefully finding what it was asked.

What is the use of Tea Commerce Master products?

Language localization of Tea Commerce products

One product in multiple categories

A concrete example

Example of the use of Master products

Tea Commerce links

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

How to do server side validation in Tea Commerce

The Umbraco XSLT library extension

1. Build a dll with the Umbraco library extension and upload it to the bin folder
2. Register your XSLT extension in the file /config/xsltExtensions.config
3. Make the method call in your xslt’s. Remember that the new extension must be registered in the xslt itself. New xslt’s automatically get your extension inserted into the xsl:stylesheet tag. You can make a new one and copy the entire top of that if you have allready made your cart xslt’s

Full XSLT library extension code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using TeaCommerce;
using TeaCommerce.Data;

namespace ServersideValidation {
  public class Library {

    public Library() {
      //This has to be here, because of the way umbraco runs xslt extension
    }

    public static string ValidateOrder( int currentStepId, int cartStep2Id ) {
      try {
        //Test to make sure we are not logged in at the back end
        var test = HttpContext.Current.CurrentHandler as umbraco.BasePages.UmbracoEnsuredPage;
        if ( test == null ) {

          //Get the order
          Order order = TeaCommerce.Razor.TeaCommerce.GetOrder();

          //If there is no order we redirect to step 1 of the cart
          if ( order == null || order.OrderLines.Count() == 0 )
            HttpContext.Current.Response.Redirect( umbraco.library.NiceUrl( cartStep2Id ) + "?validate=false", true );

          //If the current step is not step 1 we validate the data on that step
          if ( currentStepId != cartStep2Id ) {
            //Get the values we must validate
            string firstName = order.GetPropertyValue( "firstName" ),
                  lastName = order.GetPropertyValue( "lastName" ),
                  streetAddress = order.GetPropertyValue( "streetAddress" ),
                  zipCode = order.GetPropertyValue( "zipCode" ),
                  city = order.GetPropertyValue( "city" ),
                  email = order.GetPropertyValue( "email" );

            //Simple validation of the values
            if ( string.IsNullOrEmpty( firstName ) ||
                 string.IsNullOrEmpty( lastName ) ||
                 string.IsNullOrEmpty( streetAddress ) ||
                 string.IsNullOrEmpty( zipCode ) ||
                 string.IsNullOrEmpty( city ) ||
                 string.IsNullOrEmpty( email ) ) {
              //Go back to step 1 if validation fails
              HttpContext.Current.Response.Redirect( umbraco.library.NiceUrl( cartStep2Id ) + "?validate=false", true );
            }
          }
        }
      } catch ( Exception ex ) {
        return ex.Message;
      }
      return string.Empty;
    }
  }
}

The registration in Umbraco’s /config/xsltExtensions.config file

The method call in cartStep03.xslt (And presumably in subsequent steps)

<xsl:template match="/">

<xsl:variable name="step2PageId" select="umbraco.library:GetDictionaryItem('step2PageId')"/>
<xsl:value-of select="ServersideValidation:ValidateOrder($currentPage/@id, $step2PageId)" />

Tea Commerce links

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

What can I use Google Analytics e-commerce for?

Tea Commerce and Google Analytics e-commerce

Setting up Google Analytics e-commerce

How do I track e-commerce transactions?

1. Sign in to your account.
2. Click Edit next to the profile you’d like to enable.
3. On the Profile Settings page, click Edit next to Main Website Profile Information.
4. Change the E-Commerce Website radio button from No to Yes.

Tracking your e-commerce orders

Google analytics standard tracking code

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3982655-28']);
_gaq.push(['_trackPageview']);

/* INSERT E-COMMERCE TRACKING HERE */

(function () {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Generating the Tea Commerce order data with XSLT

Tea Commerce Google Analytics e-commerce tracking code

  
  
  
  
    
    _gaq.push(['_addTrans',
      '',           // order ID - required
      'runeswebshop.com',  // affiliation or store name
      '', // total - required
      '',             // tax
      '',// shipping
      '',        // city
      '',                                                        // state or province
      ''      // country
    ]);
    
    
     // add item might be called for every item in the shopping cart
     // where your ecommerce engine loops through each item in the cart and
     // prints out _addItem for each
    _gaq.push(['_addItem',
      '',               // order ID - required
      '', // SKU/code - required
      '',   // product name
      '',   // category or variation
      '',     // unit price - required
      ''                 // quantity - required
    ]);
    
    _gaq.push(['_trackTrans']); //submits transaction to the Analytics servers
  

Tracking Code with e-commerce tracking macro

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3982655-28']);
_gaq.push(['_trackPageview']);



(function () {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Google Analytics tracking code on the order confirmation page

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3982655-15']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);


_gaq.push(['_addTrans',
      '56',                 // order ID - required
      'runeswebshop.com',   // affiliation or store name
      '10400.0000000000',   // total - required
      '2600.00000000000000',// tax
      '0.00000',            // shipping
      'Herning',            // city
      '',                   // state or province
      '1'                   // country
    ]);


// add item might be called for every item in the shopping cart
// where your ecommerce engine loops through each item in the cart and
// prints out _addItem for each
_gaq.push(['_addItem',
      '56',                                 // order ID - required
      '8040000065',                         // SKU/code - required
      'Vedligeholdelsesfrit havemøbelsæt',  // product name
      'Havemøbler',                         // category or variation
      '8000.0',                             // unit price - required
      '1'                                   // quantity - required
    ]);


// add item might be called for every item in the shopping cart
// where your ecommerce engine loops through each item in the cart and
// prints out _addItem for each
_gaq.push(['_addItem',
      '56',           // order ID - required
      '1130000001',   // SKU/code - required
      'RENSDYRSKIND', // product name
      'Interiør',     // category or variation
      '1200.0',       // unit price - required
      '2'             // quantity - required
    ]);

_gaq.push(['_trackTrans']); //submits transaction to the Analytics servers


(function () {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Tea Commerce links

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

• When a new order is created the country of this order is set to the default country.
• You can change the country of the order via the JavaScript API or the .NET API at any time you wish.
• Contries holds a lot default information for the order including currency, shipping method, payment method and VAT group.

How does currencies work in Tea Commerce?

• When a new order is created the order currency is automatically set to the standard-currency on the orders current country.
• You can always change the orders currency via JavaScript API or. NET API.
• To be able to change to a specific currency, the currency must be available in the current country. This is done one each currency in the Tea Commerce section.
• Whenever you change the country, Tea Commerce will check if the current currency is allowed in the NEW country.
  • If the currency IS allowed in the new country, the currency stays the way it is.
  • If the currency IS NOT allowed in the country, the order’s currency is changed to the default currency of the new country.

What is languages in Tea Commerce?

1. To get the most out of languages in Tea Commerce, you must use a setup like the one in Tea Commerce Multilanguage Kit
2. Languages have nothing to do with countries or currencies!
3. The order’s umbracoLanguage consists of an ID that matches one of the Languages set up in umbraco’s “Settings”
4. Everytime a product is added to the order the umbracoLanguage of the order is set automatically.
5. When setting the umbracoLanguage Tea Commerce will start with the product node and look up the content tree to find the first node with a hostname attached.
6. As there can be more than one hostname on the node, Tea Commerce will first try and find one that matches the hostname currently used.
7. If it cannot find a match, it will just take the first one available.
8. The language of the hostname will then be added to the order.
9. If no language is found whatsoever, the language will be set to 0 and the order will just run without a language.

How does languages work in Tea Commerce?

1. It’s all about localization. If you have a multilanguageshop, using a setup like the one in our Tea Commerce Multilanguage Kit, there will be products in different language.
2. Every product have a master product which holds all the basic product information. The products themselves holds all the language specific information.
3. When a product is added to the order, the products master product is first found.
4. Then all the products linked to that master product is found
5. Tea Commerce will then add order line properties, from all the language specific products and, to the order line.
6. Any product that does not have a language will be will just be added with a language = 0 which mean default information.
7. When the order is requested by the JavaScript or the xslt Tea Commerce will merge the information into a full list of properties.
8. Properties with a language will overwrite those without a language
9. This means that you end up with language specific order line properties
10. Whenever you change the orders umbracoLanguage, the order line properties will change acordingly

Tea Commerce links

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

First upgrade Tea Commerce

All Tea Commerce’s Kit has been updated

• Tea Commerce Starter Kit
• Tea Commerce Demo Webshop
• Tea Commerce Multi Language Starter Kit

JavaScript API documentation has been updated

What has changed?

• umbracoLanguageId
• async
• successfn
• errorfn
• dataType
• properties

A few examples

addOrderLine

//BEFORE 1.4
TeaCommerce.addOrderLine(productid, quantity, true, function (data) {
    //Success function content
  }, function (data) {
    //Error function content
  }
);

//AFTER 1.4
TeaCommerce.addOrderLine(productid, quantity,
  {
  async: true,
  successfn: function (data) {
    //Success function content
  },
  errorfn: function (data) {
    //Error function content
  }
});

removeOrderLine

//BEFORE 1.4
TeaCommerce.removeOrderLine(productId, true, function (data) {
    //Success function content
  }
);

//AFTER 1.4
var settings = {
  async: true,
  successfn: function (data) {
    //When the server answers we update the orderline in the UI
    removeOrderLineFromUI(orderlineEle);
  } 
}
TeaCommerce.removeOrderLine(productId, settings);

Tea Commerce links

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

Affected Tea Commerce methods

• TeaCommerce.invokeXSLT(xsltFile, nodeId, umbracoLanguageId, async, successfn, errorfn, dataType )
• TeaCommerce.updateOrderLineProperty(nodeId, propertyAlias, propertyValue, umbracoLanguageId, async, successfn, errorfn)
• TeaCommerce.updateUniqueOrderLineProperty( orderLineId, propertyAlias, propertyValue, umbracoLanguageId, async, successfn, errorfn)
• TeaCommerce.updateOrderLineProperties(nodeId, propertyList, umbracoLanguageId, async, successfn, errorfn)
• TeaCommerce.updateUniqueOrderLineProperties(orderLineId, propertyList, umbracoLanguageId, async, successfn, errorfn)

How to quickly fix your website

1. Make sure that all your products have an associated domain

2. Update Tea Commerce to version 1.3 +

/*
When the currency is changed we need to update product prices
all over the page.
To do this, we need to know what xslt's to run to get the desired html.
We have written the name of the xslt's in each xslt, and can fetch it from the html.
*/
function updatePageUI() {
  /*
  All xslt's that can be invoked in this way have information in a div
  with the class "invokeXSLT". For every one of them we update the UI.
  */
  jQuery('div.invokeXSLT').each(function () {
    var invokeXSLT = jQuery(this),
        parent = invokeXSLT.parent(),
        htmlFromServer = TeaCommerce.invokeXSLT(invokeXSLT.text(), _nodeId, false);
    parent.before(htmlFromServer).remove();
  });
}

/*
When the currency is changed we need to update product prices
all over the page.
To do this, we need to know what xslt's to run to get the desired html.
We have written the name of the xslt's in each xslt, and can fetch it from the html.
*/
function updatePageUI() {
  /*
  All xslt's that can be invoked in this way have information in a div
  with the class "invokeXSLT". For every one of them we update the UI.
  */
  jQuery('div.invokeXSLT').each(function () {
    var invokeXSLT = jQuery(this),
        parent = invokeXSLT.parent(),
        htmlFromServer = TeaCommerce.invokeXSLT(invokeXSLT.text(), _nodeId, _languageId, false);
    parent.before(htmlFromServer).remove();
  });
}

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

How to use the Tea Commerce Razor API

@using TeaCommerce.Razor
@using TeaCommerce.Data

Order lines in the cart:
@{
  Order order = TeaCommerce.GetOrder();
  if (order.OrderLines.Count() > 0) {
  

    @foreach (OrderLine orderline in TeaCommerce.GetOrder().OrderLines) {
      

        @orderline.Properties.Single(p => p.Alias.Equals("nodeName") && p.UmbracoLanguageId == order.UmbracoLanguageId).Value
      
    }
  
  }
}

Tea Commerce Razor API

namespace TeaCommerce.Razor {
  public class TeaCommerce {

    /// <summary>
    /// Indication if current customer has an order
    /// </summary>
    public static bool HasOrder()

    /// <summary>
    /// Generates a Json string representing the current order
    /// </summary>
    public static Order GetOrder()

    /// <summary>
    /// Indication if current customer has an finalized order
    /// </summary>
    public static bool HasFinalizedOrder()

    /// <summary>
    /// Get the users current finalized order
    /// </summary>
    public static Order GetFinalizedOrder()

    /// <summary>
    /// Get the users current order
    /// </summary>
    public static Order GetOrder( long orderId )

    /// <summary>
    /// Gets all available shipping methods filtered by the current country
    /// </summary>
    public static IEnumerable<ShippingMethod> GetShippingMethods()

    /// <summary>
    /// Gets all available payment methods filtered by the current country
    /// </summary>
    public static IEnumerable<PaymentMethod> GetPaymentMethods()

    /// <summary>
    /// Gets all available countries
    /// </summary>
    public static IEnumerable<Country> GetCountries()

    /// <summary>
    /// Gets the current country
    /// </summary>
    public static Country GetCurrentCountry()

    /// <summary>
    /// Gets all available currencies
    /// </summary>
    public static IEnumerable<Currency> GetCurrencies()

    /// <summary>
    /// Gets the current currency
    /// </summary>
    public static Currency GetCurrentCurrency()

    /// <summary>
    /// Formats a price with the current currency's culturename
    /// </summary>
    /// <param name="price">The price as a decimal</param>
    /// <returns>The formatted price as string</returns>
    public static string FormatPrice( decimal price ) 

    /// <summary>
    /// Formats a price with the chosen culturename
    /// </summary>
    /// <param name="price">The price as a decimal</param>
    /// <param name="cultureName">A culture name</param>
    /// <returns>The formatted price as string</returns>
    public static string FormatPriceWithSpecificCulture( decimal price, string cultureName )

    /// <summary>
    /// Formats a price with the current currency's culturename
    /// No currency symbol will be added
    /// </summary>
    /// <param name="price">The price as a decimal</param>
    /// <returns>The formatted price as string</returns>
    public static string FormatPriceNoSymbol( decimal price )

    /// <summary>
    /// Formats a price with the chosen culturename
    /// No currency symbol will be added
    /// </summary>
    /// <param name="price">The price as a decimal</param>
    /// <param name="cultureName">A culture name</param>
    /// <returns>The formatted price as string</returns>
    public static string FormatPriceNoSymbolWithSpecificCulture( decimal price, string cultureName )

    /// <summary>
    /// Gets the stock of a specific product
    /// </summary>
    /// <param name="nodeId">Node id of the product</param>
    /// <returns>Will return null if the product does not use stock</returns>
    public static decimal? GetStock( int nodeId )
  }
}

Tea Commerce links

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

The Goal

Assumptions

The solution

The four products for this tutorial

1. License Kit package for Umbraco
2. Asymmetric-key generator
3. License generation for Tea Commerce
4. License check for the product

License Kit package for Umbraco

With the license kit you get

1. Changes to Tea Commerce’s basic configurations
2. Document Types
3. Templates
4. CSS
5. JavaScript
6. XSLT’s and macros
7. Pages and product in the content section

Asymmetric-key generator

License generation for Tea Commerce

License check for the product

License webshop Tutorial – This is it

1. Download the stuff to use in this tutorial

1. Tea Commerce License Kit package for Umbraco
2. LicenseKit projects (. NET VisualStudio solution)

2. Install License Kit Packages

3. Generate a private/public key pair

The theory behind

Settings you can change

4. Extending the webshop

The Theory behind

Settings you can change

• E-mail – You can change as much as you want on the email being sent. In the example we have hardcoded the subject, send, etc., but you can retrieve this information from other sources if you like.
• E-mail body – The name of the xslt file is hardcoded. You can change this or find another way to generate the e-mail body.
• Private key file name – In this example the name of this file comes from the product node where it has been entered. You could also hard code the location or find another way to link a product along with its private key. The important thing is to keep the private key secure. The way I’ve done it is safe, but also flexible, as you could easily create new licensed products.
• The name of the license file – Right now I call the license file for “[productName]-[domain].lic”. You can call it anything, as we check all *.lic files to find a proper license, in the product project.
• Private key – You can choose to move or rename your private key file.
• productSaltLength – Must just fit with the salt that is used to decrypt the license.

5. Check the license in your product

The theory behind

Settings you can change

• publicLicenseKey – The public key is hardcoded into the project, but you could store it on the server as a file. Depending on the situation it is convenient to keep it in the code though, as everything will be in one place.
• productSaltLength – Must fit with the length of the salt that is used to encrypt the license.
• Location of the license file – In this example we place it in the bin folder. It may be placed wherever you like as long LicenseHelper can get to its contents.

Many thanks to

Tea Commerce links

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

Large ambitions

The solution

Products and Recipes

ImageGen

Social Media

Image Bank

Contour

Google SiteSearch

VAT scenarios

1. The customer is from Denmark and must therefore pay the Danish VAT in any case.
2. The customer is from an EU country and does not have a valid VAT number. The customer will have to pay Danish VAT.
3. The customer is from an EU country and have a valid VAT number. The customer will not pay VAT.
4. The customer is from a country outside the EU and therefore need not pay VAT.

Note the following

The full example

using System.Collections.Generic;
using System.Linq;
using TeaCommerce.Data;
using TeaCommerce.Data.Extensibility;
using TeaCommerce.WebShop.Integration.DB;
using umbraco;

namespace TeaCommerce.WebShop.Integration {
  public class LicenseExtension : ITeaCommerceExtension {

    const long danishVATGroupId = 1;
    const long noVATGroupId = 2;

    /// 

    /// Initialize wil automatically be run by Tea Commerce on apllication load.
    /// Any events you want to hook into is done here.
    /// 
    public void Initialize() {
      //The only custom thing we want to do happens after the order has been finalized
      WebshopEvents.OrderPropertiesUpdated += WebshopEvents_OrderPropertiesUpdated;
      WebshopEvents.CountryChanged += WebshopEvents_CountryChanged;
    }

    void WebshopEvents_CountryChanged( Order order, Country country ) {
      ValidateAndSetVat( order );
    }

    void WebshopEvents_OrderPropertiesUpdated( Order order, IEnumerable<OrderProperty> properties ) {
      OrderProperty vatProperty = properties.SingleOrDefault( p => p.Alias.Equals( "companyVATNo" ) );
      if ( vatProperty != null )
        ValidateAndSetVat( order );
    }

    #region Private methods

    /// 

    /// Checks the VAT number in the european unions own database
    /// 
    /// The customer VAT number
    /// The customers country code
    /// true if the VAT number is a valid (EUROPEAN only)
    private bool CheckVatNumber( string vatNumber, string countryCode ) {
      bool isValid = false;
      string name = string.Empty, address = string.Empty;
      if ( !vatNumber.Equals( string.Empty ) && !countryCode.Equals( string.Empty ) ) {
        CheckVatService.checkVatRequest cvr = new CheckVatService.checkVatRequest( countryCode, vatNumber );
        CheckVatService.checkVatPortTypeClient cvptc = new CheckVatService.checkVatPortTypeClient();
        cvptc.checkVat( ref countryCode, ref vatNumber, out isValid, out name, out address );
      }
      return isValid;
    }

    /// 

    /// Validates the order country and VAT number and sets the VAT group accordingly
    /// 
    private void ValidateAndSetVat( Order order ) {
      if ( order.Country.CountryCode.ToLower().Equals( "dk" ) ) {
        //We are in Denmark and 25% VAT is applicable
        order.VATGroupId = danishVATGroupId;
      } else {
        //The country is not Denmark. Where is it?
        using ( TeaCustomDataContext dc = new TeaCustomDataContext( GlobalSettings.DbDSN ) ) {
          if ( dc.Tea_EuropeanCountries.Any( ec => ec.CountryId == order.CountryId ) ) {
            //The country is a member of the European Union and we need to check the VAT number
            OrderProperty vatProperty = order.Properties.SingleOrDefault( p => p.Alias.Equals( "companyVATNo" ) );

            if ( vatProperty != null && CheckVatNumber( vatProperty.Value, order.Country.CountryCode ) )
              //We are in Europe and the customer has a valid VAT number - 0% VAT is applicable
              order.VATGroupId = noVATGroupId;
            else
              //We are in Europe and the customer does not have a valid VAT number - 25% VAT is applicable
              order.VATGroupId = danishVATGroupId;

          } else {
            //The country is NOT a member of the European Union - 0% VAT is applicable
            order.VATGroupId = noVATGroupId;
          }
        }

      }
      order.Save();
    }
    #endregion
  }
}

Tea Commerce links

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