Mobile Friendly

I have read dozens of threads about this and I still don't know how to go about it. I have a few questions that may help me understand better. Question #1... Do ZenCart mobile templates, like the ones by picaflor-azul0 (search 'mobile friendly' on ZC Forum to view templates), work in addition to my existing website, and those mobile templates only 'show up' on mobile devices? I don't fully understand exactly what those templates are. Question #2... Google, more or less, TELLS me what I need to do, and even offer some code to put into my CSS file, video tutorial, etc...... but, many instructions that I have followed from Google Webmasters tools aren't necessarily working,,, so,, Question #2, can I simply 'add' code to my CSS File, etc (along the lines of Google Webmasters instructions,,,, or not), & modify the physical look of my site, and make my device Mobile Friendly? Google says the ranking of my site, ON mobile devices, will reflect my 'mobile friendly' appearance; which, pretty-much means they won't show my site in a search result from a mobile device. That's not good. Any help would be GREATLY appreciated!!! Thanks

PS. Will this help, and what exactly will it do? Thanks!! http://www.zen-cart.com/showthread.p...nto-every-page

Quote:

---

Originally Posted by Johnnycopilot

Question #1... Do ZenCart mobile templates, like the ones by picaflor-azul work in addition to my existing website, and those mobile templates only 'show up' on mobile devices?

---

Picaflor-azul (Anne) responsive templates are NOT in addition to your current template.

They are just that.... responsive to the device... ie: your website changes appearance depending upon desktop, tablet or mobile device and then Portrait or Landscape orientation.

If you look at any of her demo installations on different devices, you will see how they are intended to function. Try one, you will probably like it.

To be as effective as possible across MOST mobile devices, a dedicated responsive template is necessary. It's quite a complex and detailed arena, so you can't just add a few lines of css or jscript and hope your existing template will behave on all devices.

The look of an ecommerce site today is moving rapidly towards minimalism. Get rid of all superfluous distractions - particularly on the home page, product info pages and the shopping cart and checkout pages. You want a site that loads superfast, takes the customer quickly to the products they are after, and enables rapid and easy checkout.

People who use mobile devices are by nature people seeking speed and convenience - essentially, they're "lazy", so you need to play to this psychology. If you make things very simple, fast and focused, you'll keep them happy. We convert over 90% of our visitors to a sale and believe that it's the ease of our sites that help to achieve this.

About 62% of our customers shop with us using mobiles, and of that number, about 78% are using Apple and most of the remainder android - but we get quite a few people on Blackberry as well.

Please tell me if this will work. Install new Zen Cart with a mobile-friendly Zen Template into a {new} folder in my main directory, and use my current Database as the Database for that new template. Then put code on my current site {in hedder text?} to re-direct small-device traffic to that other site with mobile template. Is that how it's done? Will that work? (I have Zen 1.5.0 ... will I have to upgrade to 1.5.4 if my new mobile-friendly version is to share the same database (assuming I use 1.5.4 on my new mobile version)?

Quote:

---

Originally Posted by Johnnycopilot

Please tell me if this will work. Install new Zen Cart with a mobile-friendly Zen Template into a {new} folder in my main directory, and use my current Database as the Database for that new template. Then put code on my current site {in hedder text?} to re-direct small-device traffic to that other site with mobile template. Is that how it's done? Will that work? (I have Zen 1.5.0 ... will I have to upgrade to 1.5.4 if my new mobile-friendly version is to share the same database (assuming I use 1.5.4 on my new mobile version)?

---

I personally hate it when sites force you to a "mobile" site.

imo: Much better to have a "responsive" site instead

Quote:

---

Originally Posted by gilby

I personally hate it when sites force you to a "mobile" site.

imo: Much better to have a "responsive" site instead

---

I don't like it when that happens either, but making my site mobile responsive isn't an option for me at this time. Perhaps in the near future I can make my site responsive, but I need to do this now. Do you know if the way I was thinking about doing it will work? Thanks :)

Quote:

---

Originally Posted by Johnnycopilot

Please tell me if this will work. Install new Zen Cart with a mobile-friendly Zen Template into a {new} folder in my main directory, and use my current Database as the Database for that new template. Then put code on my current site {in hedder text?} to re-direct small-device traffic to that other site with mobile template. Is that how it's done? Will that work? (I have Zen 1.5.0 ... will I have to upgrade to 1.5.4 if my new mobile-friendly version is to share the same database (assuming I use 1.5.4 on my new mobile version)?

---

This is not generally how it's done, no. A 'mobile-friendly Zen Template', ie a responsive template is all you need. Install the new template on your current site, make the necessary edits to carry over any customization made to your current template into the new one. Done.

Now your single Zen Cart installation will work on desktop, tablet and mobile devices.

Quote:

---

Originally Posted by jeking

This is not generally how it's done, no. A 'mobile-friendly Zen Template', ie a responsive template is all you need. Install the new template on your current site, make the necessary edits to carry over any customization made to your current template into the new one. Done.

Now your single Zen Cart installation will work on desktop, tablet and mobile devices.

---

