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.
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 Departments. Section
C contains a link to a top-level Category listing page.
Section
D 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.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:
Please leave set to “true” for use with PayPal.
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.ShowMobileOniPad:
When set to “true” store will show mobile skin when loaded on the iPad rather than default store skin. This is set to “false” by default.
Mobile.TopicsShowImages:
This feature is unsupported. Please leave set to “false”.
Support
If you have any questions or require additional support, you can contact our support team at support@aspdotnetstorefront.com. We are available Monday through Friday, from 8 AM to 5 PM Pacific Time.
We also offer packages to assist you with training, customization and optimization.
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 departments (a.k.a. sections) 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
• e-mobile.entitylist.aspx?entityname=category: This page lists your store’s top-level categories.
• e-mobile.entitylist.aspx?entityname=section: this page lists your store’s top-level sections.
Useful Tokens
Topic Tokens:
• (!XmlPackage name="Mobile.entitylist" entityname=”category”!) – this token will list categories in a mobile formatted list.
• (!XmlPackage name="Mobile.entitylist" entityname=”sections”!) – this token will list sections in a mobile formatted list.
• (!XmlPackage name="Mobile.entitylist" entityname=”category” rootentityid=”7”!) – this token will list the sub-categories for a specific category, in this case category 7. To list a different set of sub-categories, replace 7 with the parent category ID desired.
Codebehind Tokens:
• Literal Token for Category: <asp:Literal runat="server" Text='<%$Tokens:XmlPackage,mobile.entitylist.xml.config, entityname=category %>' />
• Literal Token for Section: <asp:Literal runat="server" Text='<%$ Tokens:XmlPackage,mobile.entitylist.xml.config, entityname=section %>' />
• Literal Token for Specific: <asp:Literal runat="server" Text='<%$ Tokens:XmlPackage,mobile.entitylist.xml.config, entityname=category&rootentityid=7 %>' />
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 gray 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 console.
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!
Adding Additional Mobile Installations to MultiStore
To add additional mobile installations to a MultiStore version of AspDotNetStorefront, please see the instructions in the Mobile Commerce Plug-In installation instructions.