kellyandrewheard

Recently, I had to make changes to Commerce Server 2009’s Default Site in SharePoint.  If it were a perfect world, the absolute best way to do this would be to get the extensibility kit (if you have Commerce Server 2009 installed, you’ll find it here:  \Program Files\Microsoft Commerce Server 2007\Microsoft Commerce Server 2009\Sdk\Samples), load it up inside Visual Studio, make the necessary changes and redeploy the web parts into the site.  But it is far from being a perfect world, and given some of my time constraints and the fact that the extensibility kit has a different signing key than the web parts deployed with the Default Site, I had to find another way to do this.

Certainly you have easy access to make changes to the stylesheets, master pages and page layouts in SharePoint, but the more difficult part is making changes to the layout of the webparts themselves.  Maybe you want to move a field around, or apply a specific style to one of the buttons?  These are certainly use cases for applying design to a web site.

The default address list web part is a good example.  You may have had a graphic designer already build your page layouts complete with HTML, graphics and CSS.  I suppose you could find the styles being used and modify the existing styles to match.  I chose to layout the control based on the HTML I was given and apply my new styles.  Here are some snippets of the code that I modified (ReadOnlyAddressDetail.ascx is called from within AddressList.ascx):

AddressList.ascx

<fieldset>

<asp:Button ID=”ButtonBack” runat=”server” OnClick=”ButtonBack_Click” CssClass=”myaccount-green5-11″ Height=”22″ />

<asp:Button ID=”ButtonAddNewAddress” runat=”server” OnClick=”ButtonAddNew_Click” Height=”22″ CssClass=”myaccount-green5-11″ />

</fieldset>

ReadOnlyAddressDetail.ascx

<ItemTemplate>
<div id=”tablecontent”>
<table style=”vertical-align:top” cellspacing=”5″ cellpadding=”5″>
<tr>
<td style=”vertical-align:top; width:250px” class=”tdmain”>
<asp:Literal ID=”ltlFirstName” runat=”server” Text=’<%# Microsoft.Security.Application.AntiXss.HtmlEncode(FirstName) %>’ />&nbsp;
<asp:Literal ID=”ltlLastName” runat=”server” Text=’<%# Microsoft.Security.Application.AntiXss.HtmlEncode(LastName) %>’ /><br /><br />
<asp:Label ID=”lblDefaultBilling” Visible=’<%# IsDefaultBillingAddress %>’ runat=”server” />
<asp:Label ID=”lblSeparator” Text=” | ” Visible=’<%# IsDefaultBillingAddress &&  IsDefaultShippingAddress %>’ runat=”server” />
<asp:Label ID=”lblDefaultShipping” Visible=’<%# IsDefaultShippingAddress %>’ runat=”server” />
</td>

You can find most of the controls you need in the SharePoint 12-hive (\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\CommerceServer). Note that some of the controls that are used in the Default Site are XSLT controls that require modification to the XSL that renders the content.  These are not found in the 12-hive but rather a templates document library in SharePoint.  The Cart control is a good example of this.  All of the XSLT templates can be found by clicking “View All Site Content” from the Site Actions menu in the Default Site, and then opening the Commerce Server Templates document library.

This method certainly isn’t perfect, but there are changes and bug fixes still being made which will likely become available in R2.  Keep in mind that this is one approach, and certainly the better method is to use the extensibility kit if you require a more custom design or specialized functionality.

Additonal Resources

SharePoint Commerce Services documentation

Adding Extended Web Parts (signing key issue)

Developing with SharePoint Commerce Services