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) %>’ />
<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
Have you through through the fact that you’ve impacted a farm level ControlTemplate and that ALL other sites on the Farm ultimately
Clearly if you only have 1 style on a farm this is not an issue, but what’s an approach if I want different storefronts, sites, etc. on the same Farm? Is it all through XSLT and that’s the only option other than custom code?
You’re correct! This certainly isn’t the best approach, but OK if you’ve got one CS enabled site. The best approach really is to build your own controls with the extensibility kit and deploy them as features on your sites. This way you could affect controls differently for different sites.
Most controls are rendered using XSLT, where you could easily apply specific styles based on the subsite. There were only a few that I needed to modify using the .ascx itself.
Great site Kelly. I will link to it!