Hi Bjarne

One way to show related products is to use the uComponent multi tree picker and have a xPath expression that only allows the end user to select products. Then you get a list of ids in your xslt and you can use the getXmlNodeById to get the xml for that product. You can se how that is done in the featured products box xslt in the starter kit.

Kind regards
Anders

Hi Anders..

Okay, but the end user have to select the products.. and if more products is added he also have to pick them if these products should be listed?

Of cource this allow the end user to pick any of the product accross the categories.. but what I had in mind, was automatically list the products from the category except the shown product..

So if I am able to get the current product og the current category, I might be able to list the other product from the category..

Bjarne

thanks.. it works, but when having variants e.g. the productName might be empty at the first level and it will return an empty string..

<xsl:variable name="relatedProducts" select="$currentPage/parent::ProductCategory/Product [@id != $currentPage/@id]"/>
<ul>
<xsl:for-each select="$relatedProducts">
            <li><xsl:value-of select="productName"/></li>
</xsl:for-each>
</ul>

right now it's written in the product page xslt... but how can I include the code from it's own xslt? perhaps you can post a link where I can read more about templates in xslt and including code from another xslt file?

I think the productName for the first level of products need to be set.. otherwise it will return nothing or something like Product A1 - Blue as in the starter kit..

I don't know if it would be better the variants got the productName from their parent level.. and the variant only have names like Blue, Red etc.. like the nodenames..

Bjarne 

Hi Bjarne

Here is a link for xslt include - http://www.w3schools.com/xsl/el_include.asp

You can arrange your nodes as you like and do what ever you want as our best practice is just 1 way to do it - so just make it the way you want it :)

Kind regards
Anders

Thanks for the link :)

Okay, just because the way it's now, I don't get any title for the related products with variants: http://sub.ak-security.dk/da/shop/category-a/product-a3.aspx

or what I need to do is remember filling out the productName for the variants nodes parents.. so I have a generel name for the product.. the advantage with the variant name is that it can be called anything and doesn't have to include some of the same words..

Bjarne

Do you have any idea why the selecting of a variant seems to destroy the zoom effect on the product page? http://sub.ak-security.dk/da/shop/category-b/product-b1.aspx

On page load the image is wrapped inside a div .. og Cloud Zoom also adds a mousetrap-div, where the zoom lens on hover will be activated.. but when selecting a variant, it seems to remove the two div elements.. it should work more in this way http://sub.ak-security.dk/da/shop/category-a/product-a3.aspx with changing image..

An alternative might be to disable the selection of an variant to change the image..

Bjarne

Hi Bjarne

It is properly because InvokeXslt is called and using ajax displaying the new variant - so will then properly have to start the javascript zoom module with a .start() method or something like that. In the teaCommerce_Simple.js you have a method called "updateProduct" - in the end of the method we have something like this in one of our solutions that use zoom function.

  if(productEle.attr('id') === 'product'){
    MagicZoom.start(document.getElementById('Zoomer'));
  }

Hope it helps you to find a solution

Okay.. I can't immediately see how to solve the problem.. 

Perhaps you can see in the cloud-zoom.1.0.2.js file from here http://www.professorcloud.com/mainsite/cloud-zoom.htm what I need to modify.. I tried with your posted code, but not sure it was correct as it just stopped the variant from switching..

Bjarne

My code example was for a completly different jquery zoom modul so that will ofcourse not work and will give you a javascript error and thats why your variant now wont switch. So you have to look further into the API of the zoom function you use - sorry but dont have the time to look into the zoom api - but try google or read the documentation for the zoom api - that should help you.

Kind regards
Anders

Okay.. Thanks anyway.. I'll give it a try to see how I can fix it.. Magic Zoom has some nice features, but Cloud Zoom has many of the basic features and is free to use..

Bjarne

Super - try and give it a go and see what the APi of Cloud Zoom says.

Could you try and mark the right answer as a solution so others more easily can find it - even though the talk has changed from related products to zoom functions :)

Hi Anders

I found how to start cloud zoom after updating the variant... and the same with fancybox..

In teaCommerce_Simple.js in the end of the updateProduct function I added this:

if(productEle.attr('id') === 'product'){
    jQuery('.cloud-zoom').CloudZoom();
    jQuery("#product .cloud-zoom").fancybox();
}

or:

if(productEle.attr('id') === 'product'){
    $('.cloud-zoom').CloudZoom();
    $("#product .cloud-zoom").fancybox();
}

it then start cloud zoom and fancybox, but use fancybox's standard values, so I also specified the parametres:

if(productEle.attr('id') === 'product'){
    jQuery('.cloud-zoom').CloudZoom();
    $("#product .cloud-zoom").fancybox({
          'centerOnScroll' : true,
          'transitionIn'  :  'elastic',
          'transitionOut'  :  'none',
          'speedIn'    :  600,
          'speedOut'    :  200,
          'overlayShow'  :  true,
          'overlayColor'  :  '#000',
          'cyclic'    :  true,
          'easingIn'    :  'easeInOutExpo',
          'hideOnContentClick' : false
    });
}

You can try it out here: http://sub.ak-security.dk/da/shop/category-b/product-b1.aspx

I noticed there is something similar when updating the currency.. which method should I look for in the javascript, then I can probably use the same to start the scripts after updating the currency.

Bjarne

Okay, I added this in the end to the updatePageUI in teaCommerce_Advanced.js:

$('.cloud-zoom').CloudZoom();
$("#product .cloud-zoom").fancybox({
          'centerOnScroll' : true,
          'transitionIn'  :  'elastic',
          'transitionOut'  :  'none',
          'speedIn'    :  600,
          'speedOut'    :  200,
          'overlayShow'  :  true,
          'overlayColor'  :  '#000',
          'cyclic'    :  true,
          'easingIn'    :  'easeInOutExpo',
          'hideOnContentClick' : false
});

or will it be better to place it after the updatePageUI function here? :

if(data.CurrentCountryChanged || data.CurrentCurrencyChanged){
     updatePageUI();
      /* start cloud zoom and fancybox here */
}

Bjarne

Oh... I noticed I also must include .cloud-zoom-gallery when using the gallery function with thumbnails like here: http://sub.ak-security.dk/da/shop/lygter/pandelampe-h14.aspx .. otherwise it will open the full size of the image in the browser window and not the the placeholder above after updating variant or currency.

So it must use this instead both in teaCommerce_Simple and teaCommerce_Advanced javascript files:

$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Bjarne

Do you have any idea about why the related products on the bottom of the product page disapears, when I change the currency or variant: 

http://sub.ak-security.dk/da/shop/category-a/product-a1.aspx (with variants - related products is removed)

http://sub.ak-security.dk/da/shop/lygter/pandelampe-h14.aspx (without variants - related products stay on page)

I have tried to do the same as with cloud zoom and fancybox when updating currency or variant.
It works fine on products without variants..

Is the update of the currency cause the variant to do a postback too or? something that might be different than on this page: http://sub.ak-security.dk/da/shop/lygter/pandelampe-h14.aspx

Bjarne

Hi Bjarne,

It has something to do with your xslt. Invoke xslt is loading the product again using the Red variant as currentpage and your xslt does not take that into account. Get this page to work and you're good to go:

http://sub.ak-security.dk/da/shop/category-a/product-a1/red.aspx

/Rune

Hi Rune

So what should I change in the xslt?

The related products is called from a template in it's own xslt-file to that place in product_product.xslt

The tabs are written directly in the product_product.xslt and seem to be shown on a variant page: http://sub.ak-security.dk/da/shop/category-b/product-b1/size-30.aspx

Bjarne

Hi Rune..

Tom pointed me in the right direction here: http://our.umbraco.org/forum/developers/xslt/27347-Get-children-of-a-parent-node?p=0#comment102256

I was using the parent, but it only go one level up.. and therefore I don't get any products on the variant pages..
So instead in used ancestor and from there get child Product .. but not variants (Product doc type) of Products.. 

<xsl:variable name="relatedProducts" select="$currentPage/ancestor::ProductCategory/Product [not(child::Product)] [@id != $currentPage/@id]"/>

