Copied to clipboard

Flag this post as spam?

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


  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 15, 2011 @ 18:06
    Bjarne Fyrstenborg
    0

    Update content during postback

    Hi..

    I am experiencing problems with some of the scripts I have on the product page: tabs (using idTabs script) and the related products on bottom use this jQuery carousel.

    On this page http://sub.ak-security.dk/da/shop/lygter/led-lenser-p7.aspx it seem to update the related products so it is added to the site for each postback when changing the currency in the header.

    On this page http://sub.ak-security.dk/da/shop/beklaedning/a-code-t-shirt.aspx it doesn't seem to affect the related products, but the product image and has also only one image as the first example page, but it's probably because it use variants and it's only the product itself which has an image. But the change of the currency shouln't update the product image? It seems to be the same in the starterkit when updating the currency: http://starterkit.teacommerce.dk/en/products/category-a/product-a1.aspx

    Is there a way to specify which content to be updated?

    also I have had some problem with using these jQuery plugins, but often it's important the scripts are loaded in the correct order.

    Bjarne

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 15, 2011 @ 19:43
    Bjarne Fyrstenborg
    0

    I can see that the related products, which is added again on postback, are only the ones with no variants.
    I also have a problem with updating the currency on the related products.. inside the form tag on product page, the related products is removed on postback and outside the form tag the currency isn't updated: http://sub.ak-security.dk/da/shop/category-a/product-a1.aspx

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
      <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:teacommerce="urn:teacommerce"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets teacommerce ">


      <xsl:output method="html" omit-xml-declaration="yes"/>
        
    <!--
        WHAT IS THIS FILE?
        Writes the html for a single product.
        Is used on it's own and assumes that currentPage
        is a Product.
    -->
      <xsl:param name="currentPage"/>
      <xsl:include href="relatedProducts.xslt" />
      <xsl:variable name="currentCurrency" select="teacommerce:GetCurrentCurrency()"/>

      <xsl:template match="/">

        <!-- I make the name() = 'Product' check here to force umbraco to save the page. Otherwise it cheats and throws errors all over the place. -->
        <xsl:apply-templates select="$currentPage [name() = 'Product']" />
        
      </xsl:template>

      <xsl:template match="Product" >
      <!-- VARIABLES START -->
      <xsl:variable name="category" select="./ancestor-or-self::* [name() = 'ProductCategory'][1]"/>
      <xsl:variable name="product" select="./ancestor-or-self::Product [last()]"/>
      <xsl:variable name="variants" select="$product/descendant-or-self::Product [not(child::Product)]"/>
      <xsl:variable name="variant" select="./descendant-or-self::Product [not(child::Product)][1]"/>
      <xsl:variable name="nodeLink" select="umbraco.library:NiceUrl($product/@id)"/>

      <!-- The product image is fetched from either the product or the first variant -->
      <!--<xsl:variable name="productImageId" select="teacommerce:GetProperty($variant, 'productImage')" />
      <xsl:variable name="productImage">
        <xsl:if test="$productImageId != ''">
          <xsl:value-of select="umbraco.library:GetMedia($productImageId, 0)/umbracoFile" />
        </xsl:if>
      </xsl:variable>-->
        
      <xsl:variable name="categoryPageUrl">
        <xsl:if test="$category/@id != ''">
          <xsl:value-of select="umbraco.library:NiceUrl($category/@id)" />
        </xsl:if>
      </xsl:variable>
      
      <xsl:variable name="productNumber" select="teacommerce:GetProperty($variant, 'productNumber')" />
      <!-- The product category name -->
      <xsl:variable name="categoryName" select="teacommerce:GetProperty($variant, 'umbHeadline', 'name() = &quot;ProductCategory&quot; and count(./ProductCategory) = 0')" />
      <!-- The product Name -->
      <xsl:variable name="productName" select="teacommerce:GetProperty($variant, 'productName')" />
      <!-- The product description is fetched from either the product or the first variant -->
      <xsl:variable name="productDescription" select="teacommerce:GetProperty($variant, 'productDescription')" />

      <!-- The product stock is fetched from either the product or the first variant -->
      <xsl:variable name="stock" select="teacommerce:GetStock($variant)" />
      <!-- The product prices is fetched in all currencies -->
      <xsl:variable name="prices" select="teacommerce:GetPrices($variant)" />
      <xsl:variable name="priceUnFormatted" select="$prices/* [name() = $currentCurrency/@ISOCode]/@price" />
      <!-- The product price with the current currency and formatted with the current culture -->
      <xsl:variable name="price" select="teacommerce:FormatPriceWithSpecificCulture($priceUnFormatted, $currentCurrency/@cultureName)" />
      
      <!-- Class of this product -->
      <xsl:variable name="class">
        <xsl:value-of select="name($variant)" />
        <xsl:textproduct productToUpdate</xsl:text>
      </xsl:variable>
      <!-- VARIABLES END -->

      <!-- HTML START -->
      <div id="product" class="productToUpdate" productId="{$variant/@id}" itemscope="" itemtype="http://schema.org/Product">
        <xsl:attribute name="class">
          <xsl:value-of select="$class" />
        </xsl:attribute>
        
        <!-- The following div#invokeXSLT is used by the update script to load the correct xslt when updating the UI -->
        <div class="invokeXSLT">product_product.xslt</div>
        <href="{$categoryPageUrl}" id="backToCategory" class="noPrint"><xsl:value-of select="umbraco.library:GetDictionaryItem('pfBack')"/></a>
        <form action="/tcbase/teacommerce/SubmitForm.aspx" method="post">
          <input name="ReturnUrl" type="hidden" value="" />
          <input name="AddOrderLine" type="hidden" value="nodeId,quantity" />

          <meta itemprop="productID" content="{$productNumber}" />
          <meta itemprop="brand" content="" />
          <meta itemprop="manufacturer" content="" />
          <!--<meta itemprop="image" content="{$productImage}" />-->
          
          <div id="productContent">
            <h1>
              <!--<a href="{$nodeLink}" itemprop="name url"><xsl:value-of select="$productName" /></a>-->
              <xsl:value-of select="$productName" />
            </h1>
            <div id="productDescription" itemprop="description"><xsl:text</xsl:text>
              <xsl:value-of select="$productDescription" disable-output-escaping="yes" />
            </div>
            
            <span class="{concat('currency', @id, $currentCurrency)}" id="productPrice" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
              <xsl:choose>
                <xsl:when test="$stock = '' or $stock &gt; 0">
                  <meta itemprop="availability" content="http://schema.org/InStock" />
                </xsl:when>
                <xsl:otherwise>
                  <meta itemprop="availability" content="http://schema.org/OutOfStock" />
                </xsl:otherwise>
              </xsl:choose>
              
              <span itemprop="price"><xsl:value-of select="$price"/></span>
            </span>
            
            
            <div id="quantity" class="noPrint">
              <label for="quantity"><xsl:value-of select="umbraco.library:GetDictionaryItem('pfQuantity')"/></label>

                    <input type="text" name="quantity" id="quantity" class="quantity" value="1" />

            </div>
            <xsl:if test="count($variants) &gt; 1">
      
              <div id="variants" class="noPrint">

                <label for="productVariants"><xsl:value-of select="umbraco.library:GetDictionaryItem('pfVariant')"/></label>
                
                <xsl:choose>
                  <xsl:when test="count($product/Product) &gt; 0">
     
                    <select name="nodeId" class="productVariants" id="productVariants">
                      <!-- loop through each of the variant products -->
                      <xsl:for-each select="$product/Product">
                        <!-- do whatever you like here -->
                        <option value="{@id}">
                          <xsl:if test="$variant/@id = @id">
                            <xsl:attribute name="selected">true</xsl:attribute>
                          </xsl:if>
                          <xsl:value-of select="@nodeName" />
                        </option>
                      </xsl:for-each>
                    </select>
            
                  </xsl:when>
                  <xsl:otherwise>
                    <input name="nodeId" type="hidden" value="{@id}" />
                  </xsl:otherwise>
                </xsl:choose>

              </div>
            
            </xsl:if>
            
            <xsl:choose>
              <xsl:when test="$stock = '' or $stock &gt; 0">
                <div id="productAddToCartWrap" class="noPrint">
                  <input type="submit" value="{umbraco.library:GetDictionaryItem('pfAddToCart')}" class="productAddToCart" />
                  <span class="addingToCart"><xsl:value-of select="umbraco.library:GetDictionaryItem('pfAddingToCart')" /></span>
                </div>
              </xsl:when>
              <xsl:otherwise>
                <div class="soldout noPrint" id="productAddToCartWrap">
                  <xsl:value-of select="umbraco.library:GetDictionaryItem('pfSoldOut')"/>
                </div>
              </xsl:otherwise>
            </xsl:choose>
          </div>
          
          <xsl:if test="$nodeLink != ''">
          <div class="thumb_wrapper">
            <div class="thumb">
              <!--<a rev="productImages" rel="zoomHeight:350, zoomWidth:350, adjustX: -30, adjustY:0, smoothMove:3, lensOpacity:0.0, tintOpacity:0.5, tint: '#ffffff', position:'left'" id="productImg" class='cloud-zoom' href="{concat('/ImageGen.ashx?Image=',$productImage)}">
                <img src="{concat('/ImageGen.ashx?Width=288&amp;Image=',$productImage)}" id="productImage" alt='{$productName}' title="{$productName}" />
              </a>-->
              <!--<div id="anypos" style="position:absolute;top: 0px; left: 0px; width:350px; height:350px;"></div>-->
            
              <!--<img src="{$currentPage/productImage/DAMP/mediaItem[1]/*/umbracoFile}" />-->
            <!--<img src="{./productImage/DAMP/mediaItem[1]/Image/crops//crop [@name='productThumb']/@url}" height="100px;"/>-->
            <ul>
            <xsl:for-each select="./productImage/DAMP/mediaItem/Image">
              <li>
                <xsl:attribute name="style">
                  <xsl:if test="position() != 1">
                      <xsl:text>display:none;</xsl:text>
                  </xsl:if>
                </xsl:attribute>
                    <xsl:variable name="imgWidth" select="'250'"/>
                    <xsl:variable name="scale" select="number(umbracoWidth) div $imgWidth"/>
                    <xsl:variable name="imgHeight" select="round(number(umbracoHeight) div $scale)"/>
                    <!--Bredde: <xsl:value-of select="$imgWidth" disable-output-escaping="yes"/>
                    Højde: <xsl:value-of select="$imgHeight" disable-output-escaping="yes"/>-->
                
                    <rev="productImages" rel="zoomHeight:350, zoomWidth:350, adjustX: -30, adjustY:0, smoothMove:3, lensOpacity:0.0, tintOpacity:0.5, tint: '#ffffff', position:'left'" id="zoom1" class='cloud-zoom' href="{concat('/ImageGen.ashx?Image=',./umbracoFile)}">
                      <img src="{concat('/ImageGen.ashx?Image=',./umbracoFile,'&amp;Width=',$imgWidth)}" id="productImage" alt='{$productName}' title="{$productName}" width="{$imgWidth}" height="{$imgHeight}" />
                    </a>

                  
                  
                  <!--<a rev="productImages" rel="zoomHeight:350, zoomWidth:350, adjustX: -30, adjustY:0, smoothMove:3, lensOpacity:0.0, tintOpacity:0.5, tint: '#ffffff', position:'left'" href="{./umbracoFile}" class="cloud-zoom" id="zoom1">-->
                    <!--<img src="{./crops//crop [@name='productMediumThumb']/@url}" alt='{$productName}' title="{$productName}" />
                  </a>-->
              </li>
            </xsl:for-each>
            </ul>
            </div>
             
            <div class="clearBoth"><xsl:text</xsl:text></div>
            <xsl:if test="count(./productImage/DAMP/mediaItem/Image) > 1">
              <ul id="productThumbs">
              <xsl:for-each select="./productImage/DAMP/mediaItem/Image">
                <li>
                  <!--<img src="{./productImage/DAMP/mediaItem/Image/crops//crop [@name='productThumb']/@url}" />-->
                  <!--<img src="{./crops//crop [@name='productSmallThumb']/@url}" />-->
                  
                  <href='{./umbracoFile}' class='cloud-zoom-gallery' title='{$productName}'
                      rel="useZoom: 'zoom1', smallImage: '{concat('/ImageGen.ashx?Width=250&amp;Image=',./umbracoFile)}' ">
                  <img src="{./crops//crop [@name='productSmallThumb']/@url}" alt="{$productName}"/></a>
                  
                  <!--<a href='{./umbracoFile}' class='cloud-zoom-gallery' title='{$productName}'
                      rel="useZoom: 'zoom1', smallImage: '{./crops//crop [@name='productMediumThumb']/@url}' ">
                  <img src="{./crops//crop [@name='productSmallThumb']/@url}" alt="{$productName}"/></a>-->
                </li>
              </xsl:for-each>
              </ul>
            </xsl:if>
          </div>
          </xsl:if>
        
        <div class="clearBoth"><xsl:text</xsl:text></div>
          <xsl:if test="$productDescription != '' or produktSpec != '' or youtubeVideoID != ''">
          <div id="productTabs">
            <ul>
              <xsl:if test="$productDescription != ''"><li><href="#productDesc" class="selected">Beskrivelse</a></li></xsl:if>
              <xsl:if test="produktSpec != ''"><li><href="#productSpec">Specifikationer</a></li></xsl:if>
              <xsl:if test="youtubeVideoID != ''"><li><href="#productVideo">Video</a></li></xsl:if>
            </ul>
            <div class="tabs_content"><xsl:text</xsl:text>
                <xsl:if test="$productDescription != ''"><div id="productDesc" style="display: block; "><xsl:text</xsl:text><xsl:value-of select="$productDescription" disable-output-escaping="yes" /></div></xsl:if>
                <xsl:if test="produktSpec != ''">
                  <div id="productSpec" style="display: none; "><xsl:text</xsl:text>
                      <table><xsl:text</xsl:text>
                        <xsl:for-each select="./produktSpec/Data/Body/Row">
                          <xsl:variable name="spec" select="./produktSpec/Data/Body/Row" />
                          
                          <xsl:variable name="numberOfSpec" select="count($spec)" />
                          <xsl:variable name="numberOfColumns" select="1" />
                          
                          <!-- Calculate the total number of rows -->
                          <xsl:variable name="rows" select="ceiling($numberOfSpec div $numberOfColumns)" />
                          <!-- current column -->
                          <xsl:variable name="colcount" select="((position() + ($numberOfColumns - 1)) mod $numberOfColumns) + 1" />
                          <!-- Current row -->
                          <xsl:variable name="rowcount" select="floor((position() - 1) div $numberOfColumns) + 1" />
                          <!-- Class of this product -->
                          <xsl:variable name="tableclass">
                            <xsl:value-of select="name(.)" />
                            <xsl:textspec</xsl:text>
                            <xsl:textcol</xsl:text>
                            <xsl:value-of select="$colcount"/>
                            <xsl:textrow</xsl:text>
                            <xsl:value-of select="$rowcount" />
                            <xsl:if test="$rowcount = 1">
                              <xsl:textfirstRow</xsl:text>
                            </xsl:if>
                            <xsl:if test="$rowcount = $rows">
                              <xsl:textlastRow</xsl:text>
                            </xsl:if>
                            <xsl:choose>
                              <xsl:when test="$rowcount mod 2 = 0">
                                <xsl:textrowEven</xsl:text>
                              </xsl:when>
                              <xsl:otherwise>
                                <xsl:textrowOdd</xsl:text>
                              </xsl:otherwise>
                            </xsl:choose>
                            <xsl:choose>
                              <xsl:when test="$colcount mod 2 = 0">
                                <xsl:textcolEven</xsl:text>
                              </xsl:when>
                              <xsl:otherwise>
                                <xsl:textcolOdd</xsl:text>
                              </xsl:otherwise>
                            </xsl:choose>
                          </xsl:variable>
                          <tr>
                            <xsl:attribute name="class">
                              <xsl:value-of select="$tableclass" />
                            </xsl:attribute>
                            <th>
                              <xsl:value-of select="./RowHead" disable-output-escaping="yes"/>
                            </th>
                            <td>
                                <xsl:choose>
                                  <xsl:when test="contains(./Cell,'http://') or contains(./Cell,'www')">
                                    <href="{./Cell}" target="_blank">Klik her</a>
                                  </xsl:when>
                                  <xsl:otherwise>
                                    <xsl:value-of select="./Cell" disable-output-escaping="yes"/>
                                  </xsl:otherwise>
                                </xsl:choose>
                            </td>
                          </tr>
                        </xsl:for-each>
                      </table>
                    </div>
                  </xsl:if>
                <xsl:if test="youtubeVideoID != ''">
                <div id="productVideo" style="display: block; "><xsl:text</xsl:text>
                  <!--<xsl:variable name="videoID" select="'tEdPJaq6t9s'" />-->
                  <xsl:variable name="videoID" select="./youtubeVideoID" />
                  <object type="application/x-shockwave-flash" style="width:480px; height:360px;" data="http://www.youtube.com/v/{$videoID}?autoplay=0&amp;version=3&amp;fs=1" allowscriptaccess="always" allowfullscreen="true">
                    <param name="movie" value="http://www.youtube.com/v/{$videoID}?autoplay=0&amp;version=3&amp;fs=1" /><param name="allowFullScreen" value="true" />
                    <param name="allowFullScreen" value="true" />
                    <param name="allowscriptaccess" value="always" />
                    <param name="wmode" value="transparent"></param>
                  </object>
                </div>
                </xsl:if>
              </div>
            </div>
            </xsl:if>
        
        <script type="text/javascript"
            $("#productTabs").idTabs(function(id,list,set){ 
                $("a",set).removeClass("selected") 
                  .filter("[href='"+id+"']",set).addClass("selected"); 
                  for(i in list) 
                    $(list[i]).hide(); 
                  $(id).fadeIn(); 
                  return false; 
             }); 
         </script>
        
        </form>
        </div>

        <div class="clearBoth"><xsl:text</xsl:text></div>
        
        <!-- Related products -->
        <xsl:call-template name="RelatedProducts">
            <xsl:with-param name="currentCurrency" select="teacommerce:GetCurrentCurrency()" />
            <xsl:with-param name="currentPage" select="$currentPage" />
        </xsl:call-template>
        <!-- HTML END -->

    </xsl:template>

    </xsl:stylesheet>

    Bjarne

     

Please Sign in or register to post replies

Write your reply to:

Draft