Thanks, I understand exactly what you are saying, and why you are saying it, but at the same time I'm slightly confused. What's going on when I go to a website on my mobile device, and when I type in anywebsite.com , my phone is redirected to m.anywebsite.com? I don't want to change my website (for home computers) if I don't have to. I have worked many hours to get it like I want. I mean, how are the other sites doing that? Thanks!!

Quote:

---

Originally Posted by Johnnycopilot

Thanks, I understand exactly what you are saying, and why you are saying it, but at the same time I'm slightly confused. What's going on when I go to a website on my mobile device, and when I type in anywebsite.com , my phone is redirected to m.anywebsite.com? I don't want to change my website (for home computers) if I don't have to. I have worked many hours to get it like I want. I mean, how are the other sites doing that? Thanks!!

---

There are a few different ways your site may be redirecting mobile devices to m.anywebsite.com You'll need to figure out what method your site is using and disable it. A responsive template does not redirect to a different url. Start with the author of your mobile template. They should be able to tell you how they set-up for the redirect to occur.

Quote:

---

Originally Posted by jeking

There are a few different ways your site may be redirecting mobile devices to m.anywebsite.com You'll need to figure out what method your site is using and disable it. A responsive template does not redirect to a different url. Start with the author of your mobile template. They should be able to tell you how they set-up for the redirect to occur.

---

Thanks. I can figure out the redirect part, I just want to know if the way I mentioned above will work. I want to know how to build a completely different mobile site; or more specifically, the best way to do it.

Quote:

---

Originally Posted by Johnnycopilot

Thanks. I can figure out the redirect part, I just want to know if the way I mentioned above will work. I want to know how to build a completely different mobile site; or more specifically, the best way to do it.

---

Quote:

---

Originally Posted by schoolboy

a dedicated responsive template is necessary.

---

Quote:

---

Originally Posted by jeking

This is not generally how it's done, no.

---

As stated above, no. The 'best way' is to use a responsive template.

Thanks, I really do appreciate your advice; I'm sure it's good advice, but as stated above, that's not an option for me. Anybody know how I can make a separate site (with a dedicated mobile responsive template) using my current database, but leave my current website alone? Is that possible?

Quote:

---

Originally Posted by Johnnycopilot

Thanks, I really do appreciate your advice; I'm sure it's good advice, but as stated above, that's not an option for me. Anybody know how I can make a separate site (with a dedicated mobile responsive template) using my current database, but leave my current website alone? Is that possible?

---

That is a very bad idea as far as google is concerned.

You really need to just convert your current site to a responsive design.

Thanks,

Anne

I guess I will ask the question here that no one has touched on,
Why do you think that a responsive template wont work for your site? Why is that not an option, Not picking just trying to get more detailed info so these good folks can happen

Sorry it's taken so long to get back with everyone, and I really do appreciate the input and advice. I'm sure that a responsive template will work for my site, that's not the problem. I don't have time to redo my site right now. I have, among other things, Ceon Advanced Shipper, M.A.P. Pricing, Apsona ShopAdmin, several other plugins, and I have spent countless hours getting my showbook page to display like I want. I don't understand PHP, so most of the time I must refer to help for changes. I know the problems that I ran into when implementing many of those plugins and changes, and when I upgrade and/or go to another template I can foresee dozens and dozens of hours trying to get this all set back up, and I simply don't have the time for that right now. I must have advanced shipper because the shipping origin on many of my products (especially larger items) are spread across the nation. I must have M.A.P. Pricing. If I build a mobile responsive site in another folder, and it doesn't work with my other site, I've only lost a few hours, and I'm no worse off than I am right now. I want to build a mobile friendly site, for temporary, without some of the features I currently have in my main site, and hope for the best with pricing and shipping if someone purchases from me on a mobile device. Furthermore, I'm confused as to why people are telling me that what I want to do will not work when practically half of the websites on the internet are set up like that. Walmart.com, Sears.com, Tigerdirect.com,.. the list goes on and on with either 'm.website.com' or 'mobile.website.com' . It's probably some reason that I won't understand anyway. ha.. I know those sites aren't ZenCart, and I certainly mean NO disrespect to anyone here. I know that Y'all know infinitely more than I do about website design, ZenCart, Google, etc.. All I want to do is install a responsive template in another folder, redirect my main site to that folder, using the same database, until I get time to rebuild my main site with a single, mobile responsive template. At which time I plan on having only ONE website, like Anne, jeking, and everyone else has suggested. I'm looking for a temporary fix until the end of summer.. Unless it works great, then I'll roll with what's working. If this will not work, as suggested, then this is the end of it, and I'll have to wait until the end of summer to redo my main site. Does that explain what my dilemma is? I'm still open for anyone to say anything or make any suggestions. I know I sound very hard-headed about this, but I am. ha.. Not really; I just don't have time to try and mess with my site right now and risk messing it up. Thanks everyone!!!!

Ok, now lets expand on my last question? Why do you think that you would have to redo all those modules if you add a responsive template?

Download the Responsive DIY Template Default for 1.5.x

Take a look at it and see what makes it responsive, it was built and I have personally used it to convert many templates to responsive ones in less than 1 hour.

Just MO

Quote:

---

Originally Posted by Johnnycopilot

