Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kalle Ekstrand 181 posts 259 karma points c-trib
    Sep 20, 2012 @ 16:52
    Kalle Ekstrand
    0

    Levels of variants on one product?

    Hello, would it be possible to work with 3 levels of variants on one product? for example:

    Product
    - Pattern
    - Colour
    - Size

     

  • Rune Grønkjær 1296 posts 2863 karma points
    Sep 21, 2012 @ 19:31
    Rune Grønkjær
    1

    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:

    2.On your product make a multinode treepicker to choose the variants

    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. :)

    /Rune

     

     


Please Sign in or register to post replies

Write your reply to:

Draft