Forums / Addon Templates / Responsive DIY Template Default for v1.5.x

Responsive DIY Template Default for v1.5.x

Views: 48,346

Results 121 to 140 of 332
28 Dec 2013, 3:19 PM
#121
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Responsive DIY Template Default for v1.5.x

Wouldn't it be LESS coding to put the needed conditional statements in the "tpl_product_info_display.php" file?? One file with the code required to handle ALL viewports??

rbarbour:

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

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

28 Dec 2013, 3:20 PM
#122
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

Re: my post #112

In common/tpl_main_page.php I tried moving

<div class="onerow-fluid">

from line 159 right after

<?php }else{ ?>

and so the mainWrapper includes also the header, and that solves the background-image issue, BUT I noticed it moves the whole thing a bit to the right.

Since I have not yet understood the overlapping stuff, my question is if the edit mentioned can cause problems, or is it ok to leave it like I did?
I am sure there was a reason for you to do it that way, and I don't want to mess it up.

Thank you

28 Dec 2013, 5:24 PM
#123
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

Update

By adding this to responsive_default.css

@media (min-width:1201px){

makes it to the width set instead of expanding to the width of screen.

I also added a right margin of 0.66em to rightBoxContainer to reset the move to the right as per my previous post (#122); it looks fine so far (haven't checked all pages though).

Now I have to work on the header color not changing based on portrait/landscape view, and the font-sizes ... of course if you have a tip, or two, I'll greatly appreciate.

28 Dec 2013, 6:27 PM
#124
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

Wouldn't it be LESS coding to put the needed conditional statements in the "tpl_product_info_display.php" file?? One file with the code required to handle ALL viewports??

Right, exactly what I suggested in post #113

28 Dec 2013, 6:30 PM
#125
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

keneso:

Re: my post #112

In common/tpl_main_page.php I tried moving

<div class="onerow-fluid">

from line 159 right after

<?php }else{ ?>

and so the mainWrapper includes also the header, and that solves the background-image issue, BUT I noticed it moves the whole thing a bit to the right.

Since I have not yet understood the overlapping stuff, my question is if the edit mentioned can cause problems, or is it ok to leave it like I did?
I am sure there was a reason for you to do it that way, and I don't want to mess it up.

Thank you

I wouldn't suggest moving <div class="onerow-fluid">

A quick example of overlapping is explained in post #100

Move your background image to your BODY rules in stylesheet.css

28 Dec 2013, 6:39 PM
#126
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

keneso:

Now I have to work on the header color not changing based on portrait/landscape view, and the font-sizes ... of course if you have a tip, or two, I'll greatly appreciate.

The default code must detect a UA (user agent) for the colors to change. If you are testing on a desktop "you will never see different colors".

I use the FF User Agent Switcher Add-on while on my desktop, not 100% accurate but it's great for designing your tablet and phone views.

28 Dec 2013, 10:35 PM
#127
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

I wouldn't suggest moving <div class="onerow-fluid">

A quick example of overlapping is explained in post #100

Move your background image to your BODY rules in stylesheet.css

But if I set the background image in body it will extend over the left, and right columns - i.e. if I have a 1000px wide site, centered, and a 1200px monitor, I should see two lateral 100px "bands" that are of the body's background color/image, whereas the centered content should have its own background.
Please correct me if I am wrong, or missing something obvious.

I could try slicing my image, and put the upper slice in headerWrapper, and lower one in mainWrapper; I have to try and see the outcome in the different cases; I just thought having mainWrapper would have simplified it, and although you don't have to, I am just curious to know why you removed it, like said you are far more expert, and into it than I could dream of.

rbarbour:

The default code must detect a UA (user agent) for the colors to change. If you are testing on a desktop "you will never see different colors".

I use the FF User Agent Switcher Add-on while on my desktop, not 100% accurate but it's great for designing your tablet and phone views.

I actually am using my phone to see it as I make the changes, so I see the different colors; however thanks for the suggestion, I've installed it, one more tool doesn't hurt.

29 Dec 2013, 12:29 AM
#128
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

keneso:

But if I set the background image in body it will extend over the left, and right columns - i.e. if I have a 1000px wide site, centered, and a 1200px monitor, I should see two lateral 100px "bands" that are of the body's background color/image, whereas the centered content should have its own background.
Please correct me if I am wrong, or missing something obvious.

I could try slicing my image, and put the upper slice in headerWrapper, and lower one in mainWrapper; I have to try and see the outcome in the different cases; I just thought having mainWrapper would have simplified it, and although you don't have to, I am just curious to know why you removed it, like said you are far more expert, and into it than I could dream of.

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #565656;
background-image: url(../images/bg_02.jpg);
background-size: 990px 100%; /* Force the image to its minimum width */
background-position:center top;
background-repeat:no-repeat;
}

PM me your IP

example http://zcadditions[.]com/78/

1 Jan 2014, 1:06 PM
#129
honda2007 avatar

honda2007

New Zenner

Join Date:
Dec 2013
Location:
Long Beach, CA
Posts:
10
Plugin Contributions:
0

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

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

You are absolutely correct as I made a very big mistake while doing it that night as my eyes were just blurry from a long day at work.  As it turned out I rechecked my copies of the main template vars I edited that night and I misplaced my tag BEFORE the display for the tablet view.  And as I reported previously, I figured it was more coding for me to do as my phone was also showing a broken product page.  But the reason for that was because my phone is pulling the tablet view.

But to Diva, the reason I think this may be the most ideal is that now I get to control the layout for those devices specifically where the content for phones can be moved to a better user experience.  Once the layout is set, there is no reason to adjust them after so its not adding any extra work.
1 Jan 2014, 7:33 PM
#130
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

honda2007:

But to Diva, the reason I think this may be the most ideal is that now I get to control the layout for those devices specifically where the content for phones can be moved to a better user experience. Once the layout is set, there is no reason to adjust them after so its not adding any extra work.and this can ALSO be accomplished making these changes to ONE file and using both the mobile detect script and min/max widths in the CSS..

that said not trying to talk anyone in or out of any solution.. I am simply questioning the need to implement something that seems more complicated than it NEEDS to be.. as rbabour also pointed out..

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

1 Jan 2014, 8:07 PM
#131
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

DivaVocals:

and this can ALSO be accomplished making these changes to ONE file and using both the mobile detect script and min/max widths in the CSS..

Do not even need min/max widths, post #113 explained this

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

 <!--bof Product description -->
//Insert Toggle HTML or PHP for Toggle
//Call specific CSS
//Call specific Javascript
//include
//require
<!--eof Product description -->

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

<!--bof Product description -->
//Repeating above for Accordian
<!--eof Product description -->

} else {

<!--bof Product description -->
//Repeating above for TPP
<!--eof Product description -->

}

DivaVocals:

that said not trying to talk anyone in or out of any solution.. I am simply questioning the need to implement something that seems more complicated than it NEEDS to be.. as rbabour also pointed out..

There are several and correct ways of manipulating the desired page view on specific devices, options have been given, the OP now has to implement the option he/she feels suits his/her needs.

This should be looked at as a learning tool, VERY, VERY EASY to now manipulate device specific code.

1 Jan 2014, 9:38 PM
#132
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

Do not even need min/max widths, post #113 explained this

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

<!--bof Product description -->

//Insert Toggle HTML or PHP for Toggle
//Call specific CSS
//Call specific Javascript
//include
//require

<!--eof Product description -->

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

<!--bof Product description -->

//Repeating above for Accordian

<!--eof Product description -->

} else {

<!--bof Product description -->

//Repeating above for TPP

<!--eof Product description -->

}