I'm sure that a responsive template will work for my site, that's not the problem. I don't have time to redo my site right now.

---

Quote:

---

Originally Posted by Merlinpa1969

Ok, now lets expand on my last question? Why do you think that you would have to redo all those modules if you add a responsive template?

---

I tried some other templates that I (already) have installed, and the major plugin's that I checked still seem to work, which is great. I really feel stupid that I didn't realize my installed plugins may work, but I still don't have time to set up a new template .. at least not now. I actually tried a different template and had some other problems with layout, etc. and just figured that I would have to re-install plugins for every template. I'm glad you made me realize that I don't have to do that for many of my plugins. I am definitely going to check out what rbarbor suggested. Thanks, and I'll try to find one of Anne's templates (she has some very nice ones) and install one if I can't get the responsive DIY Template to work. I know the people that have responded to this thread really know their ZenCart stuff, and I really appreciate everyone's input so far, trying to help me, and get me going in the best direction.

Quote:

---

Originally Posted by rbarbour

Download the Responsive DIY Template Default for 1.5.x

Take a look at it and see what makes it responsive, it was built and I have personally used it to convert many templates to responsive ones in less than 1 hour.

Just MO

---

Thanks rbarbour, this seems to be what I am looking for. Question. I read the description, but don't fully understand exactly what this will do. Will this change the appearance of my site on a (regular) sized computer screen? I mean, the CSS tweeks and stuff, are those just needed for viewing on the mobile size screens? I just don't want to get in over my head, and anytime there's an SQL upload, I get a little out of my league. Anyway, let me know what you can, and I appreciate the advice and link!

First let me try to explain the differences:

Mobile Template = A mobile website is a separate version of your desktop website and it is designed to be used exclusively on smartphone devices.

Responsive Template = A responsive designed website is a website designed for use on desktops, tablets and smartphones.

If you do not have the time to maintain (upgrade) your current template, adding a Mobile Template will mean you will now have 2 templates to maintain.

Go Responsive!

All the templates I offer ARE responsive, I do believe all Anne's templates offered here on Zen-Cart uses my Responsive DIY Template Default CSS framework as well, I haven't had much time to keep up with the Zen-Cart forum so I may be wrong.

What the Responsive DIY Template Default CSS framework was built for....

1.) Creates a Responsive Template as a starting point for those designing their own website templates.

2.) Allows one to easily adapt the HTML necessary to convert an existing website template.
a.) The included CSS framework does the magic! :smile:

3.) Includes google Mobile Detect which allows Mobile users to view Full Website (desktop version) if they choose too.

4.) Includes php and css code to hide sideboxes on mobile devices which would otherwise clutter screen and slow loads.

Quote:

---

Originally Posted by Johnnycopilot

Will this change the appearance of my site on a (regular) sized computer screen? I mean, the CSS tweeks and stuff, are those just needed for viewing on the mobile size screens? I just don't want to get in over my head

---

The CSS is designed to make your template fit the screen size but has included code to restrict the templates width to a fixed px.

So if your desktop monitor is 1024 wide, the template will fill the screen but if your current template was designed with a fixed with of 980px, simply un-commenting 1 line of CSS code and adding your templates width is all that is needed from preventing it from filling the entire screen.

CSS tweeks will most likely be needed, I couldn't account for every template designers added HTML divs, tables and code. Most tweeks will involve removing "fixed widths" or "forced widths (!important)".

Quote:

---

Originally Posted by Johnnycopilot

and anytime there's an SQL upload, I get a little out of my league.

---

The SQL patches include:

1.) Activation - This was included only to keep Zen-Cart stock code (tables) intact, once activated it removes the tables and replaces with divs

2.) Adds a show@minWidth option to the layout box controller in ADMIN so you can hide individual side boxes on mobile devices

3.) Adds configuration to offer different views for different devices
- mobile users can view full non-responsive version
- tablet users can view mobile version or full non-responsive version
- is an optional sql patch but some mobile or tablet visitors prefer to view the full site

The Responsive DIY Template Default CSS framework is also GOOGLE RECOGNIZED as a Mobile Site, right now Google indexes sites and adds Mobile friendly - before the sites description , GOOGLE has plans to exclude non Mobile friendly site from search results for mobile users to speed up GOOGLE results on mobile devices in near future.

While Google supports multiple mobile site configurations, creating separate mobile URLs greatly increases the amount of work required to maintain and update your site, and introduces possible sources of technical problems. You can often simplify things significantly by using responsive web design (RWD) and serving desktop and mobile on the same URL! Responsive web design is Google’s recommended configuration. Google Source

Everyone here will give you good advice (but different) advice on how to proceed.

I will advise this, if you plan to DIY:

-Create a sub-directory and upload the latest version of zen-cart to it.

-With a fresh copy of your current template package, merge the The Responsive DIY Template Default code

-Upload your newly coded template

-Install easyPopulate or a comparable plugin and upload your categories and products

-Activate your template and see what CSS tweeks will be needed

This will:

A) familiarize you with the files that need merging
B) give you an idea of what CSS tweeks will be needed

If you do that and get stuck, share a link and I'm positive that someone or myself will chime in and help!

