goMobile Support Thread

Hi everyone, this is my first module contributed to zen so please be gentle.

goMobile is a very simple alteration to the init templates file.

It checks to see if the user is visiting the site using a mobile browser, if they are the site displays using a second (mobile specific) template.

The module also includes details on offering a link to the full site if a user doesn't want to goMobile.

This is a bit of a brute force method, you have to create a second template and all the extra files this incurs, but for me, I couldn't achieve the look I wanted for my site by just using media queries.

Its live on my site now (motorcycleheaven.co.uk) and your welcome to have a look.

This is the first version of the module and I have plans for future version including a bundled mobile template, improved template override and I'd like to clean up the extra images page my site uses, but if anyone has any other suggests please shout.


goMobile in the downloads


Enjoy
Steve

Hi,

Download link didn't work for me and I don't know what to make of your mobile sheet, looking at site in Firefox view css by handheld device.

However, I am very impressed with your sites - templates and drop down menus.

Where did you get them?

SPH
(Steve)
www.prommart.com - main site
www.-prom-mart.com - test site

PS: Just wondering, are mobile sheets/sites necessary any more? I don't have a mobile device, but yesterday sister said sites look good, normal in hers. She has something larger than her old phone, though.

sorry SPH

heres the corrected link
http://www.zen-cart.com/index.php?ma...oducts_id=1965

its in the templates section if this doesn't work.



The style sheet is a mess but I had a bit of confusion with them, this is the second site I have used this goMobile switch on, the first one looked for the mobile style sheet in the mobile template package but my site uses the normal style sheet in the mobile template.

I would recommend anyone who wants to use this module, don't use my css as its very specific for my site (and a bit messy), I am working on adding a default template to the module.

Heres a couple of screen grabs to show what it should look like


Mobile site
http://farm7.static.flickr.com/6010/...30aa292ca8.jpg


Full site
http://farm7.static.flickr.com/6022/...bc7b730e_b.jpg






If anyone's building or testing a mobile site I suggest you use firefox with the user agent switcher plugin

http://chrispederick.com/work/user-agent-switcher/

it lets you switch your browser to emulate a mobile device.




SPH, Thanks for the kind comments about my site, its all done by me!
If I get some time I 'll try and bundle up the dropdown menu, took ages but I'm pleased with the effect.
It really just code I found around the web adapted to suit my needs.

Your mobile site jpg looks like our Apple Zen templates in Firefox's view css by handheld device tool: all aligned down the left side. I think this Apple Zen template is already handheld optimized somewhat (and supposedly is specially SEO optimized, we'll see). Clyde's zencartzen template is also handheld optimized, coming with a handheld stylesheet which moves everything in a long column down the left, viewed in Firefox css handheld tool.

Yes, your sites are very impressive! Probably the most "tricked-out" zencarts I've seen, and done very professionally. Very nice work.

Everything seems to make the sites a little slow compared with my site, but then mine is (or should be) lightening fast because there really isn't much on it yet.

One of the reasons why testing Apple Zen is that we are hightly interested in a drop-down menu for some, if not all, of our sites. Your menus are very impressive and (assuming no issues) I would think a hit if offered as a mod...or even a commercial mod.

You also have serious template design talent.

sph
www.prommart.com

PS: I do think that my custom tpl product info display may disrupt any Apple Zen handheld optimization on the products, using a table to place everything to right of main pic:

prommart.com/index.php?main_page=product_info&cPath=115_14&products_id=3501

If I could do it with divs it would be better.

sph

Steve,

I am just starting to dig into this... Can you post up a copy of your CSS and mobile layout for me to screw around with? I am confused on how many files I need to edit to get this to work. My site displays in English, Spanish, Italian, and German so I was thinking of using symbols for a majority of things and a really basic product description.


I am still a newbie at web work.. normal coding for me is very old school plc and assembly stuff! Thanks again for getting us all started, I will do what I can to help contribute!

I like this !

currently adjusting for a mobile template myself.
interesting in fact how different one has to look at the functional/pratical differences making it practical for the mobile user as a quick ordering tool. a just to the point order and buy site ; no extra stuff like on the regular site.

a basic mobile template would be handy ;-)


Guy

I am very interested in having my site mobile compatible. I noticed that there were no css stylesheets in the download area with gomobile.

What files do I add to the new mobile template file? Just the one file? And where to start with a css stylesheet?

Thanks, Kim

Thanks for the goMobile mod! It's very useful when creating a mobile site.
I may have found a slight problem, although I haven't tested it yet as I'm still busy building my mobile website.....

