Please note: This information covers the enhanced mobile functionality available with the purchase of the Mobile Commerce Plug-In. For details of the built-in mobile functionality on version 9.2 or earlier, please see this page. For version 9.3 and later, see here.
Introduction
Thank you for your purchase of the AspDotNetStorefront Mobile Platform. This guide will take you through the process of installing mobile on a default build of AspDotNetStorefront. The process will include:
1. Backing up your current site files and database
2. Copying files onto your website
3. Merging four files with already existing files on your website
4. Initializing the Mobile Platform
5. Testing both the desktop version and the new mobile version of your site.
Before You Begin
Before you begin please ensure that:
• You have a fully functioning AspDotNetStorefront site running Service Pack 1.
• You have a backup of your site files and database, and a plan and permission to restore them should you encounter a problem during the installation process
• You have file access to the root of your website (FTP or RDC are the most common)
• You have a License key for the Mobile Platform
• You have a Deploy Package for Mobile. Note: If your site has significant customizations, this package may need to be modified to work correctly.
• Your site has write/modify access to the /images/ directory (as specified by the AspDotNetStorefront security best practices: http://manual.aspdotnetstorefront.com/p-475-security-best-practices.aspx)
What to Expect
While you are moving and merging files you should expect that your website will experience outages.
After uploading additional files, merging five files, and initializing the Mobile Platform your site will have a Mobile specific look-and-feel. Mobile devices will automatically be directed to the mobile version of your site.
If you would like to view the Mobile portion of your site without a mobile device you can visit “mobilego.aspx” which will flag your computer as a mobile device. To undo this, visit “mobileleave.aspx”.
Installation
Throughout this installation guide the Mobile Platform deployment package will be referred to as
source folders and files. The website files and folders will be referred to as the
target files and folders. Before you begin, you will want to unzip the Mobile Platform package (
source) and open its root folder alongside the root folder of your website (
target).
1. Backup your files and database
IMPORTANT! BACKUP ALL FILES AND YOUR DATABASE IN CASE OF INSTALLATION ERROR.
Ensure that you have a plan and permissions to restore your backups.
2. Copy Additional Files
2.1. Open the “Additional Files” folder in the source files.
2.2. Open the “App_Browsers” folder in both the source and target directories.
2.3. Copy “BlackBerry.browser” from the source “App_Browsers” folder to the target “App_ Browsers” folder.
2.4. Go up a directory in both the source and target directories.
2.5. Open the “App_Code” folder in both the source and target directories.
2.6. Copy “MobileXSLTExtensionBase.cs” from the source “App_Code” folder to the target “App_Code” folder.
2.7. Go up a directory in both the source and target directories.
2.8. Open both “bin” folders and copy Vortx.dll, Vortx.LicenseServer.Client.dll, and Vortx.LicenseServer.Common.dll from the source to the target.
2.9. Open both App_Templates folders and copy the skin_2 folder from the source to the target.
2.10. Go up a directory in both source and target.
2.11. Open both App_Themes folders and copy the skin_2 folder from the source to the target.
Note: If you already have a folder named skin_2, please rename the source folder to the lowest available skin number. If you rename the folder you will need to change the AppConfig “mobile.skinid” to the number you created on the skin folder after initializing the Mobile Platform (step 4.3).
2.12. Go up a directory in both source and target
2.13. Copy the skin_2 folder from the source to the target skins folder. Rename it if necessary as mentioned above.
2.14. Go up a directory in both the source and target directories.
2.15. Copy all the rest of the files contained in the “Additional Files” folder from the source to the target. Note: Do not copy the folders, just the files as shown below.
3. Merging Mobile Modifications
Note: Using a text merging tool makes this part of the installation process much easier. If you are familiar with WinMerge, BeyondCompare, or any other text merging tool, use it to assist merging these files.
3.1. ShowEntityPage.cs
3.1.1. Open the “Merged Files/App_Code” folder in the Mobile Platform source files alongside the App_Code of your website (target).
3.1.2. Open both “ShowEntityPage.cs” files in side-by-side text editors.
3.1.3. Find and replace the line
“m_XmlPackage = m_EntityHelper.m_TblMgr.CurrentField(n, "XmlPackage").ToLowerInvariant();”
with its equivalent from the source file (shown below starting with #region and ending with #endregion).
3.1.4. Close both copies of the “ShowEntityPage.cs” file and save changes to the target file.
3.2. SkinBase.cs
3.2.1. Open both “SkinBase.cs” files in side-by-side text editors. (Still in App_Code.)
3.2.2. Replace the blank space right after
“using AspDotNetStorefrontLayout:”
with its equivalent from the source file (shown below using Vortx.MobileFramework; using
3.2.3. Find and replace the line
“private bool m_ismobile = false;”
with its equivalent from the source file (shown below starting with private bool and ending with } ).
3.2.4. Remove the line
“set { m_ismobile = value; };”
3.2.5. Replace the line
“m_ismobile = HttpContext.Current.Request.Browser.IsMobileDevice || CheckUserAgentForMobile;”
with its equivalent from the source file (shown below starting with //m_ismobile and ending with CheckUserAgentForMobile); ).
3.2.6. Replace the blank space right after
“m_Parser = new Parser(m_EntityHelpers, m_SkinID, m_ThisCustomer);
m_TemplateName = GetTemplateName();”
with its equivalent from the source file (shown below starting with #region Vortx and ending with #endregion ).
3.2.7. Close both “SkinBase.cs” files and save the changes made to the target file.
3.3. showproduct.aspx.cs
3.3.1. Replace the line
“m_XmlPackage = DB.RSField(rs, "XmlPackage").ToLowerInvariant();”
with its equivalent from the source file (shown below starting with #region Vortx Xml and ending with #endregion ).
3.3.2. Replace the line
“if (IsAKit)”
with its equivalent from the source file (if ( IsAKit && !Vortx.MobileFramework.MobileHelper.isMobile())).
3.3.3. Close both “showproduct.aspx.cs” files and save the changes to the target file.
3.4. web.config
3.4.1. Replace the blank space right after
“ <add key="LocalizationFormControlProperties" value="Text,Value,ErrorMsg,ErrorMessage,AlternateText,ImageUrl" />
</appSettings>
<system.web>”
with its equivalent from the source file (shown below starting with <browserCaps>and ending with </browserCaps>).
3.4.2. Replace the line shown below with its equivalent from the source file:
<add name="receipt" namespace="urn:receipt" type="ReceiptXsltExtension, app_code"> </add>.
3.4.3. Close both “web.config” files and save the changes to the target file.
4.1 Initialize the Mobile Platform
Note that initializing the mobile platform will make changes to your database.
4.1.1 Go to http://www.
[yourdomainname].com/mobilego.aspx
4.1.2. This URL will force any device to view the website in mobile mode once the mobile platform has been installed. If it does not display correctly please check that all installation steps were followed correctly.
4.1.3. Visit mobileleave.aspx to leave the mobile site and mobileclearcookie.aspx to allow device detection.
4.2. Install License Key.
4.2.1. Login to your admin console.
4.2.2. In AppConfigs, search for Mobile.LicenseKey.
4.2.3. Insert License key in Value.
4.2.4. Reset Cache
4.3. If you used a skinid other than 2, please change the AppConfig “Mobile.SkinID” to match the skin id you assigned to the Mobile Platform skin folder (in step 0).
4.4. Ensure that both the desktop version and the mobile version of your site display properly.
4.5. Review and set appropriate AppConfigs (search for “mobile”). The AppConfigs are documented
here.
Summary
After adding and merging the mobile files and initializing mobile, your site should display differently on mobile devices and desktop devices. If for some reason the site is not working properly after deploying the Mobile Platform package, please restore the sites from the backups you made and contact support to help trouble shoot.
Adding Additional Mobile Installations to MultiStore
If you have the MultiStore version of AspDotNetStorefront it’s possible to setup a mobile version of each of your stores. The following set of instructions will walk you through a typical setup.
Before you begin please make sure that you have the following:
• An existing mobile installation applied to one of your stores.
• A mobile license key for the additional store’s domain name.
These instructions assume that each of your stores uses a separate skin, and that you will want to setup a different skin for the mobile version of each of your stores as well. This allows each of your stores and their corresponding mobile store to have a different look from the other stores on your AspDotNetStorefront MultiStore Platform.
1. Add a new mobile skin.
1.1. Look at your App_Templates Folder and find your original mobile skin ( If you do not know what skinid it is you can look it up by searching your website’s AppConfig Parameters for “Mobile.SkinID”).
1.2. Duplicate this mobile skin and rename it with the next lowest available SkinID (i.e. if you see a Skin_1, Skin_2, and Skin_3, than you would want to use Skin_4 for your new mobile SkinID).
1.3. Repeat the same steps in the App_Themes Directory. Copy the original mobile skin and assign the new one with the same SkinID as the steps above.
2. Configure Mobile SkinID
2.1. Login to the admin console of the website and go to Configuration > Advanced > AppConfig Parameters.
2.2. Search for “Mobile.SkinId”
2.3. Edit the AppConfig
2.4. Choose the store you are adding the new mobile installation to and enter the new skinid into the dropdown.
2.5. Hit Save.
2.6. Verify that the Mobile SkinID was set for your store.
3. Install License Key
3.1. Search for “Mobile.LicenseKey”.
3.2. Edit the AppConfig parameter (You may find multiple. Click on any of them)
3.3. Make sure to choose your new store from the dropdown if it is not already selected and enter your new mobile license key into the value field.
3.4. Hit the Save button and then reset the cache.
You’re done! Test out your new mobile installation on the front end of the website. Now your new store should have a mobile version.
Support
If you have further questions or comments, please feel free to contact
our help desk.