Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:cache:litemage:seperate-mobile-versions-magento [2017/05/15 16:11]
Jackson Zhang created
+++ litespeed_wiki:cache:litemage:seperate-mobile-versions-magento [2019/07/10 19:24] (current)
Lisa Clarke Copyediting
@@ Line 1: / Line 1: @@
-====== Handling Magento store mobile view with string match design exceiption ======
+====== Handling Magento Store Mobile View With String Match Design Exception ======
-To handle Magento mobile view, you may either add string match design exception or use separate mobile view Magento plugin. Separate mobile view through Magento plugin may bring cache implementation complexity and may require the code change, which is out of the scope of this wiki.  This wiki will focus on how to achieve the mobile view through exact string match by adding 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.
-First, pick the preferred mobile Magento theme, such as default package bbdistributions template, or other theme.
+Let's focus on how to achieve the mobile view through an exact string match by adding design exceptions:
-Next you should add exceptions for the mobile devices. Navigate to the Magento administrative area -> System -> Configuration -> Design -> Themes. Click on the Add Exceptions buttons beside the Templates, Skin and Layout labels. Enter the following line in the Matched Expression field:
+  -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: <code>iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone</code>
+Like so:
-  iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone
 {{ :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):
-To tell LiteMage to cache the website's Mobile version differently than the main version so they are not mixed up. Do this by adding the following to the .htaccess file (these are just some examples only and you may have your own rules):
 <code>
+<IfModule LiteSpeed>
+RewriteEngine on
 RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Mobile|Opera Mini|Fennec|Windows Phone"
 RewriteRule .* - [E=Cache-Control:vary=ismobile]
+</IfModule>
 </code>
-Don't add [NC] to the end of "RewriteCond" since in Magento code, the design exception is regular expression match and is case sensitive.
+===== 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?
+  <IfModule Litespeed>
+  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]
+   </IfModule>
+**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:
+<code>
+	<IfModule Litespeed>
+	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]
+        </IfModule>
+	############################################
+	## 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
+	<IfModule mod_php5.c>
+	############################################
+	## 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
+	</IfModule>
+	<IfModule mod_security.c>
+	###########################################
+	# disable POST processing to not break multiple image upload
+		SecFilterEngine Off
+		SecFilterScanPOST Off
+	</IfModule>
+	<IfModule mod_deflate.c>
+	############################################
+	## 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
+	</IfModule>
+	<IfModule mod_ssl.c>
+	############################################
+	## make HTTPS env vars available for CGI mode
+		SSLOptions StdEnvVars
+	</IfModule>
+	<IfModule mod_rewrite.c>
+	############################################
+	## 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]
+	</IfModule>
+	############################################
+	## Prevent character encoding issues from server overrides
+	## If you still have problems, use the second line instead
+		AddDefaultCharset Off
+		#AddDefaultCharset UTF-8
+	<IfModule mod_expires.c>
+	############################################
+	## Add default Expires header
+	## http://developer.yahoo.com/performance/rules.html#expires
+		 ExpiresActive On
+		 ExpiresDefault "access plus 1 year"
+	</IfModule>
+	############################################
+	## By default allow all access
+		Order allow,deny
+		Allow from all
+	###########################################
+	## Deny access to release notes to prevent disclosure of the installed Magento version
+		<Files RELEASE_NOTES.txt>
+			order allow,deny
+			deny from all
+		</Files>
+	############################################
+	## If running in cluster environment, uncomment this
+	## http://developer.yahoo.com/performance/rules.html#etags
+		#FileETag none
+	###########################################
+	## Deny access to cron.php
+		<Files 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
+		</Files>
-**Important:** Your rewrite rules must exactly match your backend's mobile detection. If these do not match, you may run into the issue where your rewrite rules think that a device is mobile while the backend does not and visa-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.
+</code>