From there you can start uploading your plugins, all of which you listed, I don't see any major appearance issues that will need CSS tweeks, I cannot say they are or will be compatible with the latest version of zen-cart though.

Hope this helps and is not overwhelming!

Thanks!!!! This is what I need to do.. If it's not too much to ask, a few questions...

Quote:

---

Originally Posted by rbarbour

The CSS is designed to make your template fit the screen size but has included code to restrict the templates width to a fixed px.

So if your desktop monitor is 1024 wide, the template will fill the screen but if your current template was designed with a fixed with of 980px, simply un-commenting 1 line of CSS code and adding your templates width is all that is needed from preventing it from filling the entire screen.

CSS tweeks will most likely be needed, I couldn't account for every template designers added HTML divs, tables and code. Most tweeks will involve removing "fixed widths" or "forced widths (!important)".

---

My site was a floating size of 93%, but I just changed it to 960pix so that I could put an image/advertise slider at the top of my home page. I sell DJ and Pro Lighting, and I REALLY need some graphics etc. on home page. My home page looks horrible. How, or will, this work with a slider? and if so, what should I do about page width in combination with a slider? Could I make my slider images WAYYYY wide, and keep my floating 93% size?.. or is there a particular slider plugin that I need to use? or, can I simply not use a slider?.. I'm sure you get my point

Quote:

---

Originally Posted by rbarbour

-Create a sub-directory and upload the latest version of zen-cart to it.

---

Where? Just make a folder in my root? next to admin, includes, images, cache, etc? What should I name this folder that contains the new 1.5.4?

Quote:

---

Originally Posted by rbarbour

-With a fresh copy of your current template package, merge the The Responsive DIY Template Default code

-Upload your newly coded template

---

Upload my new template, complete with your merged DIY package, into the New folder, with the New Zen Cart 1.5.4? Can I point this new ZenCart 1.5.4 to my current database, or is your easypopulate suggestion going to do the same thing as far as making this new site emulate my site? Sorry, I'm not familiar with easypopulate OR pointing two different sites to the same database.

Quote:

---

Originally Posted by rbarbour

-Install easyPopulate or a comparable plugin and upload your categories and products

---

I'm not sure exactly what you mean, in that,,, upload my categories and products from my other (original, current website)? That's what easyPopulate does?

Quote:

---

Originally Posted by rbarbour

-Activate your template and see what CSS tweeks will be needed

---

Are you saying do this, but don't actually use this 'new' zencart,,, and when I get it working like I want, make those same (CSS, etc) changes to my active, current site? In other words use what you have told me to do only as a test? .. NOTE: I have Zen 1.50 and will, at some point need to upgrade.. but I'm not worried about that right now. If I use your DIY code on my current site, will I be able to upgrade to 1.5.4 at some point?

I hope that I'm not over-complicating this, but I have to be very careful about understanding exactly what you say, or I may goof something up. PS. Thanks for the long, detailed, reply. I'm sure that took time and I appreciate it.

Ok, I uploaded the Responsive DIY Template Default for 1.5.x files into {another} ZenCart and did the sql patch. It's not the exact setup of my other site, but similar. With the Includes folder, I uploaded into the directory structure like I would on any other plugin. Where the folders in the plugin said "/responsive_template_default", I put those files in my template folder (crista_pink). Where the plugin folder said zadmin, I put those files in my admin folder. My original zencart didn't have admin/includes/installers , so I uploaded and left the folder in it named "responsive_defaut" .. (should I have changed that to "crista_pink"?) In my "Admin-Tools-Template Selection", the Template Name for my crista_pink changed to "Responsive Template Default", but the Directory still says "crista_pink". This template is by "pixemus" and it installs 4 templates with different colors, so I can easily switch between "pink, violet, grey, and blue" templates, which allow me to "A - B" my results, and since I installed into Pink, I can switch back and fourth with the other colors to compare.
Now... I'm not sure if I'm in over my head or not, and when it comes to my columns instead of rows SNAF, and Lightbox, which aren't installed in this template, and getting them adjusted. As stated on the download page, my colors need fixing, and some of the alignment isn't right. When I scroll to the right on a mobile device, there's a big blank area. On a mobile device, the top categories, and things are placed to the upper left the respect that they are on the mobile screen. The text seems to be squeezed together in the middle of the screen. I'm not sure if this is how it's supposed to look or not, and I'm not sure if that big blank area and the other alignment issues can be fixed via CSS Stylesheet.. I just don't know. I hope that I installed it properly. I did make sure not to miss any files in my upload, and the sql patch went through. I have the demo version of ZenCart installed, so there are products on there. Main thing is that I want this to be acceptable for Google. Is there any way someone could look at this? The url is wholesalebodyboards dot com/dealers ... Thanks!!

posted this by mistake

Empty space on the right is the space for the right sideboxes. Admin-Tools-Layout Boxes Controller, when all sideboxes are set to "ON" or "OFF" for show sidebox @ min width, the space still shows up. Even when I disable all right sideboxes, that space is still there. How do I adjust/fix that? Thanks!

10 Minutes

http://www.zcadditions.com/01012015-520/

