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:
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:
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:
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:
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:
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:
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]-->
AspDotNetStorefront 10.0.22
When upgrading to 10.0.22, there are 2 skin changes to keep track of.
The first is some changes to Css\base.css. Offsite images have some extra padding. Example:
.address-offsite-image { padding-bottom: 7px; }
The second is that payment-icons.css has been removed. This should be deleted from the Skin's Css folder if it exists and should also be removed from the Views\Shared\_Head.cshtml. Example:
@Html.RenderStyleBundle( bundlePath: Url.SkinUrl("css/_skin_bundle"), filePaths: new[] { Url.AppRelativeSkinUrl("less/bootstrap.css"), Url.AppRelativeSkinUrl("less/themestyles.css"), Url.AppRelativeSkinUrl("css/font-awesome.css"), Url.AppRelativeSkinUrl("css/base.css"), Url.AppRelativeSkinUrl("css/fonts.css"), Url.AppRelativeSkinUrl("css/social-icons.css"), Url.AppRelativeSkinUrl("css/payment-icons.css"), Remove this line Url.AppRelativeSkinUrl("css/custom.css"), })
AspDotNetStorefront 10.0.23
When upgrading to 10.0.23, there are 3 skin changes to keep track of.
The first is some changes to Css\base.css. Skus and manufacturer part number have new formatting. Example:
The second is that Open Graph and Twitter Tag support has been added. This change must happen in the Views\Shared\_Head.cshtml. The "@Html.Action" should be replaced. Example:
The third change is that Bootstrap has been upgraded. The following files should be overwritten in the Skin with their latest versions. Please note that the "Optional" changes should be overwritten, but please make sure to save a copy of the originals if you end up seeing some unwanted style changes on the front end. Sometimes these files get customized by clients or Vortx and if we overwrite them, we lose those customizations.
When upgrading to 10.0.25, there are 5 skin changes to keep track of.
jquery.js - Upgraded to v3.5.1
jQuery has been updated in 10.0.25 from version 3.4.1 to 3.5.1. This upgrade includes security changes.
If you are including an older version of jQuery in one of your skins' Scripts folder, you may wish to delete or upgrade it to jQuery v3.5.1.
Please note that the version in your root Scripts folder is minified and optimized for use with AspDotNetStorefront 10.0.25.
minicart.js - Support for PayPal Commerce
Minor changes have been made to Scripts file minicart.js, which is used when adding items to the shopping cart.
If you are overriding this file in your skins, please consider integrating the new PayPal Commerce support into your modifications.
The latest version of minicart.js can be found in your root Scripts folder.
base.css - Style changes and PayPal Commerce styles
Some minor style corrections and PayPal Commerce styles have been made to base.css, which can be found in the Default skin's Css folder.
_BodyClose.cshtml - Internet Explorer Deprecation, Admin Console Link
Two new features have been added to BodyClose.cshtml, which can be found in the Views/Shared folder of your site's Default skin.
The first feature displays an Internet Explorer deprecation warning. Internet Explorer is no longer officially supported or updated and contains security vulnerabilities. It's recommended that you include this message to encourage your shoppers to switch to a newer, safer browser.
The second feature will show a new button which takes you to the Admin console if you are logged in to an admin account and have access to the Inline Editor tool.
_Layout.cshtml - Internet Explorer Deprecation, PayPal Commerce
Layout.cshtml can be found in the Views/Shared folder of your site's Default skin.
There are multiple changes to this file which allow for the Internet Explorer Deprecation message and PayPal Commerce support.
It may be easiest to save your skin customizations to this file elsewhere, copy up the Default skin version, and re-make your customizations to that file.
AspDotNetStorefront 10.0.26
In 10.0.26 many of the changes were focused on fixing display and functionality for PayPal Commerce.
CSS Styles
Base.css
PayPal Commerce styles have been updated to be more specific and have less effect on the rest of the site styles. The following can be replaced with the new styles.
10.0.25 styles:
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
10.0.26 styles:
#paypal-commerce-credit-card-intake.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
#paypal-commerce-credit-card-intake.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
#paypal-commerce-credit-card-intake.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
There is also a small update for product variants, unrelated to PayPal Commerce, that can be appended to base.css:
#variantSelector option:disabled {
background-color: #ccc;
}
themestyles.css
The following styles should be appended to themestyles.css. These fix minor display issues with the forgot password page and gift cards:
.grid-item-name-wrap .fa-angle-right {
margin-left: 5px;
}
.checkout-giftcard-serial-number {
height: inherit;
}
.forgot-password-email {
margin-top: 15px;
}
Views
Skin\Views\Shared\_BodyClose.cshtml
If your site is using MaxMind Fraud Protection you can optionally add a new section to your _BodyClose.cshtml (in the Views\Shared folder of your skin). The new section enables device tracking which helps MaxMind detect specific styles of attack.
Views\Account\RequestPasswordReset.cshtml
New styles and an additional string resource, "RequestPasswordReset.Message", help to make the password reset feature more user-friendly.
Views\Checkout\Index.cshtml
Fixes for Gift Cards and PayPal Commerce have been added to this view.
Views\CheckoutGiftCardEntry\_AddGiftCard.cshtml
Fixes for Gift Cards have been added here.
Views\InlineEdit\_InlineEditHeader.cshtml
An inline editor fix for scheduled topics has been added here.
The rest of these Views have changes for PayPal Commerce. These include fixes to how PayPal Commerce is displayed and fixes to how it operates. All of these should be included in your 10.0.26 site if you intend to enable PayPal Commmerce:
Email This Article
Previous Article
Next Article