Responsive DIY Template Default for v1.5.x

Alrighty. So I've swapped files out one by one and then I started to rebuild my store again from scratch using the same database and the problem was still there (index/main/home pages on all devices don't call responsive stylesheets). When I start from scratch using a new database, happy day, everything works like it should.

Now my question is is there a relatively simple way to check what in my database is stopping the responsive stylesheets from loading correctly on index/main/home pages, or should I just suck it up and continue rebuilding my whole store and re-enter all the products/options into the database (or is there an easy way to do that)?

Hi
I don't know if you fixed your problem but I just logged in using my iPad and it gave me the message that I must be on a tablet.

lruskauff:

Hi
I don't know if you fixed your problem but I just logged in using my iPad and it gave me the message that I must be on a tablet.

It seems to detect devices just fine. The problem is that my responsive stylesheets (responsive.css and responsive_default.css or whatever platform) don't load into the header on the index/main/home pages on any of the devices.

I'm working on just rebuilding my site from the ground up. It seems like the surest way to get things working without being plagued by the problems that seem to exist in my current site/database (which are probably a result of me just hacking up the core files to get zen cart to perform the way I wanted). I'm not looking forward to re-entering all the products and many options that I have and everything that goes along with doing that, but I've wasted so much time trying to get my site responsive I feel like I could've already done that several times anyway.

I do appreciate input and am open to suggestions...

The DIY Responsive Template Default for 1.5.5 is complete, I will be uploading to GIT today.

Just a few things:

This is New responsive CSS (cleaner and not the same as the responsive_classic) no more responsive.css file.

It uses a NEW Layout Grid of 12 columns for the main layout all ADMIN Controlled.

It uses NEW Columnar Blocks for all columnar output (specials page, center-boxes, additional images, categories), just set your MAX (categories or products) to display via existing admin configurations as normal.

I added CSS to manipulate the product listing page tables only. no selectors have been added to manipulate any content.

It includes a New admin/layout_controller.php file which controls your side-boxes on all devices. CSS hides on desktops and mobile detect disables these side-boxes on tablets and mobile devices.

I added a max-site configuration, this configuration is used to prevent your site from being responsive in the NEW mobile full site version. This feature only work on mobile devices where a UA is detected.

A demo of the DIY Responsive Template Default for 1.5.5

This is the base code for all my future free and commercial templates. It is basic for those of you still wanting to convert your template to a responsive one in v1.5.5.

Keep your eye out for the zca_responsive_default template (commercial), it is a real mobile-first bare-bones template, includes all the above + columnar listing pages, true tap targets, customized mobile-friendly tables, Section Grids with 20+ examples, a global built-4-zen CSS framework which will replace the ZCA Responsive CSS Template Framework (BETA)

Now available on GIT

rbarbour:

The DIY Responsive Template Default for 1.5.5 is complete, I will be uploading to GIT today.

Just a few things:

This is New responsive CSS (cleaner and not the same as the responsive_classic) no more responsive.css file.

It uses a NEW Layout Grid of 12 columns for the main layout all ADMIN Controlled.

It uses NEW Columnar Blocks for all columnar output (specials page, center-boxes, additional images, categories), just set your MAX (categories or products) to display via existing admin configurations as normal.

I added CSS to manipulate the product listing page tables only. no selectors have been added to manipulate any content.

It includes a New admin/layout_controller.php file which controls your side-boxes on all devices. CSS hides on desktops and mobile detect disables these side-boxes on tablets and mobile devices.

I added a max-site configuration, this configuration is used to prevent your site from being responsive in the NEW mobile full site version. This feature only work on mobile devices where a UA is detected.

A demo of the DIY Responsive Template Default for 1.5.5

This is the base code for all my future free and commercial templates. It is basic for those of you still wanting to convert your template to a responsive one in v1.5.5.

Keep your eye out for the zca_responsive_default template (commercial), it is a real mobile-first bare-bones template, includes all the above + columnar listing pages, true tap targets, customized mobile-friendly tables, Section Grids with 20+ examples, a global built-4-zen CSS framework which will replace the ZCA Responsive CSS Template Framework (BETA)

marton_1:

Thanks for the idea

The validator showed up an extra /div - because I have given ids to many of my /divs I can see this one is in TPL_MAIN_PAGE_PHP on line 275.
This seems to be in a good place because here is "* prepares and displays right column sideboxes"

