How to customize your own nopCommerce Front End

Hi all,

I'm new to nopCommerce and I started looking for the documenation on how to skin the site.  I paid $20 to download the documentation but the .pdf is really geared towards the end-user for administering the site and not the developer customizing the site.  I feel good about paying the $20 because I can tell that alot of work was put into nopCommerce and I am appreciative of the developers contribution to the Open Source Community.  One suggestion that I would make is to have a developer's manual for a nominal cost of $10.

First my shameless plug.  My company, The Computer Tailors, Inc. isa a boutique website development company that specializes in custom programming, website development, SEO/SEM, Email Marketing, Text Messaging services.  I'm investigating various Open Source shopping cart applications because I am moving away from dashCommerce.  dashCommerce is a great app but does not have the developer or community support like nopCommerce.

dashCommerce did provide me with self taught education on how to customize every aspect of an ASP.Net Shopping Cart Application in C# using SQL Server.  So I started transferring my skills to nopCommerce.  The following is the start of a roadmap that I would appreciate you come along with me and guide me if I veer off course.

Customizing the nopCommerce Front End:

1. App Themes
2. Master Pages

1. App Themes:

First thing I discovered was that nopCommerce uses Themes.  Using Visual Studio 2010, I created a new Theme.  I then duplicated the darkOrange Theme and called it something like TheComputerTailors to easily recognize that it was my custom Theme.  The darkOrange Theme appears to be the default theme when I installed nopCommerce 1.9.  You can set the Theme by going to the Administration Section: Configuration, Global Settings, SEO/Display.  The reason you create your own Theme is so you don't accidentally overwrite it with a reinstall.  When a Theme is created in the App Themes directory, it is automatically displayed within the Themes dropdown in the SEO/Display page due to nopCommerce doing a directory search to populate the available Theme dropdown list.  Next, I start incoporating my styles into the style.css file and start testing.

2. Master Pages:

Next, I discovered that nopCommerce makes use of Master Pages.  There is a Root.Master which is like a main Master but each page references a OneColumn, TwoColumn, or ThreeColumn page master.  The 1,2, or 3 column Master pages are nested from the Root.Master.  Look at your template for your shopping cart pages, determine which is the best fit for each page and set the appropriate Master Page at the top of the .aspx page ( MasterPageFile="~/MasterPages/OneColumn.master" ).  

Header contentPlaceHolder:

In customizing a Shopping Cart Site, you may be faced with the prospect of adding Flash, jQuery or other script that you only want on 1 or a few pages.  I have found that the best way to do so is to place this code in the header section of only the pages that you designate.  But how do you add code to a header section in an .aspx page that uses a Master Page?  The answer is to add a content place holder in the header section of the master page.

Since each page in nopCommerce uses a Root.Master and one of the three other Master Pages, I added the following:

Root.Master:

Add  

<asp:ContentPlaceHolder ID="cphHead" runat="server"></asp:ContentPlaceHolder> above the </head>

tag.

OneColumn.Master, TwoColumn.Master,ThreeColumn.Master:

Add the following above the cph1 content place holder:

 <asp:Content ID="Head1" ContentPlaceHolderID="cphHead" runat="server">
    <asp:ContentPlaceHolder ID="cphHead" runat="server">
    </asp:ContentPlaceHolder>
</asp:Content>

Within your .aspx page (Ex. Default.aspx):

Add your custom JavaScript or script reference above the cph1 content.

<asp:Content ID="Head1" ContentPlaceHolderID="cphHead" runat="server">
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <!-- Cufon -->
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/myradpro.font.js"></script>
    <script type="text/javascript">
        Cufon.replace('h1')('h2')('h3')('h4');
    </script> 
    <!-- flash script -->
    <script type="text/javascript" src="js/flash_detect.v1.7.js"></script>
</asp:Content>

This will allow you to enter custom coding to an individual page but not conflict with any other code.

My next posts will be on the product detail page, the cart, and the checkout page.

Thank you!!!

Wow!!! Thanks a lot for becoming involved in our community. Obviously you are a very skilled programmer. In this post you addressed a point I'd been researching on my own without much success: How to add a bit of Flash to my home page without messing up the rest.

We would all appreciate your efforts at educating us, however, if your intent is to drum up business for your company, then your following will wither. This application has become the great application that it is thanks to the efforts of programmers and others who willingly share their knowledge and product. There have been people who've written entire extensions and plug-ins to the App and post it to the site free of charge.

I hope you turn out to be that kind of a person. Please continue to share your observations, modifications and other insights. I am already following your posts with great interest. I can't wait to see your next post.

The question I had been searching on my own is how to add a bit of Flash at the top header. I have the Flash in a sample website. How do I copy it into mine at the top header of the home page. What files do I need? where do I place them what mods are required to which pages etc. I think you partially answered that question with your first post, but I'd since I don't know a thing about Flash, I don't know which files (and files with what extension) need to be included...etc.

