Draft:X-Cart Mobile

From X-Cart 4 Classic
Revision as of 03:45, 4 December 2012 by Dohtur (talk | contribs)
Jump to: navigation, search

Overview

X-Сart Mobile is an X-Cart module that allows your customers to buy from you through a mobile-optimized version of your online store. The module easily integrates with your existing X-Cart based store allowing you to extend your business reach and provding an additional sales channel.

Here's what it looks like:
Node 310 iphone 01.jpg Node 310 iphone 02.jpg Node 310 iphone 03.jpg

System requirements

To be able to successfully install and use the X-Cart Mobile module, you need a working copy of X-Cart GOLD or PRO v4.4.0 - 4.5.2 or a copy of any X-Cart edition v4.5.3 or later installed on your server.

Note: If you do not remember the version of X-Cart on which your store is based, you can look it up in the Environment info section of the Summary page in X-Cart Admin area.

Installation and Removal

Obtaining the latest version

To obtain the latest version of X-Cart Mobile:

  1. Sign in to your X-Cart Account.
  2. In the File Area section, find the X-Cart Mobile distribution package and download it to your computer.
    The distribution package you need is archived in the file x-cart-mobile-xcart-x.y.z.tgz, where x, y and z indicate the version of the module. Make sure the version of the module matches the version of your copy of X-Cart.

Installing X-Cart Mobile

To install the X-Cart Mobile module:

  1. Copy the module distribution package you have downloaded to the X-Cart root directory on your server or hosting account.
    • If you are using a Windows-based server or a UNIX-based server without terminal access:
    a) Extract the contents of the archive with the X-Cart Mobile module files to a directory on your system using your favorite compression program (WinZIP or any other archiver that supports TAR files).
    b) Use an FTP client to upload all the files extracted from the archive (retaining the directory structure) to the X-Cart root directory on your server or hosting account.
    • If you are using a UNIX-based server with terminal access:
    a) Use an FTP client to upload the archive with the X-Cart Mobile module distribution package to the X-Cart root directory on your server or hosting account.
    b) Decompress the package by typing the following command:
    tar -xzvf x-cart-mobile-x.y.z.tgz
    Important: Make sure to maintain the directory structure while unpacking and uploading the distribution package; otherwise, some critical files can be overwritten!
  2. In a web browser, run the installation script at httр://<YOUR_XCART_DOMAIN>/install-xcartmobile.php, replacing the <YOUR_XCART_DOMAIN> part with the actual domain name of your X-Cart based store.
  3. Enter the Auth code, accept the License Agreement and click the Next button.
  4. The installation script copies the files and activates the module. Click the Next button to continue.
  5. The installation script generates a new system fingerprint. Click the Next button to complete the installation.

Uninstalling X-Cart Mobile

To remove X-Cart Mobile module from your store:

  1. In a web browser, run the installation script at httр://<YOUR_XCART_DOMAIN>/install-xcartmobile.php replacing the <YOUR_XCART_DOMAIN> part with the actual domain name of your X-Cart based store.
  2. Choose the option Uninstall the module, enter the Auth code, accept the License Agreement and click the Next button.
  3. Once the installation script has removed the X-Cart Mobile module files and deactivated the module, click the Next button to complete the uninstallation.
  4. On the Uninstallation complete screen, click Next to leave the Wizard.
    Important: After you have uninstalled X-Cart Mobile, be sure to remove the X-Cart Mobile distribution package from your web directory as well.


Enabling X-Cart Mobile module in X-Cart

Once you have installed the X-Cart Mobile module, enable it in the X-Cart Admin area. To enable X-Cart Mobile in X-Cart:

  1. Log in to the X-Cart Admin area and go to the Modules section (Settings menu->Modules).
  2. In the list of modules, find the X-Cart Mobile item and select the check box opposite it on the left.
    File:XC Mobile 01.png
  3. Click the Apply changes button to apply the changes.

Configuring X-Cart Mobile

After the X-Cart Mobile module has been installed and enabled in your store, you should check and adjust its configuration:

  1. In the Modules section of X-Cart Admin area (Settings menu->Modules), click the Configure link opposite the name of the u>X-Cart Mobile module.
    The module configuration page (titled by the name of the module) opens:
    [[Image:]]
  2. Adjust the settings on the module configuration page:

&&&&& # Modify the home page content
XC Mobile 02.png

  1. Check the "Parse Smarty tags in this content" check box if you are using such tags inside.
  2. Adjust the settings in the Advanced settings section:
    XC Mobile 03.png
    Featured products
    Show Featured products on home page: This toggles featured products of root category appearance on home page.
    Show Featured products on categories pages: This toggles featured products appearance on a categories pages where they are set.
    Bestsellers
    Show Bestsellers on home page: This toggles the Bestsellers module on home page.
    Show Bestsellers on categories pages: This toggles the Bestsellers module on categories pages.
    Pagination options
    Products per page: This sets the number of products to be showed at-once on categories, search result and manufacturers pages.

FAQ

How can I modify the default (gray) color scheme?

&&&&& Use the Theme Roller for that. Go to http://jquerymobile.com/themeroller/, click Get Rolling, then click the Import button on the top panel. In the popup, set the Upgrade to version selector to "1.2.0" and click the Import Default Theme link. After CSS code is displayed, click Import. Now you're ready to customize the color scheme. There is the Help center (right top button), where you can find all the main tips about how to use the Theme Roller. When you're done customizing the color scheme, click the Download button on the top panel, give your color scheme a name (for example, "my_theme") and save the package with the new scheme to your local computer. Unzip the package and find the main CSS file (If the name you used for your color scheme was "my_theme", your main CSS file is "my_theme.css"). Rename this file to "jquery.mobile.css", then replace the file "skin/common_files/modules/Xcart_Mobile/lib/jquery.mobile.css" with this one using FTP/SSH or the "Edit Templates" tool from X-Cart's backend.

Is there a way to add my logo to all the pages?

Yes. For instance, to change the default X-Cart logo on the header "Cart" button, just replace the image skin/common_files/modules/Xcart_Mobile/images/top_icons/cart.png with the image you would like to use instead of it. The size &&&&& of the image should be 60x52px. &&&&& As for the ALL pages. There is the major template: skin/common_files/modules/Xcart_Mobile/customer/page.tpl

Is there a way to test X-Cart Mobile without a mobile device, right on my desktop?

Yes, there is. To be able to see the mobile version of your store site on your computer as if you were using a mobile device, you need to be able to switch the user agent in your browser. Some browsers have built-in features allowing you to switch the user agent, others require that a special extension be installed.

In Google Chrome, you can use the built-in User Agent switcher:

  1. Open the Developer Tools (Ctrl+Shift+I on Windows/Linux, Command - Option - I on Mac OS X)
  2. Click the "settings" icon at the bottom right corner of the window
  3. Check "override user agent" and select one of the options (Internet Explorer 7/8/9, Firefox 4/7 for Windows/Mac, iPhone, iPad and Nexus S running Android 2.3). You can also select "other" and enter a custom user agent.

The Safari browser also provides a built-in tool for switching the user agent:

  1. In Safari, click Edit on the menu bar, then go to Preferences.
  2. Go to the Advanced tab.
  3. Select the checkbox for the Show Develop menu in menu bar option.
  4. Exit from the Preferences dialog window; a new "Develop" menu will show in the menu bar.
  5. Click Develop on the menu bar.
  6. Select User Agent in the pull down menu.
  7. Select the required user agent if available, or else click on Other to enter custom defined user agent string to use in Safari.

In Mozilla Firefox, you can install an add-on for changing the user agent. A good list of user agent changing add-ons for Mozilla Firefox is available here: https://addons.mozilla.org/en-US/firefox/search/?q=user+agent+switcher.

And finally, there's a really powerful tool called Opera Mobile Emulator http://www.opera.com/developer/tools/mobile/.

How can I track orders placed from mobile devices?

You can track sales made through the mobile version of your store using X-Cart's standard Orders search feature.

To find orders containing products added via mobile:

  1. Open the Orders page (Orders->Search for orders)
  2. Click [+] More search options.
  3. From the "Order features" list, select the option Orders with products added via mobile-storefront.
  4. Configure the rest of the search options as necessary.
  5. Click the Search button.

Note that even if you do a search for orders without the option Orders with products added via mobile-storefront selected, in the search results all the records containing products added via mobile will be marked with an orange "smartphone" icon.