• 10.0.0 - 10.0.24
    541 201 9965 Email Website
  • Contents
    Search:
     

    Home > Skinning > Upgrading a skin from v10 to v10.0.2+

    Upgrading a skin from v10 to v10.0.2+

    This guide is not a complete upgrade guide, instead points out breaking changes for skins in each version. If you have a custom skin you want to keep, and are upgrading your AspDotNetStorefront site, you will need to implement the changes below in each custom skin, or parts of your site will fail to run. If you are ever in doubt, compare your custom view file with the base view file, or the view file in the new version's Default skin.


    AspDotNetStorefront v8 and v9

    This guide is focused on v10.0.2+ sites.  If you are upgrading a skin from v8 or v9, start with these pages:

    Upgrading a skin from v8 to v10.0.0 /10.0.1

    Upgrading a skin from v9 to v10.0.0 /10.0.1


    AspDotNetStorefront 10.0.2

    This update added the Client Resource Manager, which changed the way javascript and CSS are bundled and minified.  This is a somewhat confusing update.  If you want javascript in your custom view files to be included in the bundling and minification process, you'll need to make some changes:

    Client Resource Manager

    Bundling and Minification

     

    AspDotNetStorefront 10.0.3

    The view model for two MiniCart views changed, but they are simple 1 line updates.  If a customer's skin has modified these, you'll need to update these two view files:

    "Views/Minicart/_MiniCartLink.cshtml" and "Views/Minicart/_MiniWishLink.cshtml"

    Change the first line of both of these files:

     

    @model MinicartViewModel

     

    to

     

    @model MinicartLinkViewModel

     

    This update also replaced 'Google Trusted Stores' with 'Google Customer Reviews'.  You will need to remove any overridden 'Google Trusted Stores' files, and instead configure 'Google Customer Reviews.'  Here are the 'Google Trusted Stores' files that need to be removed:

    Views/CheckoutConfirmation/_GoogleTrustedStores.cshtml

    Views/CheckoutConfirmation/EditorTemplates/GoogleTrustedStoresCartItem.cshtml

    XmlPackages/skin.trustedstores.xml.config

     

    AspDotNetStorefront 10.0.6

    Added a new XmlPackage "script.head.xml.config", for scripts that prefer to be located in the <head> tag, such as Google Analytics.

    This requires a 1 line change to each skin's "Views/Shared/_Head.cshtml".  Without this change, Google Analytics will silently stop working.

    After the <meta> tags, add the following line.  You can review the "Default" skin for appropriate placement.

    @Html.XmlPackage("script.head", new { OrderAlreadyConfirmed = ViewBag.OrderAlreadyConfirmed })

     

    AspDotNetStorefront 10.0.14 "WCAG"

    The "WCAG" update changed a lot of base CSS and View files. Some of these base changes require skin changes on the site owner's part in order to keep their current site's look and feel.

    Here are the most noticeable changes, and what you can do to fix them. For the CSS changes, you can copy/paste the CSS fix into the bottom of their skin's "custom.css" file.

    Checkout headers are big (Checkout pencil header icons are big)

    Add this CSS to set the checkout header font size back to normal:

    .checkout-header {

        font-size: 24px;

    }

     

    Duplicate, weird text is showing throughout the site

    This text is only supposed to be visible to screen readers. Add this CSS to hide it from other browsers:

    .screen-reader-only {

        position: absolute;

        height: 1px;

        width: 1px;

        clip: rect(1px 1px 1px 1px); /*IE 6 and 7*/

        clip: rect(1px,1px,1px,1px);

        clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

        -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

        overflow: hidden !important;

    }

     

    Cart and Wishlist buttons show when they have 0 items

    Add this CSS to hide the cart and wishlist buttons until the user has added something to their cart or wishlist

    a.user-link[aria-disabled] {

        display: none;

    }

     

    Search textbox has two rows of text, or a new label

    Add this CSS to hide the new search textbox label

    .search-box-label {

        display: none;

    }

     

    MMO Skin 6 'Fuber' top menu is broken

    You are using the latest MMO Skin 6 with an older version of AspDotNetStorefront. Either update AspDotNetStorefront to 10.0.14+, or use an older version of MMO Skin 6

     

    AspDotNetStorefront 10.0.16
    Notify the skin developer if issues occur with the new release that several assembly names and namespaces changed in this release:

    Assembly Names
    AspDotNetStorefrontCommon -> AspDotNetStorefront.Core
    AspDotNetStorefrontControls -> AspDotNetStorefront.Controls
    AspDotNetStorefrontCore -> AspDotNetStorefront.Core
    AspDotNetStorefrontGateways -> AspDotNetStorefront.Gateways
    Gateway* -> AspDotNetStorefront.Gateways.*
    AspDotNetStorefrontWSI -> AspDotNetStorefront.Wsi
    AspDotNetStorefrontBuySafe -> AspDotNetStorefront.BuySafe
    AspDotNetStorefrontEventHandlers -> AspDotNetStorefront.EventHandlers
    AspDotNetStorefrontPromotions -> AspDotNetStorefront.Promotions
    XsltObjects -> AspDotNetStorefront.XsltObjects

    Namespaces
    AspDotNetStorefrontCommon -> AspDotNetStorefront.Core
    AspDotNetStorefrontControls -> AspDotNetStorefront.Controls
    AspDotNetStorefrontCore -> AspDotNetStorefront.Core
    AspDotNetStorefrontGateways -> AspDotNetStorefront.Gateways
    AspDotNetStorefrontGateways.Processors -> AspDotNetStorefront.Gateways.*
    AspDotNetStorefrontWSI -> AspDotNetStorefront.Wsi
    AspDotNetStorefrontEventHandlers -> AspDotNetStorefront.EventHandlers
    XsltObjects -> AspDotNetStorefront.XsltObjects

    AspDotNetStorefront 10.0.18 "Inline Editing"

    AspDotNetStorefront 10.0.18 had several new features, including Inline Editing, and upgrading jQuery to v3

    jQuery v3 no longer supports the window.load function.  We used this in 'promo-window.xml.config'.  After upgrading, this will show as a javascript error in the browser console.  When upgrading to 10.0.18 or later, you will need to modify this xml package, and change one line of code to use the document ready event instead.

    Change this: 

     

    $(window).load(function() {

     

    to this:

    $(document).ready(function() {

     

    When upgrading to 10.0.18 or later, you need to add one line to the bottom of each skin's "Views/Shared/_BodyClose.cshtml" file:

    @Html.Action(ActionNames.Index, ControllerNames.InlineEdit)

     

    This will enable the new Inline Editing functionality for this skin.

     

    AspDotNetStorefront 10.0.21

    When upgrading to 10.0.21, there are two skin changes to keep track of.

    The first is a change to Css\base.css.  Attribute "-webkit-appearance: none;" should be added to the .button-transparent selector. Example:

    .button-transparent {
    border: none;
    background: transparent;
    -webkit-appearance: none;
    }

    The second is a change to Views\Shared\_BodyOpen.cshtml.  The following section of four lines about IE8 support should be removed from line 1:

    <!-- Respond.js IE8 support of media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->


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