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, please see
this page.
Introduction
Welcome to the world of mobile commerce. Your purchase of the Mobile Commerce Plug-in for AspDotNetStorefront® ensures you are well positioned to serve the fast-growing mobile commerce market.
This guide helps you manage your mobile content.
If you have not already installed the mobile commerce plug-in on your site, please refer to the “Mobile Commerce Plug-in Installation Instructions” that were sent along with the Mobile Commerce Plug-in installation files.
Mobile Initialization
During the Mobile Commerce Plug-in install process you should have initialized the platform by going to the “mobilego.aspx” page. Doing so adds several topics and strings to your store so the Mobile Commerce Plug-in runs properly.
Only install the Mobile Commerce Plug-in after you have completed the installation and set-up of your store.
Managing Mobile Content
The Mobile Platform leverages the built in AspDotNetStorefront Locale feature to enable separate content on your
desktop and mobile sites. By default only one locale (your default locale) will be used to manage both desktop and
mobile content. In many cases administrators will need more control over their content; they will need to have
separate copy for the desktop site and the mobile site. The Mobile Platform provides a tool that allows
administrators to leverage Locales to meet these needs. The locale management page was installed with the
Mobile Platform and can be found here:
http://[yoursite.com]/mobilelocalemanagement
You will need to be signed in as an administrator to view this page. This page will take you through the process of
creating and managing Locales for the Mobile Platform. The section below assumes that you have added a second
locale for mobile named “en-CA”.
Modifying and Adding Mobile Content
If you choose to leave the content on your mobile site just as it is on your desktop site, you don’t need to worry
about locales or managing Mobile Content (because it’s the same as you’ve always been used to). However, if you
choose to use Locales to allow separate content on your Mobile and Desktop sites, you will need to know how to
manage Locale data. Managing content on the mobile platform is as easy as editing content in the “en-CA” locale.
Content editing screens for Products, Entities, Topics, String Resources and other content areas contain a locale
dropdown menu that allows you to select the platform with which you are working:
It is important that you, as store administrator, maintain awareness of the platform for which you edit content.
Changing the value in the dropdown menu will change the locale you are editing, and therefore the platform you
are editing. Remember that “en-CA” is the locale that the mobile platform will use and “en-US” is the locale that
the desktop version will use. Each locale will need to be updated separately.
By being able to edit your content independently in either the “en-CA” locale for the mobile platform or the “en-
US” locale for the desktop platform, you will be able to provide your visitors with content designed to display
optimally on the type of device they are using.
Refer to http://[yoursite.com]/mobilelocalemanagement.aspx for more information.
Mobile Content Areas
The image below is a sample screen shot of the Mobile Commerce Plug-in.
Section
A is the header of the mobile commerce plug-in. It is shown on all pages and gives the end user access to commonly used features from any page. Modification of the header requires changes to the mobile skin.
Section
B,
C, and
D make up the dynamic content area of the Mobile Commerce Plug-in. These sections of the plug-in will change based on the page you are on. The content in Section
B,
C, and
D are home page only sections.
Section
B and
C are contained in the MobileHomeTopIntro topic. By default, section
B contains a listing of top-level Genres. Section
C contains a link to a top-level Category listing page.
Section
D appears only if you have enabled AspDotNetStorefront’s built-in “featured products” feature. If you have, this section will display your featured items.
Section
E shows contact links and a back button on all pages other than the home page. This area can be edited via the topic named MobileGlobalFooter.
Please refer to the Content Guide for more information and examples.
AppConfig Parameters
Mobile.AllowAddressChangeOnCheckoutShipping:
This AppConfig enables a dropdown box on the shipping selection page that allows the user to switch addresses. This can be useful in mobile applications.
Mobile.AllowMultishipOnCheckout:
Not supported within the Mobile Commerce Plug-in – do not touch!
Mobile.ContactPhoneNumber:
For Developers Use Only - This AppConfig allows the user to call directly from their mobile device. If this feature is enabled (via the “Mobile.IncludePhoneLinks” AppConfig) the call link will dial the phone number contained in this AppConfig.
Mobile.DefaultXmlPackageEntity:
For Developers Use Only - This AppConfig defines the xml package that the Mobile Commerce Plug-in uses by default for entity pages. The default value for this AppConfig is “mobile.entity.default.xml.config”. The associated xml package is included in the Mobile Skin.
Mobile.DefaultXmlPackageProduct:
For Developers Use Only - This AppConfig defines the xml package that the Mobile Commerce Plug-in uses by default for product pages. The default value for this AppConfig is “mobile.entity.default.xml.config”. The associated xml package is included in the Mobile Skin.
Mobile.Entity.ImageWidth:
For Developers Use Only - This AppConfig defines the width of product image widths on entity pages. Note that a large value in this field might break the display of this field. This value does not necessarily need to match the width of your product images; they will be resized with CSS.
Mobile.Entity.PageSize:
This AppConfig sets the number of products to list on product listing pages.
Mobile.FeaturedProductsCSV:
Undocumented and unsupported. The mobile home page will pull featured products from the category defined by the built-in AspDotNetStorefront AppConfig “IsFeaturedCategoryID”.
Mobile.HasInitialized:
For Developers Only – Do Not Touch! This AppConfig keeps track of whether or not the Mobile Commerce Plug-in has initialized itself. To re-initialize set this value to “false”. Re-initializing will overwrite all data in your mobile locale.
Mobile.IncludeEmailLinks:
If this AppConfig is set to “true” the store will show a link to email the store administrator on every page. These emails will be sent to the email address listed in the built in AppConfig “GotOrderEMailFrom”.
Mobile.IncludePhoneLinks:
If this is set to “true” the store will show a link to call your store’s phone number on every page. This phone number can be changed via the AppConfig “Mobile.ContactPhoneNumber”.
Mobile.ProductSlider.ImageWidth:
For Developers Use Only - This AppConfig defines the widths of the images in the product slider. This value should space images appropriately on mobile devices when paired with the value in the “Mobile.ProductSlider.Width” AppConfig. The product slider is used for featured products, recently-viewed products, related products, upsell products, and “also bought” products.
Mobile.ProductSlider.Width:
For Developers Use Only - This AppConfig defines the number of products each pane in the product slider2 should display.
Mobile.ProductSlider.MaxProducts:
This AppConfig sets the maximum number of products to show in a product slider2. The fewer products allowed in a product slider, the faster pages with product sliders will load. This number of products should be a evenly divisible by the value in “Mobile.ProductSlider.Width “.
Mobile.ShowAlternateCheckouts:
This feature is unsupported. Please leave set to “false”.
Mobile.SkinID:
For Developers Use Only - This value contains the skin id for your mobile skin. In standard mobile setups this AppConfig should be set to “2”.
Mobile.TopicsShowImages:
This feature is unsupported. Please leave set to “false”.
Support
If you have further questions or comments, please feel free to contact
our help desk.
Appendix A – Content Guide
Mobile Topics
• MobileHomeTopIntro: The “MobileHomeTopIntro” topic within AspDotNetStorefront contains the content visitors see as they first enter your site from their mobile device. When the Mobile Commerce Plug-in initializes, it will show genres on the homepage by default, with a link to shop your store’s categories.
• MobileGlobalHeader: This topic is empty by default. Anything put into this topic will show between the site header and content area. This would be a good location for a store banner or promotion. It is recommended that you keep this content short because it will take up screen space on every page.
• MobileGlobalFooter: The initialization process will put a token into this topi, (!XmlPackage name=”mobile.footer”!), that will show a back-link a home-link, and email/call links if their AppConfigs are enabled. You can add content above or below this token if you would like to add to the global footer. Removing this token is discouraged.
Useful Links
• mobilego.aspx: This allows you to see the mobile version of the site on a non-mobile device.
• mobileleave.aspx: This allows you to get back to the desktop version of the website.
• mobileclearcookie.aspx: This allows the cart to use the user agent detection again to display the mobile skin.
• e-mobile.categories.aspx: This page lists your store’s top-level categories.
• e-mobile.sections.aspx: This page lists your store’s top-level genres.
Useful Tokens
• (!XmlPackage name=”Mobile.categories”!) – this token will list categories in a mobile formatted list.
• (!XmlPackage name=”Mobile.sections”!) – this token will list genres in a mobile formatted list.
Global Style (CSS knowledge required)
Most of the HTML on the Mobile Commerce Plug-in is based around unordered lists (<ul>) and list items (<li>). Each distinct content area is defined by its own li. In link lists (shown right) is seperated by a thin grey line. The top content area is a list item with formated HTML inside of it. Anything inside of a li will have the appropriate padding applied to it. The grey dividers are defined by li with the class “group”. The top one is an empty li.group while the bottom one contains the text “Contact Links”. Links with the arrow pointing right are defined as li a.fullwidth while links pointing left are defined as li a.fullwidth.back.
Here is the HTML code for the content of this home page:
<ul>
<li><span style="font-size: large;"><strong>Welcome to the AspDotNetStorefront <font
color="#0000FF">Mobile Commerce Plug-in</font> demonstration site. </strong></span>
<br />
<br />
Please be sure to have a look at the features listed below. </li>
<li></li>
<li><a href="e-mobile.categories.aspx">Shop AspDotNetStorefront Manual</a> </li>
<li><a href="javascript:history.back()">Back </a></li>
<li>Contact Links</li>
</ul>
Content Management Example
There are three main static content areas for the Mobile Commerce Plug-in:
1. Global Header (MobileGlobalHeader topic)
2. Home Page (MobileHomeTopIntro topic)
3. GlobalFooter (MobileGlobalFooter topic)
The Global Footer will show at the bottom of every page of the site.
The MobileHomeTopIntro defines the content on the home page.
The Global Header will show on all pages between the top navigation and the content area.
As an example, we’ll add a featured-products banner to the MobileGlobalHeader topic.
Follow these steps to add a featured-products banner to the mobile global header – the area that appears at the top of every screen on your visitor’s mobile device.
1. Open the Manage Topics screen within the AspDotNetStorefront administrator panel.
2. Scroll down, if necessary, to find and click the MobileGlobalHeader topic from the list.
3. Insert any content you like into the editor. For this example, we clicked the Design View button, and inserted a graphic (“What’s Hot? Click here for featured products!”).
4. We wanted that graphic to link to a promo page, so we clicked the HTML button (< >), then added the snippet shown in the following figure:
5. Click the Update Topic at the bottom of the screen, and you’re finished!