I made not 1 CSS tweek, some will be needed but this is what I got only by merging the files in /includes/templates/responsive_template_default/common/ with:

/includes/templates/crista_pink/common/
"tpl_box_default_left.php"
"tpl_box_default_right.php"
"tpl_footer.php"
"tpl_header.php"
"tpl_main_page.php"

and Uploading the: /includes/templates/responsive_template_default/common/ renaming responsive_template_default to crista_pink

"html_header.php"

and Uploading the /includes/templates/responsive_template_default/css renaming responsive_template_default to crista_pink

"responsive.css"
"responsive_default.css"
"responsive_mobile.css"
"responsive_tablet.css"

and Uploading the
\includes\auto_loaders\ *files*
\includes\classes\ *files*
\includes\init_includes\ *files*
\includes\modules\responsive_template_default\ *files* renaming responsive_template_default to crista_pink

I uploaded all ADMIN files
\zadmin\ *files*

Choose the crista_pink template
Reactivated the sideboxes
Activated the responsive template

Done

Quote:

---

Originally Posted by Johnnycopilot

Thanks!!!! This is what I need to do.. If it's not too much to ask, a few questions...

My site was a floating size of 93%, but I just changed it to 960pix so that I could put an image/advertise slider at the top of my home page. I sell DJ and Pro Lighting, and I REALLY need some graphics etc. on home page. My home page looks horrible. How, or will, this work with a slider? and if so, what should I do about page width in combination with a slider? Could I make my slider images WAYYYY wide, and keep my floating 93% size?.. or is there a particular slider plugin that I need to use? or, can I simply not use a slider?.. I'm sure you get my point


Where? Just make a folder in my root? next to admin, includes, images, cache, etc? What should I name this folder that contains the new 1.5.4?


Upload my new template, complete with your merged DIY package, into the New folder, with the New Zen Cart 1.5.4? Can I point this new ZenCart 1.5.4 to my current database, or is your easypopulate suggestion going to do the same thing as far as making this new site emulate my site? Sorry, I'm not familiar with easypopulate OR pointing two different sites to the same database.


I'm not sure exactly what you mean, in that,,, upload my categories and products from my other (original, current website)? That's what easyPopulate does?


Are you saying do this, but don't actually use this 'new' zencart,,, and when I get it working like I want, make those same (CSS, etc) changes to my active, current site? In other words use what you have told me to do only as a test? .. NOTE: I have Zen 1.50 and will, at some point need to upgrade.. but I'm not worried about that right now. If I use your DIY code on my current site, will I be able to upgrade to 1.5.4 at some point?

I hope that I'm not over-complicating this, but I have to be very careful about understanding exactly what you say, or I may goof something up. PS. Thanks for the long, detailed, reply. I'm sure that took time and I appreciate it.

---

Quote:

---

Originally Posted by Johnnycopilot

Ok, I uploaded the Responsive DIY Template Default for 1.5.x files into {another} ZenCart and did the sql patch. It's not the exact setup of my other site, but similar. With the Includes folder, I uploaded into the directory structure like I would on any other plugin. Where the folders in the plugin said "/responsive_template_default", I put those files in my template folder (crista_pink). Where the plugin folder said zadmin, I put those files in my admin folder. My original zencart didn't have admin/includes/installers , so I uploaded and left the folder in it named "responsive_defaut" .. (should I have changed that to "crista_pink"?) In my "Admin-Tools-Template Selection", the Template Name for my crista_pink changed to "Responsive Template Default", but the Directory still says "crista_pink". This template is by "pixemus" and it installs 4 templates with different colors, so I can easily switch between "pink, violet, grey, and blue" templates, which allow me to "A - B" my results, and since I installed into Pink, I can switch back and fourth with the other colors to compare.
Now... I'm not sure if I'm in over my head or not, and when it comes to my columns instead of rows SNAF, and Lightbox, which aren't installed in this template, and getting them adjusted. As stated on the download page, my colors need fixing, and some of the alignment isn't right. When I scroll to the right on a mobile device, there's a big blank area. On a mobile device, the top categories, and things are placed to the upper left the respect that they are on the mobile screen. The text seems to be squeezed together in the middle of the screen. I'm not sure if this is how it's supposed to look or not, and I'm not sure if that big blank area and the other alignment issues can be fixed via CSS Stylesheet.. I just don't know. I hope that I installed it properly. I did make sure not to miss any files in my upload, and the sql patch went through. I have the demo version of ZenCart installed, so there are products on there. Main thing is that I want this to be acceptable for Google. Is there any way someone could look at this? The url is wholesalebodyboards dot com/dealers ... Thanks!!

---

Quote:

---

Originally Posted by Johnnycopilot

posted this by mistake

---

Quote:

---

Originally Posted by Johnnycopilot

Empty space on the right is the space for the right sideboxes. Admin-Tools-Layout Boxes Controller, when all sideboxes are set to "ON" or "OFF" for show sidebox @ min width, the space still shows up. Even when I disable all right sideboxes, that space is still there. How do I adjust/fix that? Thanks!

---

forgot,

I installed the:
sql_new_install.sql patch

after