Thanks for your help!!

Robert Lobaina
(954) 802-0036
www.integratedbrands.biz (a work in progress)

Hi Robert,

I apologize for the shameless plug.  It won't happen again.

Louis Datz

Hi Robert,

In regards to Flash, I've been debating about learning it for 10 years now. Being a developer, I've tried to concentrate on the business logic end as apposed to the "Pizzaz". So, I've never created any Flash files and I have left it up to my Graphic Design people.  I am keeping my fingers crossed that HTML 5 and jQuery will be the end of Flash.  With jQuery, I would never recommend creating a dynamic menu with Flash again.

But, enough preambling, and a quick lesson on Flash.  My experience with Flash is embedding Flash Videos (.Flv or .Fl4 files) or Flash Intros or Special Affects (.swf file) into a web page.   In the header of the page (this is where my suggestion for the head content place holder comes into play), place whatever script references you need.  Whomever created the Flash content for you should be able to let you know of any script files needed.  I usually create a folder (ex. js).

So in the header of the page you would have something like:

  

  <script type="text/javascript" src="js/swfobject.js"></script>

In the body of the page, you would embed your Flash content with something like:

<script language="javascript">
        var flashvars_slideshow = {
            dataPath: "xml/slideshow.xml",
            configPath: "xml/slideshow_config.xml",
            cssPath: "styles/flash.css"
        };
 
        var params_slideshow = {
            quality: "high",
            play: "true",
            loop: "true",
            scale: "showall",
            wmode: "transparent",
            devicefont: "false",
            bgcolor: "#000000",
            menu: "true",
            allowFullScreen: "true",
            allowScriptAccess: "always"
        };
 
        var attributes_slideshow = {
            align: "middle",
            id: "slideshow",
            movie: "slideshow",
            src: "slideshow",
            salign: "",
            name: "slideshow.swf"
        };
 
        swfobject.embedSWF("slideshow.swf", "slideshow", "978", "486", "9.0.0.0", false, flashvars_slideshow, params_slideshow, attributes_slideshow);
    </script>

Thanks a lot! I'll start experimenting and report on my results. That does look like a lot of code just to embed a Flash object :)  like you state,  let's hope jquery puts an end to all that!


Thanks for your help!

Robert L.

Product.aspx Page:

I started templating the Product.aspx page.  I had to make 1 minor correction to the code I placed in the header:

<asp:Content ID="Head1" ContentPlaceHolderID="cphHead" runat="server">
    <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
    <!-- Cufon -->
    <script type="text/javascript" src="/js/cufon-yui.js"></script>
    <script type="text/javascript" src="/js/myradpro.font.js"></script>
    <script type="text/javascript">
        Cufon.replace('h1')('h2')('h3')('h4');
    </script>
    <!-- flash script -->
    <script type="text/javascript" src="/js/flash_detect.v1.7.js"></script>
</asp:Content>

Notice the forward slash in front of /js.  Since the friendly URL rewrite uses the word "Product" like it is a directory, the generated HTML was looking for the JavaScript in the /product/js/ directory which doesn't exist.  Placing the / in front of js/ causes the generated code to look for the JavaScript in the js directory under the root directory.

Don't forget to host this project somewhere so we can see what the results are like.
Also, provide a link from which we can download the .js files and other stuff we may need.

Thanks a bunch!

Robert L.

i have a problem trying to customize nopcomerce iam new to  it  
and i don't need the columns in my home page how do i remove it any help
will be greatly appreciate
thank's

louisd wrote:

You shouldn't be aplogizing at all. You've taken the time which equals money out of your day to provide free information to amateurs and competitors alike on how to do something with regard to nopCommerce. You've expeditited my learning process significantly and I appreciate it.

Perhaps if the forums allowed for a more detailed profile then you wouldn't have to "shamelessly" plug your company.
I mean there is not even so much as a website link in the profile section.... perhaps a standardized signature is the way to go which includes that information.

You're a professional developer and you shouldn't feel bad about advertising that fact.
Open source is not communism. Increasingly much of the modern software business is based on the freemium model.
You give. You get.

Even nopCommerce itself "shamelessly" plugs itself at the bottom of every page upon which it powers.
So dont feel bad about working hard, sharing the fruits of your labour and wanting to put some bread on the table as a result.

You made a solid contribution to the forum.
How on earth you then let someone manipulate you into apologizing for that is beyond me. ;)
I mean, they didn't even take the time to vote you up.

So plug away Louis. Plug away.
No one is forcing anyone to read what you write.
If they dont like it they can surf elsewhere.
But clearly given this posts search ranking in Google for the associated terms, many people do like it.
So thanks again... and stick to your guns.