> **rbarbour:**
>
> There are several and correct ways of manipulating the desired page view on specific devices, options have been given, the OP now has to implement the option he/she feels suits his/her needs.
> 
> This should be looked at as a learning tool, VERY, VERY EASY to now manipulate device specific code.Absolutely.. I was not arguing this at point at all... and like I said I wasn't trying to push any ONE solution.. I was simply questioning pursuing a solution that appears to be overly complicated IMHO.. 'tis all.. The OP is certainly free to choose the solution he feels works best for him..

My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

4 Jan 2014, 7:06 AM
#133
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

1.) In 2.1 I will be including a Responsive/Default Switch which will allow a site visitor to choose the responsive view or the default view template.

DEMO links in navMainWrapper

2.) In 2.1 I will be including a Desktop/Tablet/Mobile Switch which will allow a site visitor on a Desktop to view as Mobile or Tablet, Mobile view as Desktop, Tablet View as Desktop

This site includes most recent php_moble_detect.php class v2.7.6 and Zen Cart BETA v1.5.2

DEMO links in navMainWrapper

Opinions, questions, comments concerns wanted please!

4 Jan 2014, 2:54 PM
#134
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

First thing I noticed is when you go to non-responsive you see both "non-responsive", and "responsive" links, and when you go to "responsive" from there you see no more links.

OT
Will your layout_controller.php work with other templates too, I guess I need to install the sql patch as well in case, right?
FYI I want to test it on the template you know of.
Thank you

4 Jan 2014, 7:45 PM
#135
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

keneso:

First thing I noticed is when you go to non-responsive you see both "non-responsive", and "responsive" links, and when you go to "responsive" from there you see no more links.

Fixed the Responsive/Default Switch DEMO

And after revisiting the Desktop/Tablet/Mobile Switch DEMO I realized I forgot to add the links to navMainWrapper. Fixed Now!

keneso:

OT
Will your layout_controller.php work with other templates too, I guess I need to install the sql patch as well in case, right?
FYI I want to test it on the template you know of.
Thank you

I don't see why not, the side-boxes on the catalog side add/remove class depending on admin config in layout_controller.php

5 Jan 2014, 12:29 PM
#136
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

Fixed the Responsive/Default Switch DEMO

And after revisiting the Desktop/Tablet/Mobile Switch DEMO I realized I forgot to add the links to navMainWrapper. Fixed Now!
Wouldn't it be more practical to have all links together (responsive, non-responsive, desktop, mobile, tablet)?
Also on the mobile, tablet demo, when I go to mobile, or tablet, I can go back only to desktop, wouldn't it be possible to be able to go from mobile to tablet, and from tablet to mobile, w/o passing thru desktop?

rbarbour:

I don't see why not, the side-boxes on the catalog side add/remove class depending on admin config in layout_controller.php

Thanks, just to be sure would you please confirm I have to install the patch as well?

5 Jan 2014, 8:48 PM
#137
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

keneso:

Wouldn't it be more practical to have all links together (responsive, non-responsive, desktop, mobile, tablet)?
Also on the mobile, tablet demo, when I go to mobile, or tablet, I can go back only to desktop, wouldn't it be possible to be able to go from mobile to tablet, and from tablet to mobile, w/o passing thru desktop?

The purpose for the switch is really so mobile or tablet users can view full site version. Not many Desktop users will want to view mobile or tablet site version, MO of course.

This required a bit of work to accomplish and it will include admin options to let the store owner decide which links show on which devices.

keneso:

Thanks, just to be sure would you please confirm I have to install the patch as well?

Yes, you will need to include the ALTER_TABLE layout_boxes patch.

6 Jan 2014, 12:11 PM
#138
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

The purpose for the switch is really so mobile or tablet users can view full site version. Not many Desktop users will want to view mobile or tablet site version, MO of course.

This required a bit of work to accomplish and it will include admin options to let the store owner decide which links show on which devices.

Of course you are right, and I knew/know your choices are motivated; I was looking at it from the perspective of the potential developper to quickly switch from one view to other, although the said developper would need to use other tools like the one you suggested on your post #126
That said, I retire my "objection".

rbarbour:

Yes, you will need to include the ALTER_TABLE layout_boxes patch.

Thanks.

7 Jan 2014, 11:15 PM
#139
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: Responsive DIY Template Default for v1.5.x

I tried to test the template I've been working on, and install this on another test environment, and get this error with the sql patch:
ERROR: Cannot insert configuration_key "" because it already exists
And an upgrade warning
Note: 1 statements ignored. See "upgrade_exceptions" table for additional details.

The layout_boxes_controller page does display the "show bow @ min-width", but the activation in layout_settings does not display, which I guess is the error part.

Any suggestions please?

Thank you.

8 Jan 2014, 2:43 AM
#140
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Responsive DIY Template Default for v1.5.x

rbarbour:

I don't see why not, the side-boxes on the catalog side add/remove class depending on admin config in layout_controller.php

rbarbour:

Yes, you will need to include the ALTER_TABLE layout_boxes patch.

keneso:

I tried to test the template I've been working on, and install this on another test environment, and get this error with the sql patch:
ERROR: Cannot insert configuration_key "" because it already exists
And an upgrade warning
Note: 1 statements ignored. See "upgrade_exceptions" table for additional details.

The layout_boxes_controller page does display the "show bow @ min-width", but the activation in layout_settings does not display, which I guess is the error part.

Any suggestions please?

Thank you.

ERROR indicates you are trying to add a configuration_key that already exists, probably from installing another responsive template using the same framework as this template.

1.) You only need the ALTER_TABLE layout_boxes patch unless already added:

ALTER TABLE layout_boxes ADD show_box_min_width TINYINT( 1 ) NOT NULL DEFAULT '1' AFTER layout_box_status_single;

None of the configuration patches apply.

2.) You only need the layout_controller.php file on the admin side

3.) You need the altered modules/template/column_left.php and column_right.php files on the catalog side, this is where the CSS class is placed.

4.) Then you will need to add the CSS class rule to your stylesheets

this hides the sideboxes
.minWidthHide {display:none;visibility:hidden;}