I uploaded all ADMIN files
\zadmin\ *files*

What you did looks great. That' what I need. I don't know why mine didn't come out like that. I have been over and over this a dozen times, and I have uploaded all of those files several times, uninstalled all of the files, re-uploaded them, twice... In my Admin-Tools-Template Selection, my crista_pink template still says "Responsive Template Default". It's more than likely something that I screwed up, deleted something by accident,,, who knows. Probably one little simple thing I did wrong. Question.. When you say "merge" do you mean "replace"? In the case with files of same name, I REPLACED the existing file with file from DIY. At this point, I think I'll start with another fresh install of ZenCart and try it again. Once I can get it right on a test site, I'll try it on my lighting site. Can you think of anything obvious that I may have done wrong? Another Question.. What do you mean by you "Activated the responsive template"? How do you activate it? and by "reactivating the sideboxes", so you mean simply turn them on in Admin? Thanks!

Quote:

---

Originally Posted by Johnnycopilot

What you did looks great. That' what I need. I don't know why mine didn't come out like that. I have been over and over this a dozen times, and I have uploaded all of those files several times, uninstalled all of the files, re-uploaded them, twice... In my Admin-Tools-Template Selection, my crista_pink template still says "Responsive Template Default". It's more than likely something that I screwed up, deleted something by accident,,, who knows. Probably one little simple thing I did wrong. Question.. When you say "merge" do you mean "replace"? In the case with files of same name, I REPLACED the existing file with file from DIY. At this point, I think I'll start with another fresh install of ZenCart and try it again. Once I can get it right on a test site, I'll try it on my lighting site. Can you think of anything obvious that I may have done wrong? Another Question.. What do you mean by you "Activated the responsive template"? How do you activate it? and by "reactivating the sideboxes", so you mean simply turn them on in Admin? Thanks!

---

No, merge means merge the responsive_template_default file with the crista_pink file

Find all instances that look like this in the mentioned files:

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

CODE

<!--(EOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

and copy it to the crista_pink files

Question: When merging files, where BOF's have the same description, do I REPLACE all of the existing code between the BOF's and EOF's with DIY code,, or add DIY code to the other code keeping all DIY code between BOF and EOF and keeping original code intact,, or add the entire DIY BOF thru EOF beginnings, code, and end of file, below the existing code, leaving the original code start to finish intact? (see first example)

I understand what I need to do and why I need to do it, but I'm not sure where to start and stop and exactly what to add and/or replace.

I don't want to say this is confusing to me, but because I don't know what the code is saying, it all looks like unrecognizable digits, one following the other. I do understand that BOF means beginning of file, and EOF means End of file... Sorry I'm having so much difficulty understanding what to do. I've never merged 2 php files together... I took these few examples (below) from the first two files I tried to merge and I don't know what to do. I haven't even looked at the rest of them. Thanks
Original Code...

PHP Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<div class="sidebox-header-left <?php echo $header_left; ?>"><h3 class="leftBoxHeading <?php echo $header_right; ?>" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3></div>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

---

Code from DIY...

PHP Code:

---

<!--// bof: <?php echo $box_id; ?> //-->
<?php if (COLUMN_WIDTH == '0'){ ?>
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<?php }else{ ?>
<div class="leftBoxContainer <?php echo $minWidthHide; ?>" id="<?php echo str_replace('_', '-', $box_id ); ?>">
<?php } ?>
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

---

Or here, this is even more confusing to me..
My original Code..

PHP Code:

---

<div id="navSuppWrapper">
        <!--bof-navigation display -->
        <?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
        <?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
        <?php } ?>
        <!--eof-navigation display -->

---

DIY code is

PHP Code:

---

<!--bof-navigation display -->
<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->
<div id="navSuppWrapper" class="<?php echo $fluidisFixed; ?>">
<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

<div id="navSupp">
<ul>
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<li><?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?></li>
<?php } ?>
</ul>
</div>
</div>
<!--eof-navigation display -->

---

And here, there is a 4 word addition, in the MIDDLE of existing code

PHP Code:

---

ENT_COMPAT, CHARSET, TRUE); 


---

Am I supposed to add that one line of code to my existing code? I don't understand php, so I could easily miss something or screw something up.
original code

PHP Code:

---

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}

?>

---

DIY code is here

PHP Code:

---

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']), ENT_COMPAT, CHARSET, TRUE);
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message'], ENT_COMPAT, CHARSET, TRUE);
} else {

}
?>

---

In tpl_box_default_left.php , there is no

PHP Code:

---

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

CODE

