0

I've setup a subdomain = m.MYdomain.com with a Porto reponsive theme which is fully responsive (it seems to do a good job detecting the screen size and formatting the website accordingly). The reason I've setup m.myDOMAIN.com is so that I can include less text and way less products on the front page than I actually have on the front page of the desktop version. The point is - I don't need anything fancy (like detecting the actual size of the mobile device) but just differentiate:

Is this a desktop the customer is using or a mobile device (phone, tablet) and if it detects a mobile device then - transfer the traffic to m.MYdomain.com

I'm sure there is a simple script I could just paste somewhere in the Magento Admin panel to make this happen?

So to clarify once again:

  • I've set up a new Magento store for our mobile site (under the same WEBSITE as the desktop version)
  • I need to implement some logic to switch between the store views based on the client browser (maybe?) or detect if it's a computer or a mobile device they are using...

Magento 1.9.1

1

How to Accomplish This:

You will want to utilize the "Miscellaneous Scripts" box for your non-mobile store (System Configuration > Design > HTML Head).

Then, use a script, similar to:

if (screen.width < 600 && document.cookie.indexOf('force_desktop') === -1) {
    window.location = "https://m.mydomain.com" + window.location.pathname;
}

What this Script Does:

This script will check two things: 1) is the width of the screen less than 600px? 2) is there a cookie that doesn't indicate forcing the desktop mode? If so, it will redirect to your sub-domain.

Keep in mind that while this works, it isn't ideal. This approach requires loading an entire page just to determine whether or not to redirect. For mobile users, this means a punishment of an extra page load (and their download times on average are slower).

Other Thoughts:

This answer is for strictly checking screen size (which is consisten with how responsive sites are built). If you are open to other approaches, I would recommend:

  • Looking through the theme's CSS files to see if you can wrap text in a </div> tag to hide id, such as: <div class="hidden-text"><p>A lot of text here.</p></div>. This is the best approach in that your site is truly responsive.
  • Using an .htaccess to filter based on device type. I would not recommend this as it isn't foolproof.

Finally:

As a side note, you could make future site visits faster by: * Setting a cookie in the same box, but on the mobile store: document.cookie = "is_mobile_site=1;domain=mydomain.com" (important to note that you need to specify the main domain name and not the sub-domain. * Editing the .htaccess file to watch for is_mobile_site set and force_desktop is NOT set. Example: https://stackoverflow.com/questions/15097662/htaccess-redirect-to-folder-if-cookie-is-missing.

  • This looks exactly like what I'm looking for! Is there any way to bypass the desktop page loading in its entirety first? Because that's the whole point of getting a mobile site - instead of loading the 50 + products on the front page - I would like to load just 8 or so because I think loading 50 products on a mobile phone with a slow data connection is not good at all! – Allysin Oct 24 '16 at 21:57
  • @Allysin, I just added the "Other Thoughts" area to my answer. – Joseph at SwiftOtter Oct 24 '16 at 22:10
  • Joseph - I think I understand most everything you wrote except for the part to "wrap text in a -div tag to hide id....." Would this possibly hide some text AND some products as well? Anyways, I think I would like to hire you to do a small job I'm not able to do - would you be open to that? What is the best way to contact you? I clicked on the link to your website but I get an Error message (It does not resolve). Thank you. – Allysin Oct 24 '16 at 22:32
  • @Allysin: Ouch. I see that it doesn't resolve. That is now fixed. You should be able to click it and contact me. – Joseph at SwiftOtter Oct 24 '16 at 22:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.