However I checked this PHP and it has 13 divs and 13 /divs so no extra /div. Anyway I tried commenting this /div out but it did not fix my right column problem.
The only change I have made to TPL_MAIN_PAGE_PHP is to add the Google analytics tag at the end

<?php if (GOOGLE_ANALYTICS_TRACKING_TYPE != "Asynchronous") { require(DIR_WS_TEMPLATE . 'google_analytics/google_analytics.php'); } ?>

I ran the validator again with this /div commented out and there were no div errors reported.

Any luck of finding the extra

TamyA:

Any luck of finding the extra

</div>? Mine shows up when i go to the shopping cart.

No, I just got used to "no right column" :smile:

marton_1:

No, I just got used to "no right column" :smile:

Me too.

TamyA:

Me too.

marton_1:

No, I just got used to "no right column" :smile:

Which version are you using?

A URL with the right column on would help one to troubleshoot.

Hello guys,

I'm new to the forum, i wanted to thank you for the opportunity you gave, to turn an existing template into a responsive one.
I am very satisfied with how my website looks on all devices, but i am facing the same problem, on the main page only, the right column sits under the center column, I cannot find where the problem is.

The W3C Validator, as Anne suggested in earlier posts, shows:

"You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">""

start tag was here

but the main tpl_main_page.php file, in which <div class="onerow-fluid "> is, doesn't have any unclosed "div".

Live Website: https://www.epiesedacia.ro
ZC: V 1.5.1
DIY: V 2.1.b
Template: All_business non responsive

Thanks in advance,

TamyA:

Me too.

Adrian Ciocîrlan:

Hello guys,

I'm new to the forum, i wanted to thank you for the opportunity you gave, to turn an existing template into a responsive one.
I am very satisfied with how my website looks on all devices, but i am facing the same problem, on the main page only, the right column sits under the center column, I cannot find where the problem is.

The W3C Validator, as Anne suggested in earlier posts, shows:

"You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">""

start tag was here

<div class="onerow-fluid ">

but the main tpl_main_page.php file, in which <div class="onerow-fluid "> is, doesn't have any unclosed "div".

Live Website: https://www.epiesedacia.ro
ZC: V 1.5.1
DIY: V 2.1.b
Template: All_business non responsive

Thanks in advance,

It looks like its only happening on the home page, disable the tabbed center-boxes and see what happens

Thanks for your quick answer,

If I understood correctly, I did turn the new, featured, specials tabs off from Configuration>Index Listing>Show New Products on Main Page - 0 value to all 4 tabs, nothing happened... the right side boxes show up the same way :(.

Before posting here yesterday, I also disabled all the side-boxes one by one, left/right, until they were all off, just to see if one of them is causing the problem, no success.

A

Adrian Ciocîrlan:

Thanks for your quick answer,

If I understood correctly, I did turn the new, featured, specials tabs off from Configuration>Index Listing>Show New Products on Main Page - 0 value to all 4 tabs, nothing happened... the right side boxes show up the same way :(.

Before posting here yesterday, I also disabled all the side-boxes one by one, left/right, until they were all off, just to see if one of them is causing the problem, no success.

A

in /includes/templates/YOUR_TEMPLATE_FOLDER/common/tpl_main_page.php

take a look right above this section of code:

<?php
//if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' && $_SESSION['customers_authorization'] != 0)) {
if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_right
  $flag_disable_right = true;
}
if (!isset($flag_disable_right) || !$flag_disable_right) {
?>

Make sure their is oly (1) closing </div>

It seems that the code appears in 2 places:

First: on line 224, above it there is no closing </div> - I put one there out of curiosity but nothing happened so i deleted it and left the file as it initially was.

Second:on line 252, above it there is indeed only (1) closing </div> If I put another closing </div> on line 250 the right side-boxes take their place on the home page but they brake on all other pages:

The tpl_main_page.php. is the file provided in the template package.

10x

Adrian Ciocîrlan:

It seems that the code appears in 2 places:

First: on line 224, above it there is no closing </div> - I put one there out of curiosity but nothing happened so i deleted it and left the file as it initially was.

Second:on line 252, above it there is indeed only (1) closing </div> If I put another closing </div> on line 250 the right side-boxes take their place on the home page but they brake on all other pages:

The tpl_main_page.php. is the file provided in the template package.

10x

Something is of either in the slider or the center-boxes. It's not exactly easy to trouble without seeing actual files.

on line 250, re-add the </div> but like so:

<?php if ($this_is_home_page) { ?>
</div>
<?php } ?>

See if the site breaks elsewhere.

rbarbour:

Something is of either in the slider or the center-boxes. It's not exactly easy to trouble without seeing actual files.

on line 250, re-add the </div> but like so:

This did the trick :D thank you so much, I almost lost hope... good luck with your other projects.

P.S. I wanted to ask if the new DIY for 1.5.5 works on earlier versions of zen cart and if does, does it also work on non responsive existing instaled templates.

Have a nice weekend!
A

Adrian Ciocîrlan:

This did the trick :D thank you so much, I almost lost hope... good luck with your other projects.

P.S. I wanted to ask if the new DIY for 1.5.5 works on earlier versions of zen cart and if does, does it also work on non responsive existing instaled templates.

Have a nice weekend!
A

The version available in the plugins will work on 1.5.0-1.5.4 versions of zen cart

The newest version available via the GIT link in my signature WILL NOT work on earlier versions of zen cart, that package is missing key components that are built into the core of zen cart version 1.5.5x.

I offer a zen cart version specific download via my website.

Hello again and thank you,

I figured out where the problem was before you helped with the "if" solution, it was in the home page text in my case <div id="home-text"> not closed, only after I deleted that line the site broke again so i restored the tpl_main_page.php the way it was in the your package and it works. I thought saying this here might help others too.

I also want to ask you if there is a way to focus on the product when navigating with a mobile device, in my case, the site has many categories and subcategories, so every time you go to the next step when purchasing a product you have to scroll down past the header, categories, sub-categories, the left side-box, the module tabs, just to see the next page. It might lead to giving up buying.

Unfortunately I don't know how to implement the mobile style menu though i find it useful in my case, is there a way to collapse expand the categories/sub-categories, or any idea that could help?

Thank you,
Adrian

Adrian Ciocîrlan:

Hello again and thank you,

I figured out where the problem was before you helped with the "if" solution, it was in the home page text in my case <div id="home-text"> not closed, only after I deleted that line the site broke again so i restored the tpl_main_page.php the way it was in the your package and it works. I thought saying this here might help others too.

I also want to ask you if there is a way to focus on the product when navigating with a mobile device, in my case, the site has many categories and subcategories, so every time you go to the next step when purchasing a product you have to scroll down past the header, categories, sub-categories, the left side-box, the module tabs, just to see the next page. It might lead to giving up buying.

Unfortunately I don't know how to implement the mobile style menu though i find it useful in my case, is there a way to collapse expand the categories/sub-categories, or any idea that could help?

Thank you,
Adrian

Hi,
Does anybody have a solution for my "too much scrolling" problem?
10x

Adrian Ciocîrlan:

Hello again and thank you,

I figured out where the problem was before you helped with the "if" solution, it was in the home page text in my case <div id="home-text"> not closed, only after I deleted that line the site broke again so i restored the tpl_main_page.php the way it was in the your package and it works. I thought saying this here might help others too.

I also want to ask you if there is a way to focus on the product when navigating with a mobile device, in my case, the site has many categories and subcategories, so every time you go to the next step when purchasing a product you have to scroll down past the header, categories, sub-categories, the left side-box, the module tabs, just to see the next page. It might lead to giving up buying.

Unfortunately I don't know how to implement the mobile style menu though i find it useful in my case, is there a way to collapse expand the categories/sub-categories, or any idea that could help?

Thank you,
Adrian

Which version of the DIY are you using?

The **version via the download section **includes an admin layout_controller.php file which adds an extra status to the page "Show this Box @ Min-Width" which allows you to hide specific side-boxes on both tablet and mobile devices.

The version via the the GIT link in my signature includes an admin layout_controller.php file which adds 3 extra statuses:

Desktop Status - Uses CSS to Hide Box @ 768px
Tablet Status - Uses PHP to never even load Box on Tablet Devices
Mobile Status - Uses PHP to never even load Box on Mobile Devices

to the page which allows you to hide specific side-boxes for specific devices. Even allows you to display on mobile devices but hide on tablet and desktop.

Without a mobile/tablet navigation menu in place you will want your categories to display, so add a anchor in the categories side-box, when clicked it will scroll to the say "breadcrumbs" right above page contents so the additional scrolling is bypassed.