<!--(EOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 


---

But there is

PHP Code:

---

<!--// bof: <?php echo $box_id; ?> //-->

CODE

<!--// eof: <?php echo $box_id; ?> //-->

---

Which matches code in my file, except some additions. I would imagine that I can't have BOTH $box_id; ? files,, or can I? I'm not sure what to merge and what not to merge.

same thing with tpl_header.php, no

PHP Code:

---

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 


---

and in my stylesheet.css do I simply add all of the DIY styles, not worrying if there are any duplicate styles already in there?

Or do I simply ignore any place that doesn't have

PHP Code:

---

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 


---

and copy only those files? So, for example, I wouldn't do anything as far as merging tpl_box_default_left.php and tpl_box_default_right.php and tpl_header.php Thanks!!!!! I really appreciate it !!

Thanks schoolboy, gilby, jeking, picaflor-azul, RixStix, Merlinpa1969, and rbarbour. I appreciate ALL of your help. I am going to follow the advice of Y'all and use a responsive template. If I were better at PHP, rbarbour has a great solution. I've realized that getting 'help' with merging this code would essentially be the same thing as someone else DOING the work for me. Hopefully this thread will help someone that is going through the same thing I am going through, and help them make some decisions. I have said this before, but I REALLY appreciate and enjoy this ZC Forum, and the awesome, polite, information and help that I get here. :cheers:

I ran across this tonight. I thought it only fair that I post this, for anyone who has been reading and/or following this thread. 12leaves has Mobile (only) Themes. They install in the root, and don't effect your current site. Their description of the Mobile Only themes is... "There is no duplicate content after you install our mobile theme. Only look and feel changes when you visit the site via mobile device, so all the settings, products and other content are exactly the same as you have for your regular desktop theme. It works as just you change your theme via admin area, but it automatically changes for mobile devices." I am more than likely going with a responsive template, but I wanted to share this in case this may work better for someone. http://blog.12leaves.com/2012/11/22/...cart-template/

I'm tardy to this party, but wanted to add my three cents in case someone else stumbles here..

Quote:

---

Originally Posted by rbarbour

What the Responsive DIY Template Default CSS framework was built for....

1.) Creates a Responsive Template as a starting point for those designing their own website templates.

2.) Allows one to easily adapt the HTML necessary to convert an existing website template.
a.) The included CSS framework does the magic! :smile:

3.) Includes google Mobile Detect which allows Mobile users to view Full Website (desktop version) if they choose too.

4.) Includes php and css code to hide sideboxes on mobile devices which would otherwise clutter screen and slow loads.

---

Raymond's framework is a fantastic starting ground for someone who has an existing template they are happy with, and wants to "convert" it to responsive.. I was one of his guinea pigs for the pre-first-gen of this framework.. From the earliest versions of this framework, it was a LIFE & TIME SAVER.. After merging the files from his framework with my existing template, I saw my non-responsive template become responsive pretty much instantly.. I say "pretty much" only because I still had to do a little work (very little) to tweak the various device views to my client's liking, and I had to make some tweaks to other appearance modules that weren't responsive (at that time), and needed some nudging to work responsively. Additionally I found that media queries alone weren't enough to do everything I needed to do so I incorporated the MobileDetect script to fill in that gap there.. But the BIG game changer was Raymond's framework.. It did most of the heavy lifting for me.. The latest versions of his Raymond's framework now include the MobileDetect script, and a TON of out the box hints/helps/samples to get you off the ground and running.. He made a good thing even better IMHO..

Quote:

---

Originally Posted by rbarbour

Everyone here will give you good advice (but different) advice on how to proceed.

I will advise this, if you plan to DIY:

-Create a sub-directory and upload the latest version of zen-cart to it.

-With a fresh copy of your current template package, merge the The Responsive DIY Template Default code

-Upload your newly coded template

-Install easyPopulate or a comparable plugin and upload your categories and products

-Activate your template and see what CSS tweeks will be needed

This will:

A) familiarize you with the files that need merging
B) give you an idea of what CSS tweeks will be needed

If you do that and get stuck, share a link and I'm positive that someone or myself will chime in and help!

From there you can start uploading your plugins, all of which you listed, I don't see any major appearance issues that will need CSS tweeks, I cannot say they are or will be compatible with the latest version of zen-cart though.

---

Your advice mirrors what I would have suggested as well.. Doing all of this work in a test/dev environment will give the OP an opportunity to make all of his/her changes without interfering with the live site.. I would only make one additional suggestion, and that is create a sub-domain for this test store.. This way any if the live store is working from the top level of the hosting space, the dev store will behave the same (ie: behavior/paths when the store is operating from a sub-domain will be different) This will be important if the OP is doing anything that makes changes to the root level .htaccess file.. (and before anyone turns this ONE statement into an off topic URL re-writer discussion, take a pill and relax :smile:.. there are OTHER useful things one MIGHT be adding to their root level .htaccess file)

Quote:

---

Originally Posted by Johnnycopilot

Thanks schoolboy, gilby, jeking, picaflor-azul, RixStix, Merlinpa1969, and rbarbour. I appreciate ALL of your help. I am going to follow the advice of Y'all and use a responsive template. If I were better at PHP, rbarbour has a great solution. I've realized that getting 'help' with merging this code would essentially be the same thing as someone else DOING the work for me. Hopefully this thread will help someone that is going through the same thing I am going through, and help them make some decisions. I have said this before, but I REALLY appreciate and enjoy this ZC Forum, and the awesome, polite, information and help that I get here. :cheers:

---

Glad my other post about someone "DOING" the work was accepted in the spirit in which it was intended:smile:.. (some folks get bent out of shape when I inform them of this..:smile:) Wanted to add one more thing.. You do not have to be good necessarily at PHP, but you do need to understand the structure of the default template files to understand how to properly merge in Raymond's framework.. Time and practice will make this better for you.. Having a development store will give you that luxury..

