Mobile Version

Mobile Version represents a new set of templates suitable for mobile devices such as iphones, cells, tablets etc. Mobile version in ViArt Shop is based on the same principle as multi-sites module where you can add a new site, select individual settings, layout and items per each site.

• Step 1: prepare domain
• Step 2: create a new site
• Step 3: change var_definition.php
• Step 4: select global settings
• Step 5: mobile version adaptation

Step 1: prepare domain

Before creating a mobile version of your site think of the domain you are going to use. There are possible two options:

• a new domain or a subdomain, for example m.site.com or mobile-site.com

In case you select the first option, you need to set up Virtual Hosts on your site and point new domain to the same directory where your main site is located. This configuration can be done either by your hosting provider or by yourself. Please, refer to the below articles on setting up virtual hosts:

Setting Up Virtual Hosts
Configuring and Using Virtual Hosts in Apache

Note: a new domain or a subdomain will require an extra activation for your ViArt Shop license which you can obtain here:
extra activation for mobile version

• a subdirectory on your main site, for example site.com/mobile

If you select the second option then you need to copy all ViArt Shop files into a new directory created in the root folder of your parent site. It could be called "mobile" for example.

Step 2: create a new site

Go to Settings > System > Sites and click Add New. In the appeared window tick off Mobile Version and Redirect to Mobile Site checkboxes and select Parent Site.

After this step is done please pay close attention to the ID of the parent and mobile sites, we will need it when editing var_definition.php file.

Step 3: change var_definition.php file

Next you need to edit var_definition.php file in your shop. Login to your site by FTP (for example, using FileZilla program), find the file includes/var_definition.php, copy it to your computer and then open it with some text editor (for example, Notepad).

• If you use Virtual Hosts and a new mobile domain (e.g. m.site.com) you need to put the following lines in this file:

  $http_host = $_SERVER["HTTP_HOST"];
  if (preg_match("/^m\.site\.com$/i", $http_host)) {
    $site_id = 2; // mobile site - m.site.com
  } else {
    $site_id = 1; // main site - www.site.com
  }
  

  where

  m.site.com - is the URL of your mobile site

  site_id = 1, site_d = 2 are the IDs of your sites (as indicated in the admin panel).

• If you use a subfolder instead of a new domain (e.g. www.site.com/mobile) then you need to uncomment $site_id string like shown below in each var_definition.php file (on parent site and on mobile site):

  

  where:

  $site_id is the ID of the site (as indicated in the admin panel). Usually the first site will be the parent site and it will have site_id = 1. If for any reason your parent site has a different site ID, you should specify the correct ID.

Save var_definition.php file and then replace it in the /includes folder of each site.

Step 4: select global settings

Now let's work on the new site settings. The most important ones are located in Settings > System > Sites:

Global Settings - specify the Site URL of your new site.

Settings for Pages Layouts - when you create a new site it doesn't have any blocks on any pages in CMS so you need to copy them from the main site using 'Settings' link on Settings > System > Sites.

Products - by default all products from the main site are available on the new site so with the help of 'Products' setting you can quickly disable some of the products.

Step 5: mobile version adaptation

At this point the mobile site is fully functional and available at the domain you specified in Global Settings if not you should re-read the steps above. When you go to the main site from any mobile device you will be automatically redirected to the mobile version. If you visit the site for a second time during the same session then you will be transferred to the main site.

The settings described below are optional and are just some tips how to personalize the site, make it more user-friendly, easy to navigate etc.

Page Layout

Go to CMS > Pages Layouts and select for example Home Page Layout. Make sure to switch to Mobile site.

Select One Column layout and remove the blocks you don't need. For example, you can leave only Products Categories and Special Offer blocks. The best Categories List View for a mobile site is probably a 'Two -level list with subcategories' or a 'Chained Menu'. Also you can create a Custom Menu and add the links to any pages you want.

Features which can be assigned individually per each site

With creation of a second site almost everywhere in admin becomes available a new tab "Sites", with its help it is possible to select individual items or settings for each site. Here is the full list of places which could be configured individually: