ZCA Bootstrap 4 Template [Support Thread]

lat9:

You control the size of images in product listings via Configuration :: Images :: Image - Product Listing Width/Height. The default is 100/80. Perhaps you've got the values set too high?

That did it! I do not remember ever changing that setting! Thank you!

swguy:

What metrics drives the number of displayed columns and why are my images not matching?

Possibly helpful:
https://docs.zen-cart.com//user/template/listing_columns/#fluid-mode-in-bootstrap

When I first looked, I thought "YEA" but I have tweaked this file to see the results. But nothing changes. I want no more than 4 columns for my width setting of 9

      if (!isset($grid_classes_matrix)) {
                // this array is intentionally in reverse order, with largest index first
                $grid_classes_matrix = [
                    '12' => 'row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6',
                    '10' => 'row-cols-1 row-cols-md-2 row-cols-md-3 row-cols-lg-4',
                    '9' => 'row-cols-1 row-cols-md-2 row-cols-md-3 row-cols-lg-4',
                    '8' => 'row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
                    '6' => 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3',
                ];
            }

The way I see it, I should never have more than 4 for these settings right?

g2ktcf:

When I first looked, I thought "YEA" but I have tweaked this file to see the results. But nothing changes. I want no more than 4 columns for my width setting of 9

  if (!isset($grid_classes_matrix)) {
            // this array is intentionally in reverse order, with largest index first
            $grid_classes_matrix = [
                '12' => 'row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6',
                '10' => 'row-cols-1 row-cols-md-2 row-cols-md-3 row-cols-lg-4',
                '9' => 'row-cols-1 row-cols-md-2 row-cols-md-3 row-cols-lg-4',
                '8' => 'row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
                '6' => 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3',
            ];
        }

> 
> The way I see it, I should never have more than 4 for these settings right?

I may have answered my own question.  For some ODD unknown reason, I have TWO bootstrap directories in modules.  After renaming one to _old. I got no changes.  After REVERSING the two, it worked fine.  What would be the expected behavior with this error?  Last one processed? Unknown?

I now have the expected 4 column max, 3 columns for most displays and the proper mobile views.  THANKS!

On mobile devices when the "hamburger" icon is displayed and tapped, the hover background, border, and text color remains after the offcanvas menu is displayed and won't return to normal until another link is tapped. The hover effect on other links goes away when the linked page is displayed. This sticky hover effect occurs on iOS devices using Safari, but might (or might not) occur on other tap devices/operating systems. Is there any way to fix this problem?

Dave
zc158a, ZCA-Bootstrap-Template 3.6.5, php8.2

Dave224:

On mobile devices when the "hamburger" icon is displayed and tapped, the hover background, border, and text color remains after the offcanvas menu is displayed and won't return to normal until another link is tapped. The hover effect on other links goes away when the linked page is displayed. This sticky hover effect occurs on iOS devices using Safari, but might (or might not) occur on other tap devices/operating systems. Is there any way to fix this problem?

Dave
zc158a, ZCA-Bootstrap-Template 3.6.5, php8.2
I'm not sure I understand the issue, Dave. What, exactly, is the "hover background" that displays and won't go away? Are you talking about the overall 'offcanvas menu'?

lat9:

I'm not sure I understand the issue, Dave. What, exactly, is the "hover background" that displays and won't go away? Are you talking about the overall 'offcanvas menu'?

When the hamburger is tapped, the css for a mouse hovering over a link is executed, turning the icon background, border and text to the colors set in the admin bootstrap colors page (dark gray for background and border, lighter gray for text in this case). But the hover colors remain after the offcanvas screen is displayed instead of going back to the non-hover css colors.

See screenshot attached (I hope).

Note: I have tailored the nav menu to add/keep sign in/sign out, memberships and donate, instead of placing them in the offcanvas menu.

Dave

Dave, if the site's publicly accessible, send me a PM with the link so I can "see" for myself, please.

Cindy,

You can see this on Chrome development tools simulating an iPhone or other small device. Click (tap) on the hamburger toggler. The hamburger is displayed in "hover" mode, and the off canvas menu is displayed. The hamburger remains in "hover" mode. If a link on the offcanvas menu or on the nav bar is tapped, the hamburger icon then goes out of hover mode.

It appears to me that some kind of event must occur to indicate that the offcanvas menu display has completed which would then be a trigger to take the hamburger out of hover mode. This may also be associated with mobile devices trying to emulate mouse hovering over a link or button on a tap device. A quick look on the internet for "sticky hover" shows most attempts to fix are trying to disable hover css on small devices, but I don't think this is the right approach here since the hover is only sticky on the hamburger. But I speculate.

Hope this helps.

Dave

What language is the site using and what's that main language file's (e.g. lang.english.php for English) $locales set as?

The setting for the as-distributed English language file is

global $locales;
$locales = ['en_US', 'en_US.utf8', 'en', 'English_United States.1252'];
@setlocale(LC_TIME, $locales);

The site is using English and Dutch.
In lang.dutch.php the $locales are:
```php
global $locales;
$locales = ['nl-NL', 'nl-NL.utf8', 'nl-NL','nl'];
@setlocale(LC_TIME, $locales);

No other problems with translations, only this one in the definition of ```php
'TABLE_HEADING_SPECIALS_INDEX' => 'Monthly Specials For %s',

