Making Changes to HTML in nopCommerce

You may have noticed if you read my post on creating your own nopCommerce theme that I said if you need to stay away from making major HTML changes. The reason for this is because you don’t want to mess up all the clean little modules that nopCommerce is built with. Well this is the first of many post that I will go into more detail on how to make some of these changes.

Before we get started, if you are a designer and not a developer please please please back up any files you change. The reason for this is because I’m assuming as a designer, that you do not have access to the .Net SDK and thus can’t use the debugger to figure out where you messed up. When I say “back up” all I mean is any file you change, just make a copy and save it on your desktop. That way if you mess up something you can always just go back to the original state of the page without needing some help figuring out where you messed up. Also any changes I make will not require a recompile, so you don’t have to worry about that either.

With that being said, lets take a look at the overall page structure of the nopCommerce framework. In any text editor, open up “MasterPagesRoot.Master”. You can see in this file that the major page elements are stored here.



<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<asp:PlaceHolder id="SCRIPTS" runat="server" />
<asp:PlaceHolder id="phAnalyticsHead" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div class="master-wrapper-page">
<div class="master-wrapper-content">
<nopCommerce:Header ID="ctrlHeader" runat="server" />
<nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
<div class="clear">
</div>
</div>
<nopCommerce:GoogleAdsense runat="server" ID="ctrlGoogleAdsense" />
<nopCommerce:Footer ID="ctrlFooter" runat="server" />
</div>
</form>
<asp:PlaceHolder id="phAnalyticsBody" runat="server" />
</body>
</html>


Feel free to make any simple changes you want here. Add a div, class name, id. You can save it and refresh your page without need. Now I know this isn’t exactly all that helpful so lets dig in a bit deeper.

So now lets add our own custom module block, say we want add a full section with all our social media… like twitter, facebook, foursquare, ect. The first thing you need to figure out is your store 1, 2 or 3 column layout. The reason for this is each one of these layouts has it’s own file. In the case of the nopCommerce store demo 1.90, its a 3 column layout. So in our trusty “/MasterPages” directory you will load the file “ThreeColumn.master” into your text editor. Here is what it looks like.



<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="server">
<div class="master-wrapper-leftside-3">
<asp:ContentPlaceHolder ID="cph2" runat="server">
<nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server" />
<div class="clear">
</div>
<nopCommerce:ManufacturerNavigation ID="ctrlManufacturerNavigation" runat="server" />
<div class="clear">
</div>
<nopCommerce:PopularTags ID="ctrlPopularTags" runat="server" />
<div class="clear">
</div>
<nopCommerce:InfoBlock ID="ctrlInfoBlock" runat="server" />
<div class="clear">
</div>
<nopCommerce:PollBlock ID="ctrlPollLeft" runat="server" SystemKeyword="LeftColumnPoll" />
</asp:ContentPlaceHolder>
</div>
<div class="master-wrapper-center-3">
<div class="master-wrapper-cph-3">
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="master-wrapper-rightside-3">
<asp:ContentPlaceHolder ID="cph3" runat="server">
<nopCommerce:MiniShoppingCartBox ID="ctrlMiniShoppingCartBox" runat="server" />
<div class="clear">
</div>
<nopCommerce:LiveChatBlock ID="ctrlLiveChatBlock" runat="server" />
<div class="clear">
</div>
<nopCommerce:NewsLetterSubscriptionBoxControl ID="ctrlNewsLetterSubscriptionBoxControl"
runat="server" />
<div class="clear">
</div>
<nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
<div class="clear">
</div>
<nopCommerce:PollBlock ID="ctrlPollRight" runat="server" SystemKeyword="RightColumnPoll" />
</asp:ContentPlaceHolder>
</div>
</asp:Content>


Notice the tag nopCommerce:InfoBlock, this is a module created by nopCommerce. It is a good example of the one we want to mimic. So time to dig even deeper and check out this module to see exactly what this module looks like. The code for this one can be found in “Modules/InfoBlock.ascx” and contains the following.



