Responsive DIY Template Default for v1.5.x

[Mike D]

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.

[s_mack]

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?

[rbarbour]

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!

[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 :)

[rbarbour]

Sorry if it came across that way

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 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 :)

[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;
}

[rbarbour]

Thank you,

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

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;
}

[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

[picaflor-azul]

Sorry if it came across that way

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

Thanks,

Anne

[DivaVocals]

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.