====== Handling Magento Store Mobile View With String Match Design Exception ====== To enable a mobile view in Magento, you may either add a string match design exception or use a separate mobile view Magento plugin. To use a Magento plugin for a separate mobile view may bring cache-implementation complexity that requires a change to the code. This is out of the scope of this wiki. Let's focus on how to achieve the mobile view through an exact string match by adding design exceptions: -Navigate to the Magento administrative area: **System -> Configuration -> Design -> Themes**. -Pick the preferred mobile Magento theme, such as the default package's bbdistributions template, or other theme. -Click on the **Add Exceptions** buttons beside the **Templates**, **Skin** and **Layout** labels. -In the **Value** fields enter the name of your installed mobile theme. -Enter the following line in the **Matched Expression** fields: iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone Like so: {{ :litespeed_wiki:cache:common:litemage-mobileview-design-exception.png?800 |}} LiteMage needs to cache the website's Mobile version differently than the main version so that mobile pages are not served to desktop users or vice-versa. Add something like the following to the top of the ''.htaccess'' file (these are examples only and you may have your own rules): RewriteEngine on RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone" RewriteRule .* - [E=Cache-Control:vary=ismobile] ===== Important Notes ===== * Don't add ''[NC]'' to the end of ''RewriteCond'' since in Magento code, the design exception is a regular expression match and is case sensitive. * The above rule must be placed at the very top of the .htaccess file to avoid other rules stopping its execution. * Your rewrite rules must //exactly match// your backend's mobile detection (i.e. the string you entered in Step 5 above). If these do not match, your rewrite rules may think that a device is mobile while the backend does not (and vice-versa). This can cause, for example, the desktop version of a page to be cached and flagged as the mobile version which will then be wrongly served to all mobile viewers. ====== Troubleshooting ====== ===== Desktop Version Showing on Mobile ===== This case illustrates the importance of placing rewrite rules at the top of the .htaccess file. Let's say you've set up a mobile view in the Magento 1.8 backend, like so, and have verified that the mobile view is working fine. {{ :litespeed_wiki:cache:litemage:magento1-mobileview-case.png?nolink&800 |}} After enabling LiteMage, you add rewrite rules to the bottom of your .htaccess file, and use the exact same user agent string that you used above in the Magento backend setup. However, with LiteMage enabled, the desktop version is showing on mobile. Why? RewriteEngine on RewriteCond %{HTTP_USER_AGENT} "android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|iP(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|(Android.+Mobile)|NOKIA|SymbianOS|N900|BlackBerry" RewriteRule .* - [E=Cache-Control:vary=ismobile] **The above rules should have been added to the beginning of .htaccess.** Other rules, like ''RewriteRule .* index.php [L]'', stop the cache rules from being executed. Cache rules should be //always// be placed on the very top of the .htaccess file. Relocate the rules to the top, like so, and everything works: LiteMage on RewriteEngine on RewriteCond %{HTTP_USER_AGENT} "android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|iP(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|(Android.+Mobile)|NOKIA|SymbianOS|N900|BlackBerry" RewriteRule .* - [E=Cache-Control:vary=ismobile] ############################################ ## uncomment these lines for CGI mode ## make sure to specify the correct cgi php binary file name ## it might be /cgi-bin/php-cgi # Action php5-cgi /cgi-bin/php5-cgi # AddHandler php5-cgi .php ############################################ ## GoDaddy specific options # Options -MultiViews ## you might also need to add this line to php.ini ## cgi.fix_pathinfo = 1 ## if it still doesn't work, rename php.ini to php5.ini ############################################ ## this line is specific for 1and1 hosting #AddType x-mapp-php5 .php #AddHandler x-mapp-php5 .php ############################################ ## default index file DirectoryIndex index.php ############################################ ## adjust memory limit # php_value memory_limit 64M php_value memory_limit 256M php_value max_execution_time 18000 ############################################ ## disable magic quotes for php request vars php_flag magic_quotes_gpc off ############################################ ## disable automatic session start ## before autoload was initialized php_flag session.auto_start off ############################################ ## enable resulting html compression #php_flag zlib.output_compression on ########################################### # disable user agent verification to not break multiple image upload php_flag suhosin.session.cryptua off ########################################### # turn off compatibility with PHP4 when dealing with objects php_flag zend.ze1_compatibility_mode Off ########################################### # disable POST processing to not break multiple image upload SecFilterEngine Off SecFilterScanPOST Off ############################################ ## enable apache served files compression ## http://developer.yahoo.com/performance/rules.html#gzip # Insert filter on all content SetOutputFilter DEFLATE # Insert filter on selected content types only AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary ############################################ ## make HTTPS env vars available for CGI mode SSLOptions StdEnvVars ############################################ ## enable rewrites Options +FollowSymLinks RewriteEngine on ############################################ ## you can put here your magento root folder ## path relative to web root #RewriteBase /magento/ ############################################ ## uncomment next line to enable light API calls processing # RewriteRule ^api/([a-z][0-9a-z_]+)/?$ api.php?type=$1 [QSA,L] ############################################ ## rewrite API2 calls to api.php (by now it is REST only) RewriteRule ^api/rest api.php?type=rest [QSA,L] ############################################ ## workaround for HTTP authorization ## in CGI environment RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] ############################################ ## TRACE and TRACK HTTP methods disabled to prevent XSS attacks RewriteCond %{REQUEST_METHOD} ^TRAC[EK] RewriteRule .* - [L,R=405] ############################################ ## redirect for mobile user agents #RewriteCond %{REQUEST_URI} !^/mobiledirectoryhere/.*$ #RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC] #RewriteRule ^(.*)$ /mobiledirectoryhere/ [L,R=302] ############################################ ## always send 404 on missing files in these folders RewriteCond %{REQUEST_URI} !^/(media|skin|js)/ ############################################ ## never rewrite for existing files, directories and links RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l ############################################ ## rewrite everything else to index.php RewriteRule .* index.php [L] ############################################ ## Prevent character encoding issues from server overrides ## If you still have problems, use the second line instead AddDefaultCharset Off #AddDefaultCharset UTF-8 ############################################ ## Add default Expires header ## http://developer.yahoo.com/performance/rules.html#expires ExpiresActive On ExpiresDefault "access plus 1 year" ############################################ ## By default allow all access Order allow,deny Allow from all ########################################### ## Deny access to release notes to prevent disclosure of the installed Magento version order allow,deny deny from all ############################################ ## If running in cluster environment, uncomment this ## http://developer.yahoo.com/performance/rules.html#etags #FileETag none ########################################### ## Deny access to cron.php ############################################ ## uncomment next lines to enable cron access with base HTTP authorization ## http://httpd.apache.org/docs/2.2/howto/auth.html ## ## Warning: .htpasswd file should be placed somewhere not accessible from the web. ## This is so that folks cannot download the password file. ## For example, if your documents are served out of /usr/local/apache/htdocs ## you might want to put the password file(s) in /usr/local/apache/. #AuthName "Cron auth" #AuthUserFile ../.htpasswd #AuthType basic #Require valid-user ############################################ Order allow,deny Deny from all