Responsive DIY Template Default for v1.5.x

OK I re-downloaded a fresh copy and started over and things appear to work. Think I may have missed a /div tag.

Now just gotta figure out what css file does what.

Can I ask a dumb question? And to be clear, I'm not asking as a suggestion you're doing it the wrong way... because I really have no idea. But when I look at how things are done in my responsive template for a different shopping cart, there is no need at all for logic to dictate what version is being served up. I mean in your package, there is a dependence on this $_SESSION['layoutType'] variable. Is that really necessary? Can't it be done entirely in CSS based on viewport?

In short, yes it can be done entirely with CSS, upload just the zca_responsive.css and zca_responsive_default.css files, merge the html_header.php (without the $_SESSION['layoutType'] variables) and tpl_main_page.php file and your good to go!

However, what will be unnecessary is all the CSS media queries added for tablet and desktop views while visitors visit the site via a mobile device.

The zca_responsive_default.css loads on the desktop and "hides and manipulates" content for all views whereas the zca_responsive_mobile.css only get loaded on mobile devices and only contains the CSS changes for mobile devices.

The $_SESSION['layoutType'] variables allow you to include jQuery for mobile devices only and not tablet and desktops and vise versus.

The $_SESSION['layoutType'] variables allow to swap out a "desktop header" file for a "mobile header" with less code to load.

The $_SESSION['layoutType'] variables allow to add tabs to the "desktop" product info page and a mobile friendly accordion to the "mobile" product info page without the need to "hide or manipulate".

The code is "open source" and you can use it, manipulate it, change or alter it in any way you see fit. Good or bad, right or wrong!

I wasn't judging :) I just thought maybe there was a reason you had to go about it programically like that. I haven't delved enough into it to really know, it just seemed like there would be less php code for a designer to worry about if it were done in CSS using media queries. While I'm slightly curious to know which way is more performance efficient... I don't care enough to actually try both and compare :)

Sorry if it came across that way :cool:

Just wanted to clarify the best way I could for you and others that may come across this post.

The $_SESSION['layoutType'] variables play a huge part in this package and are very under utilized and are what makes it simply more than just a responsive template with media queries.

s_mack:

I wasn't judging :) I just thought maybe there was a reason you had to go about it programically like that. I haven't delved enough into it to really know, it just seemed like there would be less php code for a designer to worry about if it were done in CSS using media queries. While I'm slightly curious to know which way is more performance efficient... I don't care enough to actually try both and compare :)

Not sure if I am talking about an issue or a feature!
Well anyway using this addon the product listing on my smart phone looks quite squashed up; I mean I have the image, the product description and pricing stuff in the same row which results in a very small image.

I have now added the following to the responsive_mobile.css and now the image is in one row and the product description and pricing stuff in the next row so I can have a much bigger image. The vertical spacing is not ideal but overall for me it looks more useable or is there another way to do this?

.productListing-data {
display: block;
}

Thank you,

I'll take a second look to see if I missed something...

marton_1:

Not sure if I am talking about an issue or a feature!
Well anyway using this addon the product listing on my smart phone looks quite squashed up; I mean I have the image, the product description and pricing stuff in the same row which results in a very small image.

I have now added the following to the responsive_mobile.css and now the image is in one row and the product description and pricing stuff in the next row so I can have a much bigger image. The vertical spacing is not ideal but overall for me it looks more useable or is there another way to do this?

.productListing-data {
display: block;
}

Now I'm not so sure I've got things working 100%

I was trying to style things to no avail and I've noticed I don't see responsive or responsive_default stylesheets loading anywhere when I look at my page's source code. http://shakatourshawaii.com/test/

I take it that I should see one or both of those stylesheets in the source code somewhere and I've done something wrong along the way?

Thanks for the help

rbarbour:

Sorry if it came across that way :cool:

Just wanted to clarify the best way I could for you and others that may come across this post.

The $_SESSION['layoutType'] variables play a huge part in this package and are very under utilized and are what makes it simply more than just a responsive template with media queries.

I agree absolutely ! This feature will allow you to serve only the relevant parts of the template (if they are different) to phones (where you might need additional jquery or want to hide other page elements) as opposed to desktops where you might want a more complex layout. It's all about flexibility. Such an important feature when it comes to optimizing for google page speed which is a major factor in page and search engine rankings. Thank you rbarbour for putting together the best package for responsive design for zen cart and for releasing it free to the zen cart community :hug:

Thanks,

Anne

s_mack:

it just seemed like there would be less php code for a designer to worry about if it were done in CSS using media queries.Some things simple can't be done with media queries alone.. Sometimes you don't want to just HIDE something in a particular viewport, sometimes you just don't need/it to load at all.

I understand that now, thanks.

rbarbour:

Sorry for the confusion :blush:

