Dreamweaver Mobile eCommerce

Site Store Professional : Dreamweaver Shopping Cart

Mobile Application Description

Site Store Pro now includes a full mobile version of the sample website and online store.

The Mobile version detects if the user is visiting the website with a mobile device browser and then redirects to the mobile version automatically. Since many users prefer to visit the full-version of websites even when using their mobile devices (i.e. tablets), the customer can also "force" the website to display either the full-version or the mobile version of the site at anytime.

The application uses industry standard browser user-agent detection but can be easily expanded for use with commercial device detection APIs from companies such as Device Atlas, HandsetDetection.com or any other ASP, XML or JavaScript based detection script or API.

Site Store Pro Mobile is now included with the default release of the shopping cart application. Any version downloaded from your account manager or any trial version downloaded after 11/15/2011 will include the mobile device version automatically.

We have also provided a FREE upgrade package and instructions for current users of Site Store Pro who wish to update their website | online store for mobile device support. (See below)

The Mobile version upgrade can be applied to any previous version of Site Store Pro including customized installs. The time it takes to upgrade your installation to include mobile device support will be determined by the number of non-store pages on your site, the amount of non-default store customizations on the install and the developer's familiarity with Dreamweaver template files and doing site-wide updates with DWT files. The average time to upgrade an existing NON-customized Site Store Pro installation with less than 20 pages of non-store content pages is approx 2.5 - 3 hours. Custom installations or installations with a large number of non-store HTML content pages may take significantly longer to convert to a mobile compatible version however.

Site Store Pro Mobile Version Integration Assistance Options

We are providing the following three levels of upgrade services to convert existing (current) Site Store Pro installs to the new mobile version.

FREE: If you have installed Site Store Pro within the last 3months and have less than 20 pages of non-store content on the site (i.e. about us, contact us, privacy statement, etc), we will upgrade one store per customer for free.

BASIC: If you have a version of Site Store Pro older than July 2011 (ver. 2.1107) and have less than 20 pages of non-store content on the site (i.e. about us, contact us, privacy statement, etc), we will upgrade the website for $150.00. If you have more than 3 stores (installations), you will get a 30% discount on all conversions/upgrades.

PREMIUM: If you any version of Site Store Pro that has more than 20 pages of non-store content on the site but less than 50 pages of non-store content. we will upgrade the website for $225.00. If you have more than 3 stores (installations), you will get a 30% discount on all conversions/upgrades,

If you have a store install with more than 50 pages on non-store content (not including the products and store pages), please contact sales for a custom conversion quote.

DIY Mobile Version Upgrade Instructions:

If you prefer to do upgrade your installation yourself, please follow the instructions below . You can also download and print the instructions as a PDF here.

The following instructions assume that your Site Store Pro installation was integrated in Dreamweaver using the DWT (Dreamweaver Template) files that were included with your installation. If you did not use the DWT files or are unsure of how your site was integrated into Site Store Pro, please contact support for assistance.

1) Login to your account manager at https://www.sitestorepro.com/myaccount/ and download the "Mobile Version Upgrade Package" located underneath your currently licensed version. (If your download (upgrade) period has expired, you will not see the link to download the Mobile version and must upgrade your license to a new upgrade renewal period.)

2) Extract the files from the downloaded zip file to your local development | design system into the same directories on your local installation folders.

3) Download all files off your website so you have the most recent content and store files on your local installation folders.

4) Open up the following local Site Store Pro design template files (dwt files) and any other DWT files that you have created for your live website :

main_store.dwt.asp > Updates root website pages, store catalog and product display files in the /store/ folder
shopping_cart_store.dwt.asp > Updates the shopping cart display page. (/store/shopping_cart.asp)
checkout_store.dwt.asp > Updates the store checkout pages in the /checkout/ folder
myaccount_store.dwt.asp > Updates the account registration page and my account pages in the /myaccount/ folder

5) Add the following line of code to each template right above the </head> tag:

6) Add the following file that displays the "Switch" from full to mobile versions of the site somewhere on top of your site design/layout so the user can choose their display preference or override the automatic device detection.

7) Save each template so it updates the associated pages on the site definition with the modifications.

8) Open up the following templates that were copied (installed) from Mobile Upgrade package and modify them to match your design scheme, logo, etc.

main_store_MOBILE.dwt.asp > Updates the MOBILE root website pages, store catalog and product display files in the /store/ folder
shopping_cart_store_MOBILE.dwt.asp > Updates MOBILE the shopping cart display page. (/store/shopping_cart.asp)
checkout_store_MOBILE.dwt.asp > Updates MOBILE the store checkout pages in the /checkout/ folder
myaccount_store_MOBILE.dwt.asp > Updates the MOBILE account registration page and my account pages in the /myaccount/ folder

9) Now comes the fun and long part of the process.... Open up EVERY page on the site that is under the root (i.e. About.asp, Contact.asp) as well as every.asp page in the /store/, /myaccount/, /checkout/ folders and any other content pages you have created that are .asp pages and can display the Site Store Pro "quick cart" display and/or "Search Bar" display.

After you open each page, you need to make a copy of the page ending in _mobile.asp
Example, if you open up about.asp in the root of the installation, you would save a copy of the page called about_mobile.asp

After saving the copy of the page, change the assigned template to the page from the existing template to the one ending with _MOBILE.dwt.asp. Example: if you just saved a copy of about.asp to about_mobile.asp, assign the main_store_MOBILE.dwt.asp template to the new page.

To change the assigned template to a page in Dreamweaver, click on Modify > Templates > Apply Template To Page and then select the appropriate MOBILE template to replace the current NON-mobile template that is assigned to it.

Repeat the renaming of the pages to _mobile.asp and then reassigning to the new MOBILE version of the template(s) until you have duplicated EVERY page on the site with a MOBILE version. Make sure you do not forgot your site homepage (i.e. default.asp or index.asp) If you are using an .html, .htm or .php home page or content pages instead of .asp pages, you can still use the MOBILE version. However, the integration will much more complex and time consuming. Please contact support for assistance if you are not using .asp pages for ALL the site pages on your website that you would like to have a mobile version available as well.

10) After you have duplicated all your site design pages with a _mobile version, open up the following file: /store/item_view_mobile.asp

Replace the CSS reference:

<link href="../css/site_store_pro_product_view.css" rel="stylesheet" type="text/css" />

With...

After replacing the CSS file with the mobile version link, save the and/or close the file.

11) Now, open up the following file: /myaccount/customer_manager.asp

Replace the CSS reference:

With...

After replacing the CSS file with the mobile version link, save the and/or close the file.

11) The mobile application is now installed! Copy the entire site back up to your hosting account* and test with both desktop and mobile devices that the installation is working correctly. *If you have access to a development site / hosting account, we highly recommend testing the new mobile version in a development environment before overwriting your live files.

You can also copy the entire site up to a temporary directory on your live hosting account and then create a new temp SQL server database that points to the temporary install location. If you are creating a temporary database, make sure not to accidently overwrite your live database or change your live connection string to the temporary database and vice versa. If you need assistance in how to setup a testing or temporary installation, please contact support.

Note: The upgrade version of the mobile application does NOT include the one-page checkout functionality released in version 2.1101. Due to our customer's frequently modifying the registration process / form manager pages, we cannot include that in 'default' mobile upgrade package since that would break any previous customizations applied to the site. If you want to upgrade your installation to the new one-page checkout system, please contact support and they will look at your specific install and provide instructions on how you can upgrade to the one-page checkout system now included in the default Site Store Pro release (as of 11/15/2001