<div class="block block-info">
<div class="title">
<%=GetLocaleResourceString("Content.Information")%>
</div>
<div class="clear">
</div>
<div class="listbox">
<ul>
<li><a href="<%=Page.ResolveUrl("~/contactus.aspx")%>">
<%=GetLocaleResourceString("ContactUs.ContactUs")%></a> </li>
<li><a href="<%=Page.ResolveUrl("~/aboutus.aspx")%>">
<%=GetLocaleResourceString("Content.AboutUs")%></a></li>
<% if (this.BlogService.BlogEnabled)
{ %>
<li><a href="<%= SEOHelper.GetBlogUrl()%>">
<%=GetLocaleResourceString("Blog.Blog")%></a></li>
<%} %>
<% if (this.ForumService.ForumsEnabled)
{ %>
<li><a href="<%= SEOHelper.GetForumMainUrl()%> ">
<%=GetLocaleResourceString("Forum.Forums")%></a></li>
<%} %>
<% if (this.ProductService.RecentlyAddedProductsEnabled)
{ %>
<li><a href="<%=Page.ResolveUrl("~/recentlyaddedproducts.aspx")%>">
<%=GetLocaleResourceString("Products.NewProducts")%></a></li>
<%} %>
<% if (this.ProductService.RecentlyViewedProductsEnabled)
{ %>
<li><a href="<%=Page.ResolveUrl("~/recentlyviewedproducts.aspx")%>">
<%=GetLocaleResourceString("Products.RecentlyViewedProducts")%></a></li>
<%} %>
<% if (this.ProductService.CompareProductsEnabled)
{ %>
<li><a href="<%=Page.ResolveUrl("~/compareproducts.aspx")%>">
<%=GetLocaleResourceString("Products.CompareProductsList")%></a></li>
<%} %>
<li><a href="<%=Page.ResolveUrl("~/sitemap.aspx")%>">
<%=GetLocaleResourceString("Content.Sitemap")%></a></li>
<li><a href="<%=Page.ResolveUrl("~/shippinginfo.aspx")%>">
<%=GetLocaleResourceString("Content.Shipping&Returns")%></a></li>
<li><a href="<%=Page.ResolveUrl("~/privacyinfo.aspx")%>">
<%=GetLocaleResourceString("Content.PrivacyNotice")%></a></li>
<li><a href="<%=Page.ResolveUrl("~/conditionsinfo.aspx")%>">
<%=GetLocaleResourceString("Content.ConditionsOfUse")%></a></li>
</ul>
</div>
</div>


I know this can be a bit nasty for you designer types, but stick with me we are just about there. If you take a look at the code above you can see that all it really contains is this structure.



<div class="block block-info">
<div class="title">

</div>
<div class="clear">
</div>
<div class="listbox">
<ul>
<li><a href=""></a></li>
</ul>
</div>
</div>


So now we have what we need to create our own static block of information that will contain our social media links. Now all you have to do is go back to your “ThreeColumn.master” file and using this basic mark up structure just place it in next to whichever module you like. I’ll place it in right underneath the Information Block. You can see how it looks below.



<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="server">
<div class="master-wrapper-leftside-3">
<asp:ContentPlaceHolder ID="cph2" runat="server">
<nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server" />
<div class="clear">
</div>
<nopCommerce:ManufacturerNavigation ID="ctrlManufacturerNavigation" runat="server" />
<div class="clear">
</div>
<nopCommerce:PopularTags ID="ctrlPopularTags" runat="server" />
<div class="clear">
</div>
<nopCommerce:InfoBlock ID="ctrlInfoBlock" runat="server" />
<div class="clear">
</div>
<!-- *********** CUSTOM STUFF HERE *************** -->
<div class="block block-social-block">
<div class="title">
Social Media!
</div>
<div class="clear">
</div>
<div class="listbox">
<ul>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://foursquare.com">Foursquare</a></li>
</ul>
</div>
</div>
<!-- *********** END OF CUSTOM STUFF HERE *************** -->
<div class="clear">
</div>
<nopCommerce:PollBlock ID="ctrlPollLeft" runat="server" SystemKeyword="LeftColumnPoll" />
</asp:ContentPlaceHolder>
</div>
<div class="master-wrapper-center-3">
<div class="master-wrapper-cph-3">
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="master-wrapper-rightside-3">
<asp:ContentPlaceHolder ID="cph3" runat="server">
<nopCommerce:MiniShoppingCartBox ID="ctrlMiniShoppingCartBox" runat="server" />
<div class="clear">
</div>
<nopCommerce:LiveChatBlock ID="ctrlLiveChatBlock" runat="server" />
<div class="clear">
</div>
<nopCommerce:NewsLetterSubscriptionBoxControl ID="ctrlNewsLetterSubscriptionBoxControl"
runat="server" />
<div class="clear">
</div>
<nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
<div class="clear">
</div>
<nopCommerce:PollBlock ID="ctrlPollRight" runat="server" SystemKeyword="RightColumnPoll" />
</asp:ContentPlaceHolder>
</div>
</asp:Content>


The purpose of this post is help show you how to dig into the HTML from a graphic designers perspective. If you have any specific question please feel free to ask. I will be posting more information on making customization to the header, footer, and other key page elements.