It's to do with the 'switch to full site' button. I see it uses cookies, but if the user's browser doesn't support cookies or the user has them disabled, the site will keep bouncing back to the mobile one.

Off the top of my head, maybe you could swap the button for a mesage if cookies are disabled.....although this isn't easy because on first load you don't know (without javascript) if cookies are enabled or disabled.
Either that, or when they click the button, write their choice to the database?
Only other thing I can think of would be to amend the zen_href_link function in includes/functions/html_output.php to always pass the 'fullsiteoverride' in the URL in the section where it tacks the zenid to the URL?
Something like

Code:

---

if (isset($sid)) {
  $link .= $separator . zen_output_string($sid);
  if (isset($_GET['fullsiteoverride'])) $link .= '&fullsiteoverride=' . $_GET['fullsiteoverride'];
}

---

Not a big issue really but could be slightly annoying to users when they can't access the full website!

Is this confirmed to work in v1.5?

Hi all sorry for the lack of replies, summer is our busiest time so it been difficult to get any time to get back on the forum, I'll try and be more prompt with my replies.

I've uploaded a new version which fixes the cookie issue (didn't seem to set the cookie correctly properly).



@damiantaylor, yes the JavaScript disabled is an issue but (possibly stupidly) I decided to worry about that later, something to add to the todo list. The new version uses a separate page to set the cookie so I should be able to do some kind of js detection test and offer up some kind of error message.


@kburner, you need to add whatever files you want to modify, in essence what you are doing with the goMobile is creating another custom template, but a custom template specifically for mobile devices.


@wtfbbq yes should work fine in 1.5, only overrides one file and adds one new file.


@shortysclimbin, @doggyjumper and the other people that have messaged me, I will attempt to put together a simple mobile template to get you started.




Steve

Hi There... does anyone have this working on 1.3.8.a. Client does not wish to upgrade store version at this time but needs to go mobile.

Thank you

Hi makenoiz, yes works fine on 1.3.8.a

Steve

Hi steve,

Thanks for the mod. I have installed it and it does detect if i am on a pc or a mobile device and shows the right template. But I don.t seem to be able to switch between the two. I made a link at the bottom of my page to switch, but it starts reloading my page in the template it was in.
I am using Zen Cart 1.5
I checked for the cookie, it is being set.

Erik

Quote:

---

Originally Posted by steveyork136

@shortysclimbin, @doggyjumper and the other people that have messaged me, I will attempt to put together a simple mobile template to get you started.

---

Hey Steve, when you get this simple mobile template packaged, please let me know too. THANKS!

Hi Erik,
Have you got the updated version installed with the sitechoice.php file.

This fixes the original issue with the cookie not being set correctly, do you want to share a like so I can have look?

Steve

Hi Steve,
I have removed the mod for now. Maybe I will make a test setup this weekend. Ihad the latest version installed, with the sitechoice.php. The cookie was set, but is not used when the footer link is used.
I will report back as soon as the test site is up

Quote:

---

Originally Posted by Design75

Hi steve,

Thanks for the mod. I have installed it and it does detect if i am on a pc or a mobile device and shows the right template. But I don.t seem to be able to switch between the two. I made a link at the bottom of my page to switch, but it starts reloading my page in the template it was in.
I am using Zen Cart 1.5
I checked for the cookie, it is being set.

Erik

---

I am also having this issue and am not sure how to correct the problem. Have you had any luck fixing it Erik?

--Colleen

Hi Colleen,

I am absolutely clueless :frusty:
this is my test site

It is a vanilla 1.5.1 installation, only with the goMobile addon.

Well, you aren't alone! I cannot figure out why it won't work, grrrr!!!!!

I haven't tested the new version of this mod but it looks like there may be a problem switching between mobile and full sites.
The new sitechoice.php looks for a querystring variable called 'fullsite', but the code looking for a querystring variable called 'fullsiteoverride' is still in init_templates.php.
It looks to me like the init_templates.php included in the new distribution is an old one. I think it should just look for a cookie called 'siteversion' and show the appropriate template based on that rather than looking at querystring variables.
As I mentioned, I haven't tested this yet so I could be wrong!

Change this section of code in includes/init_includes/overrides/init_templates.php

Code:

---

/*** Check if user has requested specific version of the site*/

if ($_GET['fullsiteoverride'] == 1)
  {
        $value = 'fullsiteoverride';
        setcookie("mobileCookie", $value);
        setcookie("mobileCookie", $value, time()+1800); /* expire in 1/2 hour */
        $iwnatfullsite = 1;
        }
       
