I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?
I tried searching but came up with very little. I'd like to offer a mobile version of our website. I was hoping to find a template and return the regular template or this new mobile template based upon the visitors browser. Anybody tackle this yet?
Bump. No one has set up a Zen Cart site to be viewed from a mobile phone or other device?
I agree that this should be addressed. I don't believe that any of my competition has a special mobile presence yet and I'd like to be ahead of the pack. I used to be on top of new tech but am just getting started with mobile. I haven't even seen my site on a mobile device yet. I am willing to help support development.
All it really takes is a "handheld/mobile" CSS stylesheet.
take a look at here for a how to.
If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.
This is fairly generic:
/**
* CSS Stylesheet for handheld devices
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
*/
@media handheld {
html, body {font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;}
a:link, li a:link, a:visited, li a:visited {
background:none;
text-decoration: underline;
color: #0000CC;
}
a:hover, li a:hover, a:active, li a:active {
background:none;
text-decoration: underline;
color: #660066;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
#mainWrapper {margin:0;background:none;max-width: 480px;}
#headerWrapper {background-color: #ffffff;border:none;height:200px;}
.customerService{display:none;}
.freeShipping{display:none;}
#credentials{display:none;}
.date{display:none;}
#dropMenuWrapper{display:none;}
#navMainWrapper{border:none;}
#navMain {
float: none;
font-size: 1.1em;
line-height: normal;
}
#navMain ul {
margin:0;
padding:0;
list-style:none;
}
#navMain li {
display:block;
margin:0;
padding:0;
}
#navMain a, #navMain a span, #navMain .current a, #navMain .current a span {display:block;float:none;text-decoration: underline;color: #0000CC;background-image:none;text-align:left;}
#navMain a:hover, #navMain a:hover span {color:#ff0000;background-image:none;}
#navMain .contact, #navMain .account, #navMain .cart {display:none;}
#contentMainWrapper, #contentColumnMain {background-color: #ffffff;width:480px;float:none;}
.centerColumn {margin: 0;padding: 0;}
#footer{border:none;text-align:center;}
#siteinfoLegal {display: none;text-align:left;}
.messageStackWarning, #navMainSearch, #navCatTabsWrapper, #navEZPagesTop,
#navColumnOne, #navColumnTwo, #taglineWrapper, .navMainSearch, #navSuppWrapper, .banners, #navBreadCrumb { display: none;}
}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) {
html {-webkit-text-size-adjust: none;}
}
Super. Now how does one set-up a check for the browser or agent to switch the stylesheet for a handheld browser?
first name the css file "handheld_stylesheet.css and upload it to:
includes/templates/YOUR_TEMPLATE/css
next
open includes/templates/YOUR_TEMPLATE/common/html_header.php
find the following section of code:
/**
* load printer-friendly stylesheets -- named like "print*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}
immediately after add the following:
/**
* load handheld-friendly stylesheets -- named like "handheld*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^handheld/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="handheld" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}
Are you sure about that?
Other considerations are:
- image resizing
- MIME type
I don't have / use a Cell Phone and so I use online Emulators for testing Mobile site coding. The 'perishablepress' link you provided failed miserably. Anyone actually checked the site with their Cell Phone? Be interested in seeing how it showed. (hint - screenshot would be nice )
You can check the general look by viewing in Opera.
open the a site in the opera browser click view and then "small screen"
Bookmarks