Start with an unmodified version 10 codebase and your upgraded database.
Make sure the site runs
We're going to take the old skin that is split between the /App_Templates and /App_Themes folder of the old site and consolidate them into one new /Skin folder.
Open the old /skins folder side by side with the new version 10 site /Skins folder so that you can easily copy files from old to new.
Creating the new skin
Duplicate the /Skins/Default folder found in the new site. Rename the folder to match your old skin name. For example "Skin_1". This will be your new skin name. For more information on how to make this a friendly name see here: Friendly Skin Names
On the old site, navigate into the skin folder (skins/{Skin_X}).
On the new site, navigate into your new skin folder (/Skins/{NewSkinName}).
The skins folder
CSS
Move over your style.css file and any other custom CSS files you may have from /skins/{Skin_X} to the /Skins/{NewSkinName}/Css folder overwriting the existing file.
If you have a receipt.css file and/or a receiptstyle.css file you probably do not want to bring that over from version 8. You should probably use the new receipt.css file and the new receipt xmlpackage (notification.receipt.xml.config).
Make note of the CSS files that you do bring over so that we can reference those CSS files when you convert your template.
Links to images and local fonts in your css will now need to change because we've moved your Css into the Css folder.
Copy the images found in your /skins/{Skin_X}/images folder into /Skins/{NewSkinName}/Images overwriting the existing images.
Fonts
If you have any custom fonts in your old skin we recommend you move these over to the new /Skins/{NewSkinName}/Fonts folder. Make sure that you update any references to these old fonts like we did above for images (../fonts/myfont.ttf).
Controls
If you have any custom control files in your skin (they end with .ascx), there's no reason to bring them over. They will no longer work in MVC. They will need to be converted to a partial view or an xmlpackage.
JavaScript
If you have any javascripts in your /skins/{Skin_X} folder or subfolders you can put those in the /Skins/{NewSkinName}/Scripts folder.
Make note of the javascript files that you do bring over so that we can reference those javascript files when you convert your template.
Topics
Move any file based topics that you use over from /skins/{Skin_X} to /Skins/{NewSkinName}/Topics. They will usually end in .htm
XmlPackages
Copy any custom xmlpackages that you would like to keep from /skins/{Skin_X}/XmlPackages to /Skins/{NewSkinName}/XmlPackages
The template
Locate your main template.ascx file and copy it over to the new skin in the /Skins/{NewSkinName}/Views/Shared folder.
Delete the /Skins/{NewSkinName}/Views/Shared/_Layout.cshtml file (You've got the one in the Default folder for reference later if you need it.)
Rename your template.ascx file to _Layout.cshtml
You can leave the following files from your old skin behind:
affiliate_signup.htm
empty.ascx
empty2.ascx
expressTemplate.ascx
loadingshipping.gif
menuData.xml
micropay.htm
nav-header-bg.psd
nav-header-bg-old.gif
phonestyle.css
popup_template.htm
productbrowser_template.htm
vertMenuData.xml
affiliate_email_invite_html.htm
affiliate_linking.htm
If you have other custom template files such as a home page template you can convert them in the same way you do your main template. For more info about custom layouts click here: Custom Layouts .
Converting the template
Open your new _Layout.cshtml file in Visual Studio or a plain text editor. We recommend Visual Studio because you'll get good syntax highlighting and intellisense to help keep you from making mistakes.
The razor examples below are case-sensitive so make sure that you copy them carefully if you want to use them on your own site.
Remove the registrations and imports at the top. They all start with <%@ and end with %>.
Now you should have a doctype at the top of your document that looks like this:
<!DOCTYPE html>
If you don't, add a doctype.
If your doctype does not look the same. Change it to this new Html 5 style above.
The <head> section
Before you begin
The head section of the default skin is stored in a separate partial view /Skins/{SkinName}/Views/Shared/_Head.cshtml. We recommend that you do the same for your custom skin.
The _Head.cshtml file is also shared with the pop up windows throughout the app, so styles and other resources you place in this file are also accessible to pop up content.
Now open up the /Skins/{SkinName}/Views/Shared/_Head.cshtml file.
Cut the contents of the <head> section of your new _Layout.cshtml and paste into the /Skins/{SkinName}/Views/Shared/_Head.cshtml file. Feel free to overwrite all of the contents of the _Head.cshtml file or leave the existing contents there for reference. Just make sure to clean up any unused code when you're done.
Now back in the _Layout.cshtml file replace your head section with the following code:
<head>
@Html.Partial("_Head")
</head>
Head back over to your _Head.cshtml file.
Remove any comments that look like this: <%-- This is a webforms style comment that won't work in razor --%>
If you want to keep the comments you can replace them with razor style comments: @* Razor comment *@
Remove the <title>, <meta name="description">, and <meta name="keywords"> tags and any comments about them and replace them with this code that you can copy from the default head partial view file(Skins/Default/Views/Shared/_Head.cshtml):
adnsf$ = jQuery; <%-- to avoid conflicts with existing jQuery versions and other javascript frameworks, change this line to adnsf$ = jQuery.noConflict(); --%>
jQuery is required for AspDotNetStorefront to work properly so make sure to add it if you don't already have it.
CSS references
Remember the list of CSS files you brought over earlier? Now's the time to get out that list. You'll want to reference any CSS that your skin needs from the new layout file.
You can bundle and minify your css automatically. You do not have to, but we recommend that you do so that you can benefit from faster initial page load times. To bundle your CSS add the following code and reference your own CSS files.
Make sure that you use unique bundlePath parameters. This is just a made up url by the way. Use any path string you want for bundlePath, but remember that if you link to external resources like images from within your CSS, you'll want to use a path that is in the same directory as your real CSS file.
Only bundle local files. Don't try to bundle files that you are running from somewhere off of your website like a CDN.
If you have CSS outside of your skin folder you can reference it like so:
Watch out for that tricky receipt.css file. It is not supposed to be referenced from your site so don't add it to your bundle. It is referenced from your receipt automatically. If you modified your old receipt css just make sure that you bring that file over to the new skin. Otherwise use the version 10 receipt.css.
If you have a reference to the bootstrap javascript you can safely leave that out of your _Head.cshtml file. That will get added down in the body close area.
Javascript references
You can also bundle and minify your javascript references. You'll see that we've moved as many of these javascript references to the <body> close area as possible. You may want to do the same with yours to help speed up your pageload times. I would recommend doing this only if you know exactly how all your custom javascript works though. To include your javascript in the <head> or the close <body> area you can do this:
If you end up referencing javascripts that did not move over from the old skin, don't forget to move them over into the version 10 site somewhere.
You do not need formValidate.js. This was shipped with ealier versions of AspDotNetStorefront, but is no longer required.
You do not need the (!BUYSAFEJSURL!) token. It is deprecated. Buysafe gets included in a different way. We'll get to that in a bit.
The <body> tag
Navigate back over to your _Layout.cshtml file if you haven't already.
Like the head section we compartmentalized the body open and body close areas into partial views, /Skins/{SkinName}/Views/Shared/_BodyOpen.cshtml and /Skins/{SkinName}/Views/Shared/_BodyClose.cshtml.
Let's add the body open and body close sections to the top and bottom of your body tag like so:
<body>
@Html.Partial("_BodyOpen")
...
The contents of the body. There should be lots of HTML here
...
@Html.Partial("_BodyClose")
</body>
Body open area
The body open area is mostly for javascripts that you need to run in this section of the document. It's not recommended that you put content in here.
Open up the /Skins/{SkinName}/Views/Shared/_BodyOpen.cshtml file.
Notice the following items:
The IE8 Media query support
The page info token
The preview bar for previewing different skins from the admin console
The "script.bodyopen" xmlpackage token
Remove these items above from your new _Layout.cshtml file.
If you have any other scripts that you would like to add to this section from you layout file, go right on ahead. Resources placed here will also be shared with the pop up window layout.
Body Close Area
The body close partial is for javascripts so keep that in mind as you decide what to put in here.
Now open up the /Skins/{SkinName}/Views/Shared/_BodyClose.cshtml file.
Notice the following:
The BuySafe token
The Bongo token (Note - Bongo have now deprecated their Extend product)
The Google Trusted Stores Token
The closing body tag javascripts (including bootstrap.js)
The "script.bodyclose" xmlpackage token
Remove the items above from your _Layout.cshtml file. Feel free to move other scripts that would make sense into this file. These scripts will also be used in the pop up window layout.
If you use the old component art menu your're going to need to
replace it with something more modern. You will likely be able to use
the new Bootstrap menu to do what the old component art menu did. I recommend commenting the menu out during the initial template conversion. Then once the conversion is complete, and you're happy with the way things look without the menu, copy the navbar html out of our default version 10 _Layout.cshtml file and replace the commented out ComponentArt menu with the new Bootstrap navbar. This works pretty nicely. Then you can make a few color changes to make things look the way you want.
Breadcrumb
Replace the breadcrumb with this code from the default layout file:
@Html.Action(
actionName: "Detail",
controllerName: "Breadcrumb",
routeValues: new
{
PageTitle = ViewBag.PageTitle,
PathInfo = ViewBag.PathInfo
})
Notices area
Wherever you'd like error/validation messages to appear in your layout (usually just above the breadcrumb), add this code:
Now you should be able to load up the site in a browser and see what it looks like. I like to cross my fingers at this point. It seems to help.
Common issues are
Missing CSS references. Make sure to reference your CSS files in their new location in the /Skins/{NewSkinName}/Css folder.
Missing javascript references
If you had a custom template for your homepage or other pages you'll need to follow instructions here(Custom Layouts ) about adding additional custom layouts. We no longer support the HomeTemplate appconfig. Razor has much more flexible ways of specifying a custom layout file.
Broken links to aspx pages such as account.aspx. Make sure to use the new MVC style links metioned above