Creating an integrated version of nopcommerce from a custom design

Hello

I have agreed for a client to create from scratch an ecommerce solution for selling goods online. I am a software developer so I am comfortable with the code base, however I have hired a designer to create the HTML / CSS to the client requirements. I will then integrate the HTML and CSS that these chaps produce.

I was wondering if you could give me an idea as to what this process entails from the point where you have a reasonable idea what you want the site to look and function like (we're at early stages here), to the point where you have integrated the CSS and HTML that your designers produce. I suppose i'm asking for a bit of your knowledge about the .net code base and the wisdom of any integration experience from previously created designs.

Are there any posts I may have missed on this? Are there a set of best practices / previous developer stories, success or otherwise?

regards

ihk

Couple of things:

Utilize the templates.  They offer the easiest way to layout your pages the way you want without having to create new master pages (unless you want a 3 column layout or something like that).  By using templates you can ensure the default templates and layout aren't altered.  You can  also create seasonal templates that can be changed from the admin area.

Depending on how you want your site to work and what types of products you sell, ProductVariantsInGrid.ascx can cause some problems if want to use Product variants but not have them repeated the way the logic of that control works.  There are some good work-arounds I have used depending on the application.

Get to know the built in methods and code base.  More than likely your client will want some sort of 'Not out of the box' feature.  NopCommerce is wide open and leaves a lot of room for imaginative ideas.

Good luck.

joe

I pretty much agree with joe, but here is something I do now that has reduced my development time massively.

I now use, almost exclusively, whether doing my own designs or getting stuff from a designer, a grid system. Normally 960.gs.

I've used 960.gs with vanilla html sites, bespoke apps, Umbraco, SilverStripe, Nop and more and it is almost as valuable to me as firebug.

So why is it so good?

Well, it'll means you can agree with the designer the page size you want to use, the 'columns' you want to use (12, 16,20 etc) and he can go away and do the slices, outline markup and css exactly as you will implement it in the nop code.

I generally strip a lot of the markup and css from nop anyway, but it's really easy to replace master-page-wrapper with container_16 for example and master-page-holder etc with grid_10 or whatever the relevant bit is.

Best of all, I find it makes the markup neater, cleaner and more uniform.

HTH.

I have never used or heard of 960.gs.  It looks like a really good idea.

One other point you made that I was hesitant to originally bring up is stripping away the default css and (some) html.

I almost always prefer starting with a clean slate.  In fact I will layout out my site as a blank asp.net website and design everything with an idea of where the various nop modules will eventually go.  When I am done with the shell design I remove all default css (not from the admin of course) and start dropping controls in my new design.  

Everything is initially broken but I find it far easier to move and style UNSTYLED elements than changing the default element styles to suit my design.  The good news is that the default layout validates so it's very easy to change elements the way you want.

joe

Hello,

I am trying to make changes to the Horizonal Menu from the darkOrage Template and I do not know where to start??

Things I am trying to accomplish are: 1) Remove and Add some new names to the HeaderMenu, including hovering? I have an idea hovering should be modified in the CSS file or am I not on the right track?

This is the link of the site I am working on: http://www.myamericanfurnituregalleries.com/

2) The link below is to the SAMPLE I am trying to implement into my home page of the site ABOVE.
http://www.myamericanfurnituregalleries.com/afgdev05/AFG_sample2/index.html

Does anyone have any lead as in how it is done? Many thanks!

tombanh wrote:

Try posting your own thread rather than cross-posting everywhere, it is really annoying. Did you read my advice on another thread to upgrade to the latest nopCommerce?

Yes I did and thanks so much for the input.

I was able to make changes to the HeaderMenu. However, I am still having trouble removing the BLACK BACKGROUND although I have removed all related code such as the "background color" line, but it had no effect!

I am also trying to put back the SearchBox I recently removed from in front of the HeaderMenu. My goal is to put it in the Header-links where the rest of the line such as (Register; Login; Shopping Cart; Wishlist).

I also want to change the text of the Header-links from WHITE to BLACK but I haven't figure out a way yet.

BTW - upgrading to a newer version would be a great idea. My question is: 1) how to upgrade to a newer version and what to WATCH FOR so it won't effect the work I have accomplished so far?

Best regards,

mikeal7,

I did not see your upgrade advice either, where is it exactly?

best

ihk

Hi,

I did not post any Upgrade advice. I did not install NopCommerce V1.0 either. My boss did and he just assigned me to bring his site up. Therefore, I need some advice on the upgrade and what to WATCH FOR in case my work and progress will be effected.

Which of your needs is most pressing?  If you are serious about upgrading then I would work on that task first.  Much of the css from version 1.4 (I think) and below has been consolidated.  If you are planning to upgrade to a version above 1.4 I would suggest accomplishing that first.  Then you can get into the css and change your header menus from there.

Some suggestions on upgrading:

1. Backup everything first.  Everything!
2. Take inventory of any customization you may have done.  Those files should be removed from your project and reinserted when your done (Test before deployment, they may not work).  This keeps the upgrade from over writing any customization you have done.
3. Depending on which version you have, you may have to download an earlier version to get the correct database upgrade scripts.  Example: If you currently have version 1.4 installed and you want to upgrade all the way to 1.8.  You need to make sure you have a db script to upgrade from 1.4 to 1.5 and 1.5 to 1.6 and so on.

Hope this helps.