As I worked to improve this package it simply became a new and improved animal,which making the upgrade would simple be to problematic for those using it for it has been simplified removing over 16 of the files therefore I am creating a whole new package.

The version available in the plugin section is the most recent and stable version which I only plan to update the read me and instructions.

I am posting the new package here which is still being tested by others, it is a standalone template. Some instructions are included but not complete. I will complete both versions and upload when time permits.

I hope to get some feedback from those who download it!

[Attachment no longer available]

This is a NICE improvement upon the original!! Installed on top of Barebones, and I had INSTANT "Barebones Responsive"

picaflor-azul:

I agree absolutely ! This feature will allow you to serve only the relevant parts of the template (if they are different) to phones (where you might need additional jquery or want to hide other page elements) as opposed to desktops where you might want a more complex layout. It's all about flexibility. Such an important feature when it comes to optimizing for google page speed which is a major factor in page and search engine rankings. Thank you rbarbour for putting together the best package for responsive design for zen cart and for releasing it free to the zen cart community :hug:

Thanks,

Anne

Thanks Anne,

And thanks for providing so many beautiful and professional templates free to the zen cart community!

DivaVocals:

This is a NICE improvement upon the original!! Installed on top of Barebones, and I had INSTANT "Barebones Responsive"

Instant is what I was aiming for!

Thanks for sharing Crystal!

Another improvement I'll be adding is for mobile devices, add this code to the /includes/templates/zca_responsive_template_default/jscript/jscript_zca_responsive_framework.php file so all form inputs retrieve the correct mobile keypad.

I place it within the ```
if ( $_SESSION['layoutType'] == 'mobile' ) {

$('input#email-address').clone().attr('type','email').insertAfter('input#email-address').prev().remove();
$('input#searchHeader').clone().attr('type','search').insertAfter('input#searchHeader').prev().remove();
$('input#mailChimp').clone().attr('type','email').insertAfter('input#mailChimp').prev().remove();
$('input#login-email-address').clone().attr('type','email').insertAfter('input#login-email-address').prev().remove();
$('input#postcode').clone().attr('type','number').insertAfter('input#postcode').prev().remove();
$('input#telephone').clone().attr('type','tel').insertAfter('input#telephone').prev().remove();
$('input#dob').clone().attr('type','date').insertAfter('input#dob').prev().remove();
$('input#fax').clone().attr('type','tel').insertAfter('input#fax').prev().remove();

Mike D:

Now I'm not so sure I've got things working 100%

I was trying to style things to no avail and I've noticed I don't see responsive or responsive_default stylesheets loading anywhere when I look at my page's source code. http://shakatourshawaii.com/test/

I take it that I should see one or both of those stylesheets in the source code somewhere and I've done something wrong along the way?

Thanks for the help

you have
includes/templates/shakatours/css/stylesheet.css

try
includes/templates/responsive_template_default/css/stylesheet.css

marton_1:

you have
includes/templates/shakatours/css/stylesheet.css

try
includes/templates/responsive_template_default/css/stylesheet.css

Yep, that appears to have done it. Thanks so much marton.

I sell a number of products that come in various sizes so I have tables that show the various sizes.

Unfortunately pages with these products fail the Google mobile friendly test.

Is there a way to do this in a general way? I mean like a table version of this image adjustment "img{max-width:100%;height:auto;border:0;}"

A typical table looks like this (see also attached image) "<table border="2" cellpadding="0" cellspacing="0" style="width: 339px;" width="338">"

Mike D:

Yep, that appears to have done it. Thanks so much marton.

You will also need to add "responsive_template_default" everywhere you have "templates".

Forgive me in advance, but I have searched through this thread and several others trying to find the answer to my question.

I'm looking for a way to combine the responsive theme with a dynamic site that will deliver slightly different content based on device. For example, if a user arrives using a cell phone, I want more of a mobile template using icons and drop down menus vs. the single-column version of the desktop site the responsive template seems to deliver. However, I do not want a separate mobile site.

Basically what I'm looking for is a script that will pick a zen cart theme (template 1 and template 2) based on device, but essentially deliver the same content using the same urls. That way I can modify the pages individually for the various layouts I'm looking for.

Maybe the responsive template can already do this?? If so, what am I missing? How can I tell it to pull a different index.php file for the phone than the desktop?

I was really hoping I'd solve this one myself but no luck so far...

My main index pages on all platforms don't seem to be loading stylesheets. I imagine there's a problem in my tpl_main_page file but I haven't been able to tell what it might be yet. It seems like everything else is working the way it should. Browsers do recognize the difference between desktops/mobiles/tablets and I can style things on my other pages, but I can't seem to get the main page to respond.

Does anybody have any idea what may be causing this?

My site: http://www.shakatourshawaii.com/test