10.0.x
541 201 9965 Email Website
Contents
:
Search:

Home > Skinning > Upgrading a skin from v8 to v10

Upgrading a skin from v8 to v10

Getting setup

  • 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.

    This:

    background-image: url(images/mybackground.gif);

    Becomes This

    background-image: url(../images/mybackground.gif);

Images

  • 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):
    @Html.Action(ActionNames.Detail, ControllerNames.MetaTag, new { metaTitle = @ViewBag.MetaTitle, metaDescription = @ViewBag.MetaDescription, metaKeywords = @ViewBag.MetaKeywords })
  • Replace your jquery reference and the adnsf$ alias with this code from the default layout.

    • Replace this
      <%-- jQuery is required in versions 9.4 and higher --%>
      <script src="jscripts/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        adnsf$ = jQuery; <%-- to avoid conflicts with existing jQuery versions and other javascript frameworks, change this line to adnsf$ = jQuery.noConflict(); --%>
      </script>
    • with this:
      @* Bundle and minify jQuery. *@
      @AspDotNetStorefront.Optimization.AdnsfBundler.RenderScriptBundle(
        bundlePath: "~/scripts/jquery",
        filePaths: new []
        {
            "~/scripts/jquery.js",
            "~/scripts/jquery.adnsfalias.js"
        }
      )
    • 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.
    @* Bundle and minify CSS. *@
    @AspDotNetStorefront.Optimization.AdnsfBundler.RenderStyleBundle(
      bundlePath: Url.SkinUrl("css/bundled"),
      filePaths: new []
      {
          Url.AppRelativeSkinUrl("css/bootstrap.css"),
          Url.AppRelativeSkinUrl("css/font-awesome.css"),
          Url.AppRelativeSkinUrl("css/base.css"),
          Url.AppRelativeSkinUrl("css/style.css"),
      }
    )
  • 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:
    @AspDotNetStorefront.Optimization.AdnsfBundler.RenderStyleBundle(
      bundlePath: "~/bundledrootcss",
      filePaths: new []
      {
          "~/ImInTheRootFolder.css"
      }
    )
  • Don't forget to move any css files that are not in your skin folder into the project
  • If you do not use the CSS bundler you can reference your skin css more typically like so:
    <link href="~/skins/@Html.Token("SkinName")/css/mystyles.css" rel="stylesheet" type="text/css" />
  • 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:
    @* Bundle and minify JavaScript. *@
    @AspDotNetStorefront.Optimization.AdnsfBundler.RenderScriptBundle(
      bundlePath: "~/scripts/bundled",
      filePaths: new[]
      {
          "~/scripts/myscript.js",
          "~/scripts/anotherscript.js",
          Url.AppRelativeSkinUrl("scripts/relativetoskin.js"),
      }
    )
  • Like the CSS, don't try to bundle remote paths and make sure your bundlePath parameter is unique if you use several bundles.
  • If you don't want to bundle your javascript you can do something like this:
    <script type="text/javascript" src="~/skins/@Html.Token("SkinName")/scripts/myscript.js"></script>
  • 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.

String Resources references

String resources used to be referenced like this:

(!StringResource Name="AppConfig.ManufacturerPromptPlural"!)

 

Now we do this:

@Html.StringResource("AppConfig.ManufacturerPromptPlural")

Xmlpackage references

  • Xmlpackages used to be referenced like this
    (!XmlPackage Name="rev.manufacturers"!)
  • We'll want to replace that syntax with this
    @Html.XmlPackage("rev.manufacturers")
  • Sometimes you'll need to pass additional parameters. Here's the old style:
    (!XmlPackage Name="myXmlPackage" extrainfo="Super Important" !)
  • Add your additional parameters with a new anonymous type like so:

    @Html.XmlPackage("myXmlPackage", new { extrainfo = "Super Important" })

     

    Topic references

    old:

    (!Topic Name="helpbox"!)

     

    new:

    @Html.Topic("helpbox")

     

    Other token references

    old:

    (!USERNAME!)

     

    new:

    @Html.Token("USERNAME")
  • For more information on tokens see the token reference page
  • 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.
  • 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:

<div class="notices">
    @Html.Action(ActionNames.Index, ControllerNames.Notice)
</div>

 

Main contents area

old:

<asp:PlaceHolder ID="PageContent" runat="server"></asp:PlaceHolder>

 

new:

@RenderBody()

 

Replace your search form HTML with this:

@Html.Partial("_Search")

At the bottom of the body area, just above @Html.Partial("_BodyClose"), add this code if you're going to be using the popup minicart or the wishlist:

<!-- Minicart modal -->
@Html.Action(ActionNames.Index, ControllerNames.Minicart, new { cartType = CartTypeEnum.ShoppingCart })
   
<!-- Miniwish modal -->
@Html.Action(ActionNames.Index, ControllerNames.Minicart, new { cartType = CartTypeEnum.WishCart })
   
<!-- Minicart and miniwish resources (javascript and overlay html) -->
@Html.Action(ActionNames.MinicartResources, ControllerNames.Minicart)

You will want to replace any links to aspx pages such as 'account.aspx' with the new MVC style Url.Action(). So this:

<a href="account.aspx">Your Account</a>

 

Becomes:

<a href="@Url.Action("Index", "Account")">Your Account</a>

 

This will allow you to change your URLs to the modern styles when you're ready at some point in the future.

For more information about building links see Mvc Link Reference.

If your template file pulls in topics for blocks of HTML content, you will also want to update any links that those topics contain as follows.

Replace links to aspx pages like so:

<a href="account.aspx">My Account</a>

 

With this:

<a href="(!Url actionname='Index' controllername='Account'!)">My Account</a>

 

Replace any links to topics such as this:

<a href="t-faq.aspx">faqs</a>

 

With this style link:

<a href="(!TopicLink Name='faq'!)">faqs</a>

 

Testing and resolving issues

  • 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


Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo