Responsive DIY Template Default for v1.5.x

[yaritai]

Hi rbarbour, instead of posting this in the responsive templates by Anne I decided this was a better place to continue. I have used YOUR code as I see you mentioned that it would be easier for upgrades. Before I was posting my workaround, which I won't anymore, I had no use for switches on my site or sites I do for friends and acquaintances. However, I do have a bigger client whose small business needs is to incorporate a nonresponsive view for those on mobiles. I have gotten the switches working to show accordingly, however it brings me back full circle to my intiial workaround.

Is there any other file in your mod that needs changing? The reason I ask is that the switches do not do what I THINK it suppose to. For example, if I am on a ipad it renders on initial display pulling the tablet.css file. However when I click the switch to non-responsive, it still pulls the tablet.css. I went back and tested it by incorporating all the switches and the tablet.css gets pulled each circumstance whetehr the switch is mobile view, desktop view and etc...

So this is where my confusion is as the code I see you posted overrides the switches in all situations. So this is why I assume when you said "upgrades will be easier" you must of meant that another core change to the 2.1 code has been done but not yet posted as an upgrade? As an aside, this is why I posted my workaround as it does get the display to render correctly but would rather have it done with your code to make future maintanance easier.

[rbarbour]

Hi rbarbour, instead of posting this in the responsive templates by Anne I decided this was a better place to continue. I have used YOUR code as I see you mentioned that it would be easier for upgrades. Before I was posting my workaround, which I won't anymore, I had no use for switches on my site or sites I do for friends and acquaintances.

The Zen Cart Software and all contributions in the Zen Cart Plugins section are open source, therefore can be altered or changed to your specific needs and when the vast majority rules, I then incorporate such changes.

However, I do have a bigger client whose small business needs is to incorporate a nonresponsive view for those on mobiles. I have gotten the switches working to show accordingly, however it brings me back full circle to my intiial workaround.

Is there any other file in your mod that needs changing? The reason I ask is that the switches do not do what I THINK it suppose to. For example, if I am on a ipad it renders on initial display pulling the tablet.css file. However when I click the switch to non-responsive, it still pulls the tablet.css. I went back and tested it by incorporating all the switches and the tablet.css gets pulled each circumstance whetehr the switch is mobile view, desktop view and etc...

My templates have yet to be updated using the php-mobile-detect fixes posted in Anne's support threads and I have yet to incur the same symptoms you are encountering or have yet to hear from anyone else that they are encountering the same symptoms.

The nonResponsive mode should only return the responsive.css file, even in the DEMO without the php-mobile-detect fixes posted in Anne's support threads the code works as intended.

I can only assume the changes to the code you made are a direct result of your outcome.

So this is where my confusion is as the code I see you posted overrides the switches in all situations. So this is why I assume when you said "upgrades will be easier" you must of meant that another core change to the 2.1 code has been done but not yet posted as an upgrade? As an aside, this is why I posted my workaround as it does get the display to render correctly but would rather have it done with your code to make future maintanance easier.

When I said:

Using alternate code will only make future template upgrades that more difficult.

I meant, upgrades of any kind would require additional file merging instead of the simple upload and go approach.

The code posted in Anne's support threads allow the php-mobile-detect code to detect the UA to produce the correct responsive_xxx.css file on initial visit, the switches are $_SESSIONS that produce the correct responsive_xxx.css file based on the UA and $_SESSION.

[yaritai]

Please don't take my posts as a hit against you. That is not my intention. As I stated in the template post, my intention is to make aware to others who are using the switches whether for development purposes or for actual use for the end-customer that they may be wasting valuable develpment time to work out bugs that would not be in the correct files.

I will expand in more detail as the issue can be replicated and is seen on a demo site. This issue can be demonstrated on a live site in Anne's demo. I think it is safe to say that by using Anne's demo site, it will actually make you more comfortable that the coding has been done correct instead of using a demo site I have set up. If you go to Anne's Winchester demo, she has the switches present on the screen. You can tell that the code has been updated to your posts as it now pulls all the correct headers, codes and files.

The issue ONLY happens if you use the switches on a mobile or tablet. This does not happen if using a desktop as the switches will work just as expected. So if you were to land on a page in the winchester using a PHONE, it will pull the responsive_mobile.css. Click any switch to any view and the css will not change but stay static at repsonive_mobile.css. This same thing will happen if landing on a page initially with a TABLET where it will pull a static css of responsive_tablet.css.

Now why it doesn't do this for desktops is because the added code from 2.0 does not filter out desktops as it is the fallback in the if statements. And this fallback does not depend on the sessions set initially which all 3 devices will be blank at that point. But when changing views, it does NOT matter what the session value is as the 2.0 code will override any of the "or" statements as it will return true no matter what session display is set to.

So in the end, I think that most are testing on a desktop which is why no feedback for wrong files being pulled. But you can easily pull the view source on a tablet or mobile or use a agent switch add on. But either way, this issue can be replicated over and over.

Again, please don't take my post as a hit against you but rather trying to help others.

[rbarbour]

Please don't take my posts as a hit against you. That is not my intention. As I stated in the template post, my intention is to make aware to others who are using the switches whether for development purposes or for actual use for the end-customer that they may be wasting valuable develpment time to work out bugs that would not be in the correct files.

I will expand in more detail as the issue can be replicated and is seen on a demo site. This issue can be demonstrated on a live site in Anne's demo. I think it is safe to say that by using Anne's demo site, it will actually make you more comfortable that the coding has been done correct instead of using a demo site I have set up. If you go to Anne's Winchester demo, she has the switches present on the screen. You can tell that the code has been updated to your posts as it now pulls all the correct headers, codes and files.

The issue ONLY happens if you use the switches on a mobile or tablet. This does not happen if using a desktop as the switches will work just as expected. So if you were to land on a page in the winchester using a PHONE, it will pull the responsive_mobile.css. Click any switch to any view and the css will not change but stay static at repsonive_mobile.css. This same thing will happen if landing on a page initially with a TABLET where it will pull a static css of responsive_tablet.css.

Now why it doesn't do this for desktops is because the added code from 2.0 does not filter out desktops as it is the fallback in the if statements. And this fallback does not depend on the sessions set initially which all 3 devices will be blank at that point. But when changing views, it does NOT matter what the session value is as the 2.0 code will override any of the "or" statements as it will return true no matter what session display is set to.

So in the end, I think that most are testing on a desktop which is why no feedback for wrong files being pulled. But you can easily pull the view source on a tablet or mobile or use a agent switch add on. But either way, this issue can be replicated over and over.

Again, please don't take my post as a hit against you but rather trying to help others.

I will reevaluate the php mobile detect code before the release of 2.2

[rbarbour]

Updated version 2.1b uploaded today!

Bug Fix - sql query.
* Does not require a re-install or upgrade.

* Recommended Fix:
See this thread, Post#10

Bug Fix - changed PHP-MOBILE-DETECT if statements to correctly call device specific files.

Update - Uses newest PHP-MOBILE-DETECT version 2.8.2

[simon1066]

If you PM me your email address I will send you the html_header.php I merged

I wonder if it's possible to PM you for your example of the html_header.php?

I'm trying to get the responsive css files minimised as well as being able to load an external jquery file after the css but before the other jscript files - hoping it might give me some ideas.

[Pompidompie]

i'm sorry to walk right in, but i have some beginners questions.

I just began building a webshop with zencart. I also used the template glasgow neat.
I would really like my webshop te work on a mobile foon too.
I downloaded the files mentioned on page 1.
Because i can not find a read-me in the zip, i don't know how to put everything in.

Step 1, copy paste the includes folder.

Step 2, ? do i also copy paste de zadmin folder?

