Responsive DIY Template Default for v1.5.x

I realize that; it's just that the responsive.css file for "many" of the templates based on v1.0 of the DIY Responsive Template contain the construct that I documented a couple of posts ago. I'm just trying to let people know that their size-specific overrides (like some I was attempting) won't work with the default CSS structure.

I have loaded the files on a test template, and can't get a couple of things:
I see that mainWrapper is removed, and to set the width I need to change in responsive_default .onerow-fluid{width:100%;*zoom:1;margin:auto;}and uncomment ```
div#headerWrapper,div#navSuppWrapper{width:980px;margin:auto;}

Now with those settings I see col210, and col760, but the header, and footer seem to go all the width of the screen, and when resizing the browser it doesn't respond, as I have to scroll horizontally.
I also tried 980px, and turning on the right column with 210px, but no luck.

Also lacking the mainWrapper the background, and othe rules of it don't apply.

I am sure it's me who is missing something, but would appreciate your assistance.

Thank you.

keneso:

I have loaded the files on a test template, and can't get a couple of things:
I see that mainWrapper is removed, and to set the width I need to change in responsive_default .onerow-fluid{width:100%;*zoom:1;margin:auto;}and uncomment ```
div#headerWrapper,div#navSuppWrapper{width:980px;margin:auto;}

> 
> Now with those settings I see col210, and col760, but the header, and footer seem to go all the width of the screen, and when resizing the browser it doesn't respond, as I have to scroll horizontally.
> I also tried 980px, and turning on the right column with 210px, but no luck.
> 
> Also lacking the mainWrapper the background, and othe rules of it don't apply.
> 
> I am sure it's me who is missing something, but would appreciate your assistance.
> 
> Thank you.

in the responsive_default.css file, find:

@media (max-width:979px){} }

@media (min-width:980px){}}

@media (max-width:1200px){

/* The responsive code automatically adjusts the width to 100% on a desktop screen /
/ Changing the % (100%) to a px (980px) will keep .onerow-fluid from expanding past (980px) /
/ The below (margin:auto;) centers .onerow-fluid if changed to a (px) value */

.onerow-fluid{width:100%;*zoom:1;margin:auto;}

/* The below code will also keep your header and footer from expanding past (980px) /
/ div#headerWrapper,div#navSuppWrapper{width:980px;margin:auto;} */

and change to:

[B]@media (max-width:979px){}

@media (min-width:980px){}[/B]

@media (max-width:1200px){

/* The responsive code automatically adjusts the width to 100% on a desktop screen /
/ Changing the % (100%) to a px (980px) will keep .onerow-fluid from expanding past (980px) /
/ The below (margin:auto;) centers .onerow-fluid if changed to a (px) value */

.onerow-fluid{width:100%;*zoom:1;margin:auto;}

/* The below code will also keep your header and footer from expanding past (980px) /
/ div#headerWrapper,div#navSuppWrapper{width:980px;margin:auto;} */

removing:
@media (max-width:979px){} **}**

@media (min-width:980px){}**}**

will update master for next release

rbarbour:

removing:
@media (max-width:979px){} }

@media (min-width:980px){}}

will update master for next release

Nope, that was addressed in 2.0

Do you have a link to your site?

Thank you.
this is the link:
afzdesign dot com /zencart-downloaded-res-tpls/

keneso:

Thank you.
this is the link:
afzdesign dot com /zencart-downloaded-res-tpls/

I can't reproduce the same outcome on my dev site.

in the responsive_default.css file
try changing:

@media (min-width:980px){}

@media (max-width:1200px){

to:
@media (min-width:980px) and (max-width:1200px){

Is there a way to stop the Tabbed product pro from using its scripts when on mobile phones? It is not really that mobile friendly as the headings are extremely small to switch tabs. I rather use the accordion view for mobiles as its alot more simply and takes less space on the phone screen.

Currently, I have it set to use either or but trying to find a way to have the responsive file switch it on media viewport.

honda2007:

Is there a way to stop the Tabbed product pro from using its scripts when on mobile phones? It is not really that mobile friendly as the headings are extremely small to switch tabs. I rather use the accordion view for mobiles as its alot more simply and takes less space on the phone screen.

Currently, I have it set to use either or but trying to find a way to have the responsive file switch it on media viewport.

I don't use TPP, I find it to bulky and slows the product info page.

This template provides many examples: one way would be to create a second /includes/templates/template_default/templates/tpl_product_info_display.php file:

/**
 ******************************* EXAMPLE FOR 2.0 *******************************
 * BOF: Example of loading different tpl files for different devices
 */

if ( $detect->isMobile() && !$detect->isTablet() ){

/**
 * includes no extra code for mobile phones
 */

  require($template->get_template_dir('tpl_product_info_display_4_phones.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display_4_phones.php');

} else if( $detect->isTablet() ){

/**
 * includes Accordion Menu code for tablets
 */
  require($template->get_template_dir('tpl_product_info_display_4_tablets.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display_4_tablets.php');

} else {

/**
 * includes code for TPP on desktops
 */
  require($template->get_template_dir('tpl_product_info_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display.php');

}
/**
 ******************************* EOF 2.0 ***************************************
 * EOF: Example of loading different tpl files for different devices
 */

rbarbour:

I don't use TPP, I find it to bulky and slows the product info page.

This template provides many examples: one way would be to create a second /includes/templates/template_default/templates/tpl_product_info_display.php file:

/**
******************************* EXAMPLE FOR 2.0 *******************************

• BOF: Example of loading different tpl files for different devices
  */

if ( $detect->isMobile() && !$detect->isTablet() ){

/**

• includes no extra code for mobile phones
  */

require($template->get_template_dir('tpl_product_info_display_4_phones.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display_4_phones.php');

} else if( $detect->isTablet() ){

/**

• includes Accordion Menu code for tablets
  */
  require($template->get_template_dir('tpl_product_info_display_4_tablets.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display_4_tablets.php');

} else {

/**

• includes code for TPP on desktops
  */
  require($template->get_template_dir('tpl_product_info_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_product_info_display.php');

}
/**
******************************* EOF 2.0 ***************************************

• EOF: Example of loading different tpl files for different devices
  */

I appreciate you pointing that out to me.  It didn't cross my mind to make a separate product info template page.  I will start doing the changes and test it out.  Thanks again.

honda2007:

I appreciate you pointing that out to me. It didn't cross my mind to make a separate product info template page. I will start doing the changes and test it out. Thanks again.
I personally like tab products Pro and I don't agree that it is heavy on the product info page at all.. that said the suggestion to create seperate product info pages for smartphones and tablets may be a good solution.. you might want to however take a look at the various threads which cover creating product info pages.. each one is linked to a product type, so you may need to do some other modifications to get this to work without the need tocreate a new product type..

rbarbour:

I can't reproduce the same outcome on my dev site.

in the responsive_default.css file
try changing:

@media (min-width:980px){}

@media (max-width:1200px){

to:
@media (min-width:980px) and (max-width:1200px){

Thank you.
It seems that fixes it, now no more horizontal scrolling when resizing the browser, BUT in full screen, it still expands over the 980px set, my monitor is at 1280x960

I tested it on my phone, and the font-size is really small, I guess I have to play with that?
Anyhow I wanted to let you know the portrait/landascape difference as per your js: the header displays red in both cases, the orange in portrait displays for less than a second while first loading, and when I scroll all the way down, and then scroll back up when reaching header, again for just a second, or so.

Phone is LG E400 (Optimus 3), the default browser.

Forgot to mention/ask about mainWrapper, in my case I had a background image in it with transparent header, and now it seems the image won't expand to the header.
What am I missing?

Thank you.

DivaVocals:

I personally like tab products Pro and I don't agree that it is heavy on the product info page at all..

I have to admit I haven't installed or used TPP since early 2009 and I am confident if you disagree, something has been changed with TPP from then till now.

DivaVocals:

that said the suggestion to create seperate product info pages for smartphones and tablets may be a good solution.. you might want to however take a look at the various threads which cover creating product info pages.. each one is linked to a product type, so you may need to do some other modifications to get this to work without the need tocreate a new product type..

I agree with you, if your web shop utilizes the many different product types creating separate tpl_product_info_display.php files may NOT wanna be the way to go.

Note: the same code provided LESS the include statements can also be used in the actual tpl_product_info_display.php file to show different code for different devices.

keneso:

Thank you.
It seems that fixes it, now no more horizontal scrolling when resizing the browser, BUT in full screen, it still expands over the 980px set, my monitor is at 1280x960

This would tell me you have overlapping @media query min-width and max-width expressions.

keneso:

I tested it on my phone, and the font-size is really small, I guess I have to play with that?
Anyhow I wanted to let you know the portrait/landascape difference as per your js: the header displays red in both cases, the orange in portrait displays for less than a second while first loading, and when I scroll all the way down, and then scroll back up when reaching header, again for just a second, or so.

Phone is LG E400 (Optimus 3), the default browser.

Again, this tells me you have overlapping @media query min-width and max-width expressions.

The code works and displays device specific css, js, jQuery, module files, template files, images and text all based on whether or not the php_mobile_detect code recognizes a visitors UA (user agent).

IF a UA is not detected it returns the default css, js, jQuery, module files, template files, images and text.

The responsive_default.css and related files are for desktop views and should only have MINIMAL @media query min-width and max-width expressions as a fallback for when a UA is not detected and otherwise really not needed except to provide a better display from a 13inch laptop to a 42inch desktop monitor.

@keneso per your PM, send the download links

Thanks

The feedback I had in 2010 when I first switched to using the TPP mod was a welcomed addition from the viewpoint of my customers. As for the performance of the site, I test it with my kids phone plans as it still uses the Edge data connection. This is how I mainly test the performance of my site as if it loads quickly on their phones, then others should not have a problem as 4g data and wifi hotspots are more common.

As a followup to what I ended up doing was to put 2 IF statements to detect mobile in the product_info page itself. The first was to condition whether the tpp module file is to be loaded. And the second was to condition whether the accordion views would be loaded. Tested on 5 smartphones and it loaded the accordion, a nook and ipad both showed TPP, and TPP for desktop. Checked the page source and everything is working as expected.

But this is a temporary fix for now and will end up doing the switch between product_info pages as I find it easier to do layout changes in the future.

Test results of your site
All worked as expected:
Phones tested: HTC Desire, Iphone 3, Iphone 4
Tablets tested: Nook HD, Ipad 2

Weird results for 1 phone which is a dual sim from Korea. Your site was saying this phone is a tablet and the header colors followed suit. Figured you may want to know as these dual sims are popular when I travel to Asia.

Thank you.

I am sorry, but I am afraid I am not following you on the "overlapped" thing.

Links sent.

I think you're going to find that trying to do dual product info pages is going to be a little more difficult than you are anticipating because product info pages are tied to product types. that will be what you have to work around..

honda2007:

The feedback I had in 2010 when I first switched to using the TPP mod was a welcomed addition from the viewpoint of my customers. As for the performance of the site, I test it with my kids phone plans as it still uses the Edge data connection. This is how I mainly test the performance of my site as if it loads quickly on their phones, then others should not have a problem as 4g data and wifi hotspots are more common.

As a followup to what I ended up doing was to put 2 IF statements to detect mobile in the product_info page itself. The first was to condition whether the tpp module file is to be loaded. And the second was to condition whether the accordion views would be loaded. Tested on 5 smartphones and it loaded the accordion, a nook and ipad both showed TPP, and TPP for desktop. Checked the page source and everything is working as expected.

But this is a temporary fix for now and will end up doing the switch between product_info pages as I find it easier to do layout changes in the future.

Test results of your site
All worked as expected:
Phones tested: HTC Desire, Iphone 3, Iphone 4
Tablets tested: Nook HD, Ipad 2

Weird results for 1 phone which is a dual sim from Korea. Your site was saying this phone is a tablet and the header colors followed suit. Figured you may want to know as these dual sims are popular when I travel to Asia.

DivaVocals:

I think you're going to find that trying to do dual product info pages is going to be a little more difficult than you are anticipating because product info pages are tied to product types. that will be what you have to work around..

You are exactly right. When I had first seen his example of using a different product info page, it was very late when I attempted it. After 10 minutes of going nowhere, I realized that I needed to modify more than just the template file. So this is where I decided to use that quick workaround. Alongside the workaround, I also am testing the responsive template to see how the page flow and conversion rates improve for mobile and tablet users. The data for the last 2 years for iOs users has been not to my expectations and I figured this is the time to give those users a better experience.

But I am very familiar with the product files as I had duplicated product types for my friends store. Luckily I keep notes of changes and how to do steps for future reference so I will go back to them after the holidays.

Also, I see that you are the one who updates the TPP mod. I want to thank you for your hard work in maintaining and updating the mod. I have not updated mine yet but looking forward to updating as I see the last 2 now loads the files only on the product pages.

honda2007:

You are exactly right. When I had first seen his example of using a different product info page, it was very late when I attempted it. After 10 minutes of going nowhere, I realized that I needed to modify more than just the template file. So this is where I decided to use that quick workaround. Alongside the workaround, I also am testing the responsive template to see how the page flow and conversion rates improve for mobile and tablet users. The data for the last 2 years for iOs users has been not to my expectations and I figured this is the time to give those users a better experience.

But I am very familiar with the product files as I had duplicated product types for my friends store. Luckily I keep notes of changes and how to do steps for future reference so I will go back to them after the holidays.Let me put this another way.. Creating different product types JUST to support mobile versus desktop views on the product info pages is NOT the right solution.. Think about what you are going to attempt.. Do you intend to create multiple products to support this?? (1 for mobile visitors using the "mobile" product type and another for desktop visitors using the "desktop" product type) Because creating new product types JUST to support mobile versus desktop product info pages is EXACTLY what you would need to do to support this.. Your "quick workaround" is in fact the RIGHT solution..

Now that said IF you really wanted two different product info pages, your code has to work differently than the product info pages now work.. You would need multiple product info pages for the SAME product type.. Personally I would NOT attempt this..

honda2007:

Also, I see that you are the one who updates the TPP mod. I want to thank you for your hard work in maintaining and updating the mod. I have not updated mine yet but looking forward to updating as I see the last 2 now loads the files only on the product pages.Yep which SHOULD improve the site/page load as the TPP files only load when/where needed. Plus the last update supports ALL of the default Zen Cart product types.

honda2007:

You are exactly right. When I had first seen his example of using a different product info page, it was very late when I attempted it. After 10 minutes of going nowhere, I realized that I needed to modify more than just the template file.

Not true at all.

Copy and rename tpl_product_info_display.php as:

tpl_product_info_display_4_phones.php
tpl_product_info_display_4_tablets.php

Now you have:

tpl_product_info_display.php
tpl_product_info_display_4_phones.php
tpl_product_info_display_4_tablets.php

All 3 files will "require" the same module files ect.

Now, find and insert the proper script code for each file

 <!--bof Product description -->
Inserting the TPP code in tpl_product_info_display.php
<!--eof Product description -->

 <!--bof Product description -->
Inserting the Accordian code in tpl_product_info_display_4_tablets.php
<!--eof Product description -->

 <!--bof Product description -->
Inserting the "Toggle" code tpl_product_info_display_4_phones.php
<!--eof Product description -->

Is all that you need to do in those files.

Now to display the correct tpl file, open

/includes/modules/pages/product_info/main_template_vars.php

find:

    $tpl_page_body = '/tpl_product_info_display.php';

and change to:

if ( $detect->isMobile() && !$detect->isTablet() ){
    $tpl_page_body = '/tpl_product_info_display_4_phones.php';
} else if( $detect->isTablet() ){
    $tpl_page_body = '/tpl_product_info_display_4_tablets.php';
} else {
    $tpl_page_body = '/tpl_product_info_display.php';
}

That's it!

The original code returned it was to complicated to switch between css and php using media queries. 2.0 solved this issue in a VERY EASY way, it's now being over complicated.

If you utilize other product types, simply repeat for those product types.

I didn't install these but I did provide an example on this templates dev site:

http://zcadditions[.]com/new_default
Look at the text under the products price