and then I also had to update my carousel script inside the updateProduct javascript function:

function updateProduct(productEle) {
  var variant = productEle.find('select.productVariants').val(),
      chosenProductId = variant ? variant : productEle.attr('productid'),
      xsltFile = productEle.children('.invokeXSLT').text(),
      htmlFromServer = TeaCommerce.invokeXSLT(xsltFile, chosenProductId,
      {
        umbracoLanguageId: _languageId,
        async: false
      });
  productEle.before(htmlFromServer).remove();
  
  /* start cloud zoom */
   if(productEle.attr('id') === 'product'){
    jQuery('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    /*jQuery("#product .cloud-zoom").fancybox();*/
    $("#product .cloud-zoom").fancybox({
          'centerOnScroll' : true,
          'transitionIn'  :  'elastic',
          'transitionOut'  :  'none',
          'speedIn'    :  600,
          'speedOut'    :  200,
          'overlayShow'  :  true,
          'overlayColor'  :  '#000',
          'cyclic'    :  true,
          'easingIn'    :  'easeInOutExpo',
          'hideOnContentClick' : false
        });
     $('#carousel ul').carouFredSel({
          prev: '#prev',
          next: '#next',
          pagination: "#pager",
          auto: false,
          pauseOnHover: true,
          items : {
            visible: 4,
          },
          scroll : {
            items: 1,
            duration: 1000,
          }
      });
     
   }
}

then it works when I update the variants, http://sub.ak-security.dk/da/shop/brandmateriel/ildslukker.aspx and the related products is also displayed on the variant pages as you mentioned:
http://sub.ak-security.dk/da/shop/brandmateriel/ildslukker/2-kg.aspx 
http://sub.ak-security.dk/da/shop/brandmateriel/ildslukker/6-kg.aspx 

Bjarne 

Hi Bjarne,

Cool. The right xslt will usually do the trick :)

/Rune

Hi Rune

I think a was a bit too fast, as a only get the product without variants.. :)

On this page it's looking fine: http://sub.ak-security.dk/da/shop/category-b/product-b1.aspx but then I noticed that the other two products in the category doesn't has Product B1 as related product.. http://sub.ak-security.dk/da/shop/category-b/product-b2.aspx

I must take a closer look at the xslt relatedProducts variable.

Bjarne

With some help from Tom I solved it to display the related products.. it was a bit tricky as both product and variant use the Product doc type and if the product has variants is should display the first variant.
Link to the post here: http://our.umbraco.org/forum/developers/xslt/27347-Get-children-of-a-parent-node?p=1 and I have pasted the solution that worked for me below:

<xsl:variable name="possibleProducts" select="$currentPage/ancestor::ProductCategory/Product"/> 
<xsl:variable name="relatedProducts" select="$possibleProducts [not(child::Product)][@id != $currentPage/@id]|
  $possibleProducts[child::Product][@id != $currentPage/@id]/Product[@id != $currentPage/@id]
  [($currentPage/parent::Product and parent::Product/@id != $currentPage/parent::Product/@id) or (not($currentPage/parent::Product))][1]"/> 
  
    <xsl:if test="count($relatedProducts) > 0">
    <div id="relatedCategoryProducts">
    <h3>Related productsh3>
      <div id="carousel">
        <ul id="relatedProducts">
          <xsl:for-each select="$relatedProducts">
             <xsl:variable name="relatedProductLink">
            <xsl:choose>
            <xsl:when test="./parent::Product/@id">
              <xsl:value-of select="umbraco.library:NiceUrl(./parent::Product/@id)" disable-output-escaping="yes"/>
            </xsl:when>
            <xsl:otherwise>
              <xsl:value-of select="umbraco.library:NiceUrl(@id)" disable-output-escaping="yes"/>
            </xsl:otherwise>
            </xsl:choose>
            </xsl:variable>
            <li>...</li>
          </xsl:for-each>
        </ul>
      </div>
    </div>
  </xsl:if> 

The relatedProductLink variable tests if the product is a variant, if it is it should use the parent node id otherwise just the id of the node.

- Bjarne

is working on a reply...