I temporarily changed the function zca_get_translated_month_name() to always use ```php
$month_name = strftime('%B');

Then the current Month is correctly translated in Dutch.

$zcDate->output('%B');
``` seems to be not using the current $locales at this point? :unsure:

Any idea/solution?

TIA,

jpda

Those Dutch locale definitions should use underscores (_) not hyphens (-):

global $locales;
$locales = ['nl_NL', 'nl_NL.utf8','nl'];
@setlocale(LC_TIME, $locales);  

lat9:

Those Dutch locale definitions should use underscores (_) not hyphens (-):

global $locales;
$locales = ['nl_NL', 'nl_NL.utf8','nl'];
@setlocale(LC_TIME, $locales);

Thanks Cindy,

Changed them back to underscores, no difference, alas. 
Which, BTW, is consistent with the fact that strftime() *does* translate the name of the current month correctly,
just like other date related formats.

I wonder if any other non-English sites have the same problem?

jpda

jpda:

Thanks Cindy,

Changed them back to underscores, no difference, alas.
Which, BTW, is consistent with the fact that strftime() does translate the name of the current month correctly,
just like other date related formats.

I wonder if any other non-English sites have the same problem?

jpda

In addition:

Looking at https://www.php.net/manual/en/migration81.deprecated.php I found:
"strftime() and gmstrftime() have been deprecated. Use date() instead (for locale-independent formatting), or IntlDateFormatter::format() (for locale-dependent formatting)".

jpda

Warning log generated during checkout when using 3.7.0 bootstrap.

[23-May-2024 15:46:10 Europe/London] Request URI: /sales/index.php?main_page=checkout_payment, IP address: 127.0.0.1, Language id 1

#0 /home/lotus/public_html/innerlightcrystals/sales/includes/templates/bootstrap/templates/tpl_checkout_payment_default.php(251): zen_debug_error_handler()

#1 /home/lotus/public_html/innerlightcrystals/sales/includes/templates/bootstrap/common/tpl_main_page.php(227): require('...')

#2 /home/lotus/public_html/innerlightcrystals/sales/index.php(94): require('...')

--> PHP Warning: Undefined variable $comments_heading in /home/lotus/public_html/innerlightcrystals/sales/includes/templates/bootstrap/templates/tpl_checkout_payment_default.php on line 251.

PR submitted. https://github.com/lat9/ZCA-Bootstrap-Template/pull/387
change $comments_heading to ```
HEADING_ORDER_COMMENTS

Cindy - quick question. I am enabling the Terms and Conditions regulations so a customer has to click to agree before they can submit their order.

Right now, if they want to view the terms from the OPC page, it takes them off the checkout page. They have to then click the Back button to return back to the checkout page.

Is there any way that it can launch as an Ajax popup or something in the foreground so that people never have to leave the OPC checkout page? I’m just trying to think of ways to reduce bounce rates of people who leave without completing a purchase.

If not, that’s fine but I wanted to check in case that was already a configuration setting or if it’s something considered as a feature in the future.

Good idea, Jeff. I've created this (https://github.com/lat9/ZCA-Bootstrap-Template/issues/391) GitHub issue to track that update.

lat9:

That mobile-menu you see when you click the hamburger icon is created by the Bootstrap template's /common/tpl_offcanvas_menu.php. I need to think about how to enable the 'easy' sidebox selection (and associated ordering) for those small-screen menus as that'll affect the functionality of the responsive_classic template as well.

I have been thinking about this a good bit while trying to get my site updated to 2.0.X.

There have been discussions about how how ZC looks "out of the box" and its "not a clean" site. One of the things I have noticed on other sites suggested as a "clean design" is the absence of sideboxes. I have turned off all the sideboxes on my local copy but I am not thrilled with the categories in a header menu (we only have two top categories so it looks odd).

Having the hamburger menu on both mobile and fixed displays could be an very workable option. The other "possible" option are collapsible sideboxes similar to https://www.cssscript.com/demo/responsive-side-tab-navigation/

I have NO IDEA the effort it takes to do this. However, I am impressed by the flexibility of bootstrap and I literally think it can become the go to standard for ZC.

Hi Guys I have added in lang.english.php the following code
'HEADING_ORDER_COMMENTS' => 'Special Instructions or Comments About Your Order - Indicate the courier location nearest you from this list <a href="https://cyp.acscourier.net/en/myacs/my-tools/acs-store-locator" target="_blank">Courier Locations</a>',

The issue is that the Courier Locations</a>', spills into the table below(screenshot attached) and is not looking ok. Is any other way to do it?

Georgecy:

Hi Guys I have added in lang.english.php the following code
'HEADING_ORDER_COMMENTS' => 'Special Instructions or Comments About Your Order - Indicate the courier location nearest you from this list <a href="https://cyp.acscourier.net/en/myacs/my-tools/acs-store-locator" target="_blank">Courier Locations</a>',

The issue is that the Courier Locations</a>', spills into the table below(screenshot attached) and is not looking ok. Is any other way to do it?
On what page is that wonky display?

lat9:

On what page is that wonky display?

Thank you Cindy.
In two places index.php?main_page=checkout_shipping and index.php?main_page=checkout_payment

It looks like you have some bad HTML code at ```
Courier Locations</a>">Courier Locations</a>">

Without seeing the site's code, it should probably be```
Courier Locations">Courier Locations</a>