OR

you can hire someone to do that work for you and save you a few gray hairs..:smile: You can use those files to help you learn and understand what needs to be done..

That said I need to add one IMPORTANT caveat.. **drumroll**

For you poor souls who now have a Template Monstrosity or Theme Forrest or (yeah have to add them to "the list") a 12 Leaves template. You will have your own special brand of "fun" merging Raymond's framework with one of these beasts.. **to be clear** I am not saying you cannot incorporate Raymond's framework with one of these templates.. I AM saying that many of these templates already hack and crack the hell out of the Zen Cart core template structure (ALWAYS un-necessarily BTW!) to the point of making many of the core files unrecognizable, which then in turn will make the job of merging Raymond's framework an exercise insanity for vets and newbies alike..

So yeah.. while Raymond's framework is the BOMB, it can't fix BAD/CRAP templates on contact.. Kinda like how lipstick and designer clothes can't turn a pig into a super model..

One more thing I ran across. (I put this in my other thread too) Quote from Google "Google recognizes three different configurations for building mobile sites... Responsive web design, Dynamic serving, Separate URLs, ..... Responsive design is Google’s recommended design pattern." More information here https://developers.google.com/webmas...t-config?hl=en

I do have another question or two. I am going to use a responsive template, but for future reference, and perhaps even with my new responsive template, at some point I am going to need to merge some complicated (for me) php files. I wasn't aware of this the other day, but there are PHP Merging programs out there. Some free, some not. My questions... (1) is there one (that anyone here is aware of) that is particularly better than the others? and (2), how accurate (for lack of a better word) are these programs? Thanks

Quote:

---

Originally Posted by Johnnycopilot

I do have another question or two. I am going to use a responsive template, but for future reference, and perhaps even with my new responsive template, at some point I am going to need to merge some complicated (for me) php files. I wasn't aware of this the other day, but there are PHP Merging programs out there. Some free, some not. My questions... (1) is there one (that anyone here is aware of) that is particularly better than the others? and (2), how accurate (for lack of a better word) are these programs? Thanks

---

Beyond Compare.. PERIOD.. It's commercial, but worth EVERY SINGLE PENNY!!! (and let's be clear.. it's NOT expensive..) Skip the standard version.. Get the Pro version..

Winmerge is free and it SUCKS.. PERIOD.. You WILL get what you pay for with Winmerge.. nothing..:laugh:

Quote:

---

Originally Posted by Johnnycopilot

I do have another question or two. I am going to use a responsive template, but for future reference, and perhaps even with my new responsive template, at some point I am going to need to merge some complicated (for me) php files. I wasn't aware of this the other day, but there are PHP Merging programs out there. Some free, some not. My questions... (1) is there one (that anyone here is aware of) that is particularly better than the others? and (2), how accurate (for lack of a better word) are these programs? Thanks

---

Beyond Compare was well. Been using it for years!

Thanks, I'll take Y'all's word and get it. Thank you verrrrrrrrrrry much

So , in summary, converting an existing 1.5.1. Zen template to a responsive theme (for mobile ready) is the recommended and easier solution , than a separate mobile template that mobile visitors are redirected to? Is the Responsive conversion fairly simple, withotu needing a complete template redesign?

kevinmc3, I'm sure that I'm not the best person to answer this, but I have learned a few things I would like to share. Google says the preferred method is a responsive template over the other two 'types'. Converting my existing template with the DIY responsive code did not work for me, because I was not able to merge the code with the highly modified 12 Leaves Template that I am already using; however, the people at 12 Leaves claim their responsive templates will work with Zen Cart with no core changes, so the conversion (Template install) is supposed to be very simple. I know that picaflor-azul (Anne here on the forum) has a ton of very very nice looking and working templates. I'm sure if you ask her or look around here on the forum, or go look at her demo's you can find out how they work and install. So, in summary, I am going to use a responsive template instead of converting my existing template. Also, I know that 12Leaves has some Mobile ONLY templates that you put in your root folder, in which you don't do anything to your existing template, that will make your site 'work' on mobile devices, and your existing template is still used when people view your site from a large screen; About the Mobile only templates, 12 Leaves says "They install in the root, and don't effect your current site. There is no duplicate content after you install our mobile theme. Only look and feel changes when you visit the site via mobile device, so all the settings, products and other content are exactly the same as you have for your regular desktop theme. It works as just you change your theme via admin area, but it automatically changes for mobile devices." ..... but like I said, Google claims that the Responsive site is preferred. I don't know if Picaflor-azul (Anne) has any mobile only templates, but I know has plenty of Responsive templates. Go to her site and check it out. Hope this helps.

Quote:

---

Originally Posted by picaflor-azul

That is a very bad idea as far as google is concerned.

You really need to just convert your current site to a responsive design.

Thanks,

Anne

---

Hey Anne,

Is there anyway to get a small search bar on the mobile site? Mines looking quite nice but I really wish I had a search bar.

Site is http://www.westnewtonsupply.com

Mobile site looks like this - Attachment 16493