if ($_GET['fullsiteoverride'] == 0)
  {
        $value = 'fullsiteoverride';
        setcookie("mobileCookie", $value);
        setcookie("mobileCookie", $value, time()-1800); /* expire in 1/2 hour */
        $iwnatfullsite = 0;

        }       

if(isset($_COOKIE['mobileCookie'])) {$iwnatfullsite = 1; }


/*** Check if there is a specific template for this mobile platform and use it*/
if ($mobile_browser >= 1){
                if($iwnatfullsite == 1)
                        {
                                $template_dir;
                        }
                else
                        {
                                $template_dir = $template_dir.'_mobile';
                        }
}
/*** EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT**/

---

to this

Code:

---

/* Override to mobile version of site if requested */
if(($mobile_browser >= 1 && !isset($_COOKIE['siteversion'])) || isset($_COOKIE['siteversion']) && $_COOKIE['siteversion'] == 'mobile') $template_dir = $template_dir . '_mobile';

/*** EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT**/

---

Thank you for your input Damian! I had narrowed it down to the same thing, but wasn't sure how to make the change so that it would work. I'll give it a try this weekend!

Tested it and it seems to work :smile:

http://www.zen4all.nl/temp_sites/zen4all

Hello

Is there a way to get the templates files for this mod or something to give an example how to make mobile templates/CSS files?

beside read.me telling to create another template folder the add-on comes with no explanation ....

Thanks

L.
:blush:

Hello,

This module works great for me on 1.5.1 however when i go to the mobile site it drops all the sidebox's, I'm guessing because they aren't activated in the boxes layout controller in admin (all files were duplicated). I'd quite like them. how have others worked around this? Cheers!

:-)

Quote:

---

Originally Posted by hitch

Hello,

This module works great for me on 1.5.1 however when i go to the mobile site it drops all the sidebox's, I'm guessing because they aren't activated in the boxes layout controller in admin (all files were duplicated). I'd quite like them. how have others worked around this? Cheers!

:-)

---

That's the whole idea, it lightens the content to suit a smaller screen.
Can you post a link to your site?

Quote:

---

Originally Posted by damiantaylor

Change this section of code in includes/init_includes/overrides/init_templates.php

Code:

---

/*** Check if user has requested specific version of the site*/

if ($_GET['fullsiteoverride'] == 1)
  {
        $value = 'fullsiteoverride';
        setcookie("mobileCookie", $value);
        setcookie("mobileCookie", $value, time()+1800); /* expire in 1/2 hour */
        $iwnatfullsite = 1;
        }
       
if ($_GET['fullsiteoverride'] == 0)
  {
        $value = 'fullsiteoverride';
        setcookie("mobileCookie", $value);
        setcookie("mobileCookie", $value, time()-1800); /* expire in 1/2 hour */
        $iwnatfullsite = 0;

        }       

if(isset($_COOKIE['mobileCookie'])) {$iwnatfullsite = 1; }


/*** Check if there is a specific template for this mobile platform and use it*/
if ($mobile_browser >= 1){
                if($iwnatfullsite == 1)
                        {
                                $template_dir;
                        }
                else
                        {
                                $template_dir = $template_dir.'_mobile';
                        }
}
/*** EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT**/

---

to this

Code:

---

/* Override to mobile version of site if requested */
if(($mobile_browser >= 1 && !isset($_COOKIE['siteversion'])) || isset($_COOKIE['siteversion']) && $_COOKIE['siteversion'] == 'mobile') $template_dir = $template_dir . '_mobile';

/*** EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT**/

---

---

This was exactly wher i was looking for, thx for youre time and efforts :-)

I'm running 1.5.1 and the module works fine, except for EZ pages. They load the header and nothing else. I have the URI Mapping add on, but disabling it didn't fix my problem. I looked at my other addons and none of them should affect how EZ pages load. Anyone else have a similar issue?

This mod is exactly what I've been looking for to combine a dynamic site with responsive templates using the DIY responsive template mod. Here's what I'm trying to resolve now: I have 2 versions of templates I'm working with--the main version we've used for years, and a new one I'm building. The existing template is not mobile-optimized and I plan to replace it with the new version eventually. What my template folder looks like now is template #1, template #2, template #2_mobile. However, even when I have template #1 selected, when attempting to access the site on a mobile device it goes to template #2_mobile.

Is there a way to change the code to look for a mobile version of the current template, and finding none default to the full site instead of going to another version that does have a mobile folder?