Hi Kalle,

Thanks for creating the question here.

Yes, you can easily do that. Especially because the variants does not influence the price. I have just made a setup for another customer that can do it. It takes some xslt (or razor) magic, but it will work like a charm and you can do any number of variants.

Note: This setup will not allow variants to be dependent on each other! E.g. you cannot say in green you can have size 41 and 42 and in blue you can have size 31 and 32. The variants must all mix!

My example just lists the variants in select boxes. You can do anything with them as they are just normal Umbraco nodes.

What you do is:

1.Create your variants somewhere in your node tree:

3. Now all you need to do is list the nodes on your product and this is where the magic happens. First get the variant options:

<xsl:variable name="variantOptionIds" select="teacommerce:GetPropertyXML($variant, 'variantOptions')//nodeId" />
<xsl:variable name="variantOptions" select="$currentPage/ancestor-or-self::root/VariantGroup//VariantOption [@id = $variantOptionIds]" />

4. Then loop them

<xsl:if test="count($variantOptions) &gt; 0">

  <div id="variants" class="noPrint">


    <xsl:call-template name="writeVariantGroup">
      <xsl:with-param name="variantOptions" select="$variantOptions" />
    </xsl:call-template>

  </div>

</xsl:if>

5. Your writeVariantGroup template

<xsl:template name="writeVariantGroup">
  <xsl:param name="variantOptions" />

  <xsl:variable name="firstVariant" select="$variantOptions[1]" />
  <xsl:variable name="firstVariantGroup" select="$variantOptions/ancestor-or-self::VariantType[1]" />
  <xsl:variable name="firstVariantGroupId" select="$firstVariantGroup/@id" />
  <xsl:variable name="memberVariantFromGroup" select="$memberVariantOptions [count(./ancestor-or-self::VariantType [string(@id) = string($firstVariantGroupId)]) &gt; 0]" />
  <xsl:variable name="allVariantsInGroup" select="$variantOptions [count(./ancestor-or-self::VariantType [string(@id) = string($firstVariantGroupId)]) &gt; 0]" />
  <xsl:variable name="variantsInGroup" select="$allVariantsInGroup [(string($memberVariantFromGroup/@id) != '' and $memberVariantFromGroup/@sortOrder - 1 &lt;= @sortOrder and $memberVariantFromGroup/@sortOrder + 1 &gt;= @sortOrder) or string($memberVariantFromGroup/@id) = '']" />

  <xsl:variable name="variantsNotInGroup" select="$variantOptions [count(./ancestor-or-self::VariantType [string(@id) != string($firstVariantGroupId)]) &gt; 0]" />

  <xsl:choose>
    <xsl:when test="string($member/@id) != ''">
      <xsl:if test="count($variantsInGroup) &gt; 0">
        <div class="variantGroup">
          <label for="variant{$firstVariantGroupId}">
            <xsl:value-of select="$firstVariantGroup/@nodeName"/>
          </label>
          <select class="variant" name="variant{$firstVariantGroupId}" id="variant{$firstVariantGroupId}" variantGroupName="{$firstVariantGroup/@nodeName}">
            <xsl:apply-templates select="$variantsInGroup" mode="variantOption" />
          </select>
        </div>
      </xsl:if>
    </xsl:when>
    <xsl:otherwise>
      <xsl:if test="count($allVariantsInGroup) &gt; 0">
        <div class="variantGroup">
          <label for="variant{$firstVariantGroupId}">
            <xsl:value-of select="$firstVariantGroup/@nodeName"/>
          </label>
          <select class="variant" name="variant{$firstVariantGroupId}" id="variant{$firstVariantGroupId}" variantGroupName="{$firstVariantGroup/@nodeName}">
            <xsl:apply-templates select="$allVariantsInGroup" mode="variantOption" />
          </select>
        </div>
      </xsl:if>
    </xsl:otherwise>
  </xsl:choose>




  <xsl:if test="count($variantsNotInGroup) &gt; 0">
    <xsl:call-template name="writeVariantGroup">
      <xsl:with-param name="variantOptions" select="$variantsNotInGroup" />
    </xsl:call-template>
  </xsl:if>

</xsl:template>

6. The variant option

<xsl:template match="VariantOption" mode="variantOption">

  <option value="{@id}" variantName="{@nodeName}">
    <xsl:value-of select="@nodeName" />
  </option>

</xsl:template>

7. Do some javascript to send the variant information to Tea Commerce when the product is added to the cart

variant = product.find('select.variant')

properties = {}

variant.each(function(i){
  var select = jQuery(this),
      variantGroupName = select.attr('variantGroupName'),
      selectedOption = select.find(':selected'),
      variantName = selectedOption.attr('variantname'),
      variantId = selectedOption.val(),
      propertyPrepend = 'variant' + i;
  
  properties[propertyPrepend + 'GroupName'] = variantGroupName;
  properties[propertyPrepend + 'Name'] = variantName;
  properties[propertyPrepend + 'Id'] = variantId;
});

8. Send the properties with the addUniqueOrderLine method. Orderlines must be unique to let the customer add the same product multiple times with different variants.

That’s it. :)

is working on a reply...