Step 3, what do i do with everything in the INSTALL_DOCS folder?Do i only use the sql's in there? All 4 of them?

[rbarbour]

New Install

1. (RENAME) the YOUR_ADMIN_FOLDER folder to your (actual) admin folder name.

2. (BACKUP) this file. - /YOUR_ADMIN_FOLDER/layout_controller.php

3. (UPLOAD) the includes and admin folder and all it's files.

4. (RUN) the new_install.sql file in Admin > Tools > Install SQL Patches.

5. (Go-To) Admin > Tools > Template Selection.

- (Click) the "edit" button.

- (Select) Responsive Template Default.

- (Click) the "update" button.

6. (Go-To) Admin > Tools > Layout Boxes Controller.

- (Scroll) to the bottom of page.

- (Click) the "reset" button.

You will also notice a new column "Show Box @ Min-Width"

this on/off switch will show/hide side-boxes on Mobile Devices.

7. (Go-To) Admin > Configuration > ZCA Template Switch.

- Here is where you choose which "view" links get displayed on which devices.

- This is also where you can change the "view" links displayed text.

8. (Go-To) Admin > Configuration > Layout Settings.

Here, you will see a new configuration "ACTIVATE Responsive Template", change the value to "1" to activate the responsive code.

9. Happy Designing!

Merging with existing Template

1. (RENAME) the YOUR_ADMIN_FOLDER folder to your (actual) admin folder name.

2. (BACKUP) this file. - /YOUR_ADMIN_FOLDER/layout_controller.php

3. (UPLOAD) the admin folder and all it's files.

4. (RUN) the new_install.sql file in Admin > Tools > Install SQL Patches.

5. (MERGE) the below files with your existing template files, if these files don't exist in your template folders then simply upload these files.

/includes/templates/responsive_template_default/common/
"tpl_box_default_left.php" (2 additions)
"tpl_box_default_right.php" (2 additions)
"tpl_footer.php" (1 edit)
"tpl_header.php" (1 edit, 2 additions)
"tpl_main_page.php" (6 additions)
"html_header.php" (3 additions)

/includes/modules/responsive_template_default/
"column_left.php" (1 edit, 1 addition)
"column_right.php" (1 edit, 1 addition)

6. (UPLOAD) the remaining folders and all their files for they are unique to this package. Renaming responsive_template_default to YOUR_TEMPLATE_NAME

\includes\templates\responsive_template_default\css\ *files*
\includes\auto_loaders\ *files*
\includes\classes\ *files*
\includes\init_includes\ *files*

8. (Go-To) Admin > Configuration > Layout Settings.

Here, you will see a new configuration "ACTIVATE Responsive Template", change the value to "1" to activate the responsive code.

9. With any template, some CSS tweaks will be needed.

10. Happy Designing!

Newest version will hopefully be uploaded by weeks end which includes detailed install instructions, moves "examples" from files and into an examples folder, adds additional CSS support for tables on several pages, better documented files for merging and adding the DIY code.

I wish I could make this easier but nothing worth doing is.

[Pompidompie]

rbarbour thank you.
I am from Holland, so I am a little bit confused of what you mean by

5. (MERGE) the below files with your existing template files, if these files don't exist in your template folders then simply upload these files.

/includes/templates/responsive_template_default/common/
"tpl_box_default_left.php" (2 additions)
"tpl_box_default_right.php" (2 additions)
"tpl_footer.php" (1 edit)
"tpl_header.php" (1 edit, 2 additions)
"tpl_main_page.php" (6 additions)
"html_header.php" (3 additions)

If i click on includes/templates, i have 3 folders in there: classic, glasgowneat and template-default.
Do i understand correctly that i have to take the files out of the responsive/common/ folder and put them in my glasgowneat/common/ folder?

[Pompidompie]

Forget my text above. I have everything in already, but WAUW
It works but....everything I build is gone
Luckely i wasn't that far into it yet, so lets build again