Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!

mcqueeneycoins:

Hi all, I know I'm not the first person to have this question but having trouble locating the solution so hoping someone can point me in the right direction. I'm wanting the hamburger menu that is default on the mobile and tablet versions of the site to "appear" on the default layout when the screen width hits a certain width (but leave the regular horizontal menu for wider screens). Right now, the sideboxes are hidden to conserve space and it makes navigation difficult without the drop-down menu on the mobile versions.

Using 1.5.7c. Website is www.thecoinauthority.com.

Thanks in advance!
The underlying complexity with your request is the responsive_classic template's use of the Mobile_Detect.php class's detection of the device-type, e.g. iPhone vs iPad, making the request to your site's server. That's what determines whether/not that "hamburger menu" is created.

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

@mcqueenycoins. Somehow, you have managed to turn the responsive_classic mobile settings into a 1920 US Silver Dollar.

Missing in action. I would drop back to the original responsive_classic from your current template, use lat9's Clone a Template to make a copy of responsive_classsic to play with.

IMHO the desktop user is not going to be looking for a hamburger and will be much more likely to appreciate normal desktop navigation.

mcqueeneycoins:

Thanks for the quick reply. I understand the mobile detect element, ...

Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

The best way to "trick" mobiledetect is to tell your browser to simulate mobile. Or if it doesn't have that option (most do), you could try telling it to fake its UserAgent to that of a mobile device.

Or, use a more standards-based template like the Bootstrap 4 template, which naturally adapts to resized windows regardless of what device is in use.

mcqueeneycoins:

Thanks for the quick reply. I understand the mobile detect element, but if I'm viewing on a desktop the mobile detect script doesn't trigger, and as I make the browser window smaller the elements of the desktop site (sideboxes, etc) disappear and the nav menu more difficult to use. Is there a way to "trigger" the mobile version of the website when viewing on a desktop once the browser window reaches a certain width?

Bear in mind that with responsive_classic if you are changing the browser width by squeezing or stretching the window, you have to do a refresh (often via CTRL+R) once you get to the desired width so the screen can be repainted.

A real device doesn't just change its width (unless of course you use a large hammer).

Thanks everyone for the input. Sounds like this may be a little harder than I was envisioning. I have seen it done on other (non zen-cart) sites, so figured it would be a fairly straightforward code change, but guess not! I'll keep playing with the template and see if I can come up with a satisfactory solution. I agree desktop users are not looking for a mobile website version, but do think there are times when there is a need to make a window smaller and just want the "experience" to be seamless as much as possible. In other words, when the browser window is the size of a mobile device, have it look/act like the mobile website, and when it's a normal size, act like the desktop site. Thanks again, and please continue sharing any tips/tricks/opinions I can/should consider.

DrByte:

The best way to "trick" mobiledetect is to tell your browser to simulate mobile. Or if it doesn't have that option (most do), you could try telling it to fake its UserAgent to that of a mobile device.

Or, use a more standards-based template like the** Bootstrap 4 template**, which naturally adapts to resized windows regardless of what device is in use.

mcqueeneycoins:

Thanks everyone for the input. Sounds like this may be a little harder than I was envisioning. I have seen it done on other (non zen-cart) sites, so figured it would be a fairly straightforward code change, but guess not! I'll keep playing with the template and see if I can come up with a satisfactory solution. I agree desktop users are not looking for a mobile website version, but do think there are times when there is a need to make a window smaller and just want the "experience" to be seamless as much as possible. In other words, when the browser window is the size of a mobile device, have it look/act like the mobile website, and when it's a normal size, act like the desktop site. Thanks again, and please continue sharing any tips/tricks/opinions I can/should consider.
Echoing DrByte's response, that template (https://www.zen-cart.com/downloads.php?do=file&id=2191) will provide the functionality that you're looking for.

I added a couple of small images to tpl_header around line 43 under "navMainWrapper" here

<div id="navMainWrapper" class="group onerow-fluid">

They show up fine in desktop view but not in mobile or tablet.

I tried adding an IF statement like below to tpl_header and adding the images under that but just crashed my test site.

if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {

Is there an easy way to achieve my aim of showing on mobile and tablet?

The navMainWrapper is shut off in mobile devices with the responsive#####.css style sheets. You can either her turn them (or portions) back on in the stylesheets or place the imag s outside the wrapper

dbltoe:

The navMainWrapper is shut off in mobile devices with the responsive#####.css style sheets. You can either her turn them (or portions) back on in the stylesheets or place the imag s outside the wrapper

I could fix my problem using CSS, thank you for your help.

First THANK YOU for the lovely responsive_classic template, it's awesome especially the mobile version :)
I have been trying to do a few things with it, I'm not that knowledgeable with php or css, but can follow instructions and even attempt a few things myself on occasions :)

Ok, what I want to do it put a header on the VERY TOP of the website to show up all the time...Something that says:
**"Standard Flat Rate Shipping $9.95 | Shipping Australia Wide" **with a link to my shipping link.

https://imgur.com/UACWbqY (View link)

I have looked everywhere to no avail, I found a post (can't find that post again) suggested by DrByte I think to use the public notice of a website maintenance, which helped but the problem is it shows the ERROR image and adjusting the text and the background colour and size hasn't been easy, no luck. (All I could do was center the text, plus it centered the text on all my website error messages so editing this is probably not good as it will edit all the warning errors at once.)
Can you please advise if there is a better way to achieve the same result? I'm sure there is somewhere.

rlexyd:

First THANK YOU for the lovely responsive_classic template, it's awesome especially the mobile version :)
I have been trying to do a few things with it, I'm not that knowledgeable with php or css, but can follow instructions and even attempt a few things myself on occasions :)

Ok, what I want to do it put a header on the VERY TOP of the website to show up all the time...Something that says:
**"Standard Flat Rate Shipping $9.95 | Shipping Australia Wide" **with a link to my shipping link.

https://imgur.com/UACWbqY (View link)

I have looked everywhere to no avail, I found a post (can't find that post again) suggested by DrByte I think to use the public notice of a website maintenance, which helped but the problem is it shows the ERROR image and adjusting the text and the background colour and size hasn't been easy, no luck. (All I could do was center the text, plus it centered the text on all my website error messages so editing this is probably not good as it will edit all the warning errors at once.)
Can you please advise if there is a better way to achieve the same result? I'm sure there is somewhere.
You could do that with a header-based banner (via the admin's Banner Manager). Although for a different reason, see this GitHub posting (https://github.com/lat9/ZCA-Bootstrap-Template/issues/70#issuecomment-874775344) for additional information.

Thank you for your reply Cindy.

To be honest, I was looking at putting that message either ABOVE of the HOME | LOG IN Header or in the MIDDLE of the HOME | LOG IN Header.

The Github suggestion seems to show the Text under the tagline which is in the logo area, which isn't really what I want.
(p.s I tried it anyway by adding a new banner but it didn't show up anyway, but no matter as it's not really it.)

I hope there is another method to do it like what I am after?!

Thank you once again.

https://docs.zen-cart.com/user/admin_pages/tools/banner_manager/ for banners.

Thank you for sending me the banner link, I read that, it doesn't display a banner on top.
Again, not really much use for me as I want a banner or header to show on TOP on the header home-login top.

rlexyd:

Thank you for sending me the banner link, I read that, it doesn't display a banner on top.
Again, not really much use for me as I want a banner or header to show on TOP on the header home-login top.
See this (https://vinosdefrutastropicales.com/index.php?main_page=article&p=26) article that identifies the built-in Zen Cart banner locations. It sounds like you're "looking for" content in Header Position 1.

Great, that's it. Thank you :)
I finally managed to do it after spending days trying to figure it out, all I had to do was follow what you said.
Now is there a way to get that to display correctly on Mobile view on the Header?! That's where I really would like it to show correctly.
It shows on the Header and Footer on PC browsers, but only shows on footer correctly on my mobile, the banner is half hidden behind the header.
(Please view photo: https://imgur.com/fHJgpLo)

Also, while you are reading this, is there a way (in Mobile device view) to force additional images to display in 2 instead of one as I have they take too much space if I have a few images under each other. I tried to play with mobile css with no luck.
(Please view photo: https://imgur.com/nKpsp5v)

Thank you VERY much once again.

Sorry, I am also getting an error log re: images/display.
(I posted this on another post but realized it's not for the responsive template post.)

[13-Jul-2021 18:31:39 Australia/Sydney] Request URI: /index.php?main_page=product_info&cPath=1&products_id=20, IP address: 101.#1  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]#2  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php:153]
#3  require(/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php:178]
#4  require(/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php) called at [/home2//public_html/.com.au/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_WIDTH - assumed 'LARGE_IMAGE_WIDTH' (this will throw an Error in a future version of PHP) in /home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

[13-Jul-2021 18:31:39 Australia/Sydney] Request URI: /index.php?main_page=product_info&cPath=1&products_id=20, IP address: 101.
#1  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php:58]
#2  require(/home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_product_info_display.php) called at [/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php:153]
#3  require(/home2//public_html/.com.au/includes/modules/pages/product_info/main_template_vars.php) called at [/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php:178]
#4  require(/home2//public_html/.com.au/includes/templates/responsive_classic/common/tpl_main_page.php) called at [/home2//public_html/.com.au/index.php:94]
--> PHP Warning: Use of undefined constant LARGE_IMAGE_HEIGHT - assumed 'LARGE_IMAGE_HEIGHT' (this will throw an Error in a future version of PHP) in /home2//public_html/.com.au/includes/templates/responsive_classic/templates/tpl_modules_main_product_image.php on line 24.

You need to define these values in your configuration. Here's a start - paste this into Admin > Tools > Install SQL Patches

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Large Image Width', 'LARGE_IMAGE_WIDTH', '600', 'The pixel width of large images', '4', '80', now());
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Large Image Height', 'LARGE_IMAGE_HEIGHT', '600', 'The pixel height of large images', '4', '81', now());