Geeks With Blogs
A Point To Share A journey through Microsoft Commerce Server and other .NET platforms

Recently on the MSDN forums a question was raised about how to re-style the Commerce Server catalogue when using Commerce Server 2009 within a SharePoint environment. Those who are familiar with SharePoint and web-parts may have reasonable knowledge around the use of XSLT and apply a style sheet to the web parts parameters, however out –of-the-box this becomes a little challenging for people new to the product.

To demonstrate how to achieve a basic XSLT transformation, I will demonstrate splitting the catalogue query web part into 2 rows... (N.B.: my use of tables here is not best practice; however it is the simplest method of demonstrating this).

So the first step is to get yourself into the page in edit mode, so that you can see the chrome around the web-parts. If you are in the correct place you should see a screen similar to this:

The web part chrome itself contains an edit menu, and when clicking it you will be presented with the following display on the right side of your screen:

The menu itself is larger than this, but the first four fields are the once most important to this tutorial, and are as follows:

Template To Display – this is a drop down box which allows you to pick one of the out-of-the-box templates, or templates previously created by you.

Template Details – when clicked this will open a modal text box, which you use to modify or edit your templates.

Template Properties - Allows you to select which properties of the products you wish to display, this also includes those of variants.

Save Current Template to Library – Allows you to change the name under which you save the modified template.

 

So to change the pre-existing template you need to click into the Template Details box, and click on the [...] button to open up the model input box, which will be similar to this :

The code inside here is actually XSL – the XML version of a style sheet and actually dictates how and what is displayed within the product query web part. If you are not familiar with XSL, don't worry as simply changes can easily be achieved with knowledge of HTML only, however more complex logical changes will require you to invest sometime in grasping the XSL concepts. Unfortunately MOSS does not give you the best editing environment for XSL changes, so I would recommend copy the contents of this box, and moving it into an XML Editor (I use Altova XML Spy, which is a commercial product, but there are free tools available too).

Once you put the contents of this windows in a more presentable environment you will start to see the majority of this code is simply XHTML, which can be changed to your liking:

 

So simply all you need to do is make the stylistic tweaks you like, which in my case is creating a table attribute, and placing the existing divs into 2 columns – which looks something like this:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:param name="_category"/>

    <xsl:param name="DefaultImagesRepository"/>

    <xsl:param name="_catalog"/>

    <xsl:template match="/products">

        <div id="divCategoryMain">

            <XsltAction Id="Pager" Type="Microsoft.Commerce.Portal.UI.Catalog.WebControls.PagerXsltAction, Microsoft.Commerce.Portal.UI.Catalog, Culture=Neutral, Version=1.0.0.0, PublicKeyToken=31bf3856ad364e35">

                <ConfigSettings>

                    <ConfigSetting Name="NextButtonText">&gt;&gt;</ConfigSetting>

                    <ConfigSetting Name="PreviousButtonText">&lt;&lt;</ConfigSetting>

                    <ConfigSetting Name="CssClassPageSelected">mscs-pageSelected</ConfigSetting>

                </ConfigSettings>

            </XsltAction>

            <br/>

            <xsl:choose>

                <xsl:when test="count(product) = 0">

                    <p>No products were found.</p>

                </xsl:when>

                <xsl:otherwise>

                    <div class="mscs-column100">

                        <table>

                            <xsl:apply-templates select="product/properties[position()mod 2=1]"/>

                        </table>

                    </div>

                </xsl:otherwise>

            </xsl:choose>

        </div>

    </xsl:template>

    <xsl:template match="properties">

        <xsl:variable name="imgURLBase" select="property[@name='Image_filename']"/>

        <xsl:variable name="productID" select="property[@name='Id']"/>

        <xsl:variable name="listPrice" select="property[@name='ListPrice']"/>

        <xsl:variable name="alt" select="property[@name='Description']"/>

        <xsl:variable name="onSale" select="property[@name='OnSale']"/>

        <xsl:variable name="catalog" select="$_catalog"/>

        <xsl:variable name="categoryId" select="$_category"/>

        <xsl:variable name="imagesPath" select="$DefaultImagesRepository"/>

        <tr>

        <!-- dictate whether this is an odd or even row -->

        <xsl:attribute name="class">

         <xsl:choose>

            <xsl:when test="position()mod 2">odd</xsl:when>

            <xsl:otherwise>even</xsl:otherwise>

         </xsl:choose>

        </xsl:attribute>

        

        <!-- these table cells contain the data for 'odd' numbered rows -->

        <td>

                <div class="mscs-column20">

                    <xsl:choose>

                        <xsl:when test="$imgURLBase = ''">

                            <b>No Image Available</b>

                        </xsl:when>

                        <xsl:when test="$imgURLBase != ''">

                            <a href="/Pages/Product.aspx?category={$categoryId}&amp;cat={$catalog}&amp;id={$productID}">

                                <img src="{$imagesPath}/{$imgURLBase}" class="mscs-ProductImage" border="0" alt="{$alt}"/>

                            </a>

                        </xsl:when>

                    </xsl:choose>

                </div>

                <div class="mscs-column80">

                    <div>

                        <div class="mscs-ProductName">

                            <a href="/Pages/Product.aspx?category={$categoryId}&amp;cat={$catalog}&amp;id={$productID}">

                                <xsl:value-of select="property[@name='DisplayName']"/>

                            </a>

                        </div>

                        <div class="mscs-ProductPrice">                Price: <xsl:value-of select="format-number($listPrice, &quot;$#0.00&quot;)"/>

                        </div>

                    </div>

                    <div style="width: 100%;">

                        <span class="mscs-clear"/>

                    </div>

                    <div class="mscs-ProductDescription">

                        <xsl:value-of select="property[@name='Description']"/>

                    </div>

                    <div>

                        <XsltAction Id="AddToCart" Type="Microsoft.Commerce.Portal.UI.Catalog.WebControls.VariantAddToCartXsltAction, Microsoft.Commerce.Portal.UI.Catalog, Culture=Neutral, Version=1.0.0.0, PublicKeyToken=31bf3856ad364e35">

                            <ConfigSettings>

                                <ConfigSetting Name="ProductId">

                                    <xsl:value-of select="property[@name='Id']"/>

                                </ConfigSetting>

                                <ConfigSetting Name="DisplayAddToShopperList">true</ConfigSetting>

                                <ConfigSetting Name="AddToShopperListDefault">false</ConfigSetting>

                                <ConfigSetting Name="ImageButtonUrl"/>

                            </ConfigSettings>

                        </XsltAction>

                    </div>

                </div>

            </td>

            <!-- these table cells contain the data for 'even' numbered rows -->

            <xsl:choose>    

             <!-- look for a sibling with same name as current node -->

             <xsl:when test="count(following-sibling::*[name()=name(current())])">

                <td>

                    <div class="mscs-column20">

                    <xsl:choose>

                        <xsl:when test="$imgURLBase = ''">

                            <b>No Image Available</b>

                        </xsl:when>

                        <xsl:when test="$imgURLBase != ''">

                            <a href="/Pages/Product.aspx?category={$categoryId}&amp;cat={$catalog}&amp;id={$productID}">

                                <img src="{$imagesPath}/{$imgURLBase}" class="mscs-ProductImage" border="0" alt="{$alt}"/>

                            </a>

                        </xsl:when>

                    </xsl:choose>

                </div>

                    <div class="mscs-column80">

                    <div>

                        <div class="mscs-ProductName">

                            <a href="/Pages/Product.aspx?category={$categoryId}&amp;cat={$catalog}&amp;id={$productID}">

                                <xsl:value-of select="property[@name='DisplayName']"/>

                            </a>

                        </div>

                        <div class="mscs-ProductPrice">                Price: <xsl:value-of select="format-number($listPrice, &quot;$#0.00&quot;)"/>

                        </div>

                    </div>

                    <div style="width: 100%;">

                        <span class="mscs-clear"/>

                    </div>

                    <div class="mscs-ProductDescription">

                        <xsl:value-of select="property[@name='Description']"/>

                    </div>

                    <div>

                        <XsltAction Id="AddToCart" Type="Microsoft.Commerce.Portal.UI.Catalog.WebControls.VariantAddToCartXsltAction, Microsoft.Commerce.Portal.UI.Catalog, Culture=Neutral, Version=1.0.0.0, PublicKeyToken=31bf3856ad364e35">

                            <ConfigSettings>

                                <ConfigSetting Name="ProductId">

                                    <xsl:value-of select="property[@name='Id']"/>

                                </ConfigSetting>

                                <ConfigSetting Name="DisplayAddToShopperList">true</ConfigSetting>

                                <ConfigSetting Name="AddToShopperListDefault">false</ConfigSetting>

                                <ConfigSetting Name="ImageButtonUrl"/>

                            </ConfigSettings>

                        </XsltAction>

                    </div>

                </div>            

                </td>

             </xsl:when>

      

            </xsl:choose>

            

        </tr>

    

    </xsl:template>

</xsl:stylesheet>

 

Once you are happy with this, simply paste the text back in and hit OK on the window. If you do not wish to overwrite the existing style sheets – make sure you enter in a new filename before you hit the save button. Then simply click the Save to Document Library button, and press OK to close the menu on the right of the screen. When the page refreshes you should see you the outcome immediately on your web part. Once you are done simply publish your page for your changes to go live.

The biggest benefit here is these changes are restricted to a single page in your site, but by saving you style sheet back to the document library you can re-use your template in different site pages in the same web parts, or alternately have different templates for different catalogues within your site, the choice on styling is yours!

One thing to note here is Commerce Server 2009 through SharePoint utilise XSL heavily in customisation of its User Interface, so I would strongly recommend that if you want to deploy sites using SharePoint as a CMS that you learn some basics around XSL and get yourself a good editor which can validate your XSL before you save it back into your web part dialogues. Unfortunately SharePoint does not validate XSL and will through errors or exceptions which sometimes you will not understand, simply because invalid XSL has been used, so my best tip is to validate your code before putting it into SharePoint interfaces!

If you have particular questions on Commerce Server customisation, or generally please feel free to contact me direct or ask away on the MSDN forums... !

 

 

 

Posted on Saturday, October 3, 2009 6:17 PM Commerce Server , MOSS | Back to top


Comments on this post: XSL Transformation in Commerce Server 2009

# re: XSL Transformation in Commerce Server 2009
Requesting Gravatar...
Great jobs to describe to change template of webparts
Left by sanjay bhade on Apr 29, 2011 5:39 PM

# re: XSL Transformation in Commerce Server 2009
Requesting Gravatar...
a very complete explanation, thank you for posting a very good
Left by web desain on Sep 18, 2012 6:10 PM

Your comment:
 (will show your gravatar)


Copyright © Lewis Benge | Powered by: GeeksWithBlogs.net