ZCA Bootstrap 4 Template [Support Thread]

Quote:

---

Originally Posted by barco57

ok, testing shows that Ckeditor5 is what is stripping the class off the image tag.
So another thing that Ckeditor 5 causes an issue with

---

Ok, so to workaround this currently I am pasting code directly into the database - it may be slow, but it works.

Another couple of questions:
In the documentation (https://github.com/lat9/ZCA-Bootstra...ecific-styling)
the following code is mentioned:
if ($this_is_home_page) {
?>
<style>
h1 {color: red;}
</style>
<?php
}
This will allow for styling of the home page, is there a list of codes for the various pages? e.g. contact us, ez pages, etc?

I assume this code could also used to load a style sheet for a specific page?
<link href="<?php echo $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/mysite.css'; ?>" rel="stylesheet">

Quote:

---

Originally Posted by royaldave

Not seeing anything, no.

I have reverted to using responsive classic in this setup and its now working as should.

No idea what the issue is - I'm faced with starting over on this upgrade and checking the shopping cart at each step.

---

OK.

Installed fresh copy of 2.0.1. Using demo DB. All is good.
Installed fresh copy of bootstrap. All is good - shopping cart update qty works as it should.
Dropped the demo DB and put a copy of my live DB in there. Upgraded it through zc_install.
Shopping cart update qty now broken!

So something in my DB is causing the issue! What?

Here's the weird thing though - if I get a copy of the recursive classic version of tpl_shopping_cart_default.php and drop it in over the bootstrap one (and remove the isMobile bits so it will run) - the update qty functionality works as it should!

I promise you no other changes have been made.

Any ideas?

Quote:

---

Originally Posted by mikecnz

Ok, so to workaround this currently I am pasting code directly into the database - it may be slow, but it works.

Another couple of questions:
In the documentation (https://github.com/lat9/ZCA-Bootstra...ecific-styling)
the following code is mentioned:
if ($this_is_home_page) {
?>
<style>
h1 {color: red;}
</style>
<?php
}
This will allow for styling of the home page, is there a list of codes for the various pages? e.g. contact us, ez pages, etc?

I assume this code could also used to load a style sheet for a specific page?
<link href="<?php echo $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/mysite.css'; ?>" rel="stylesheet">

---

The various pages can be seen by viewing the names of the sub-directories in /includes/modules/pages. To load a page-specific stylesheet, you can refer to /includes/templates/template_default/css/CSS_read_me.txt, which contains

Code:

---


The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

            style*.css  // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css  // changes to ALL pages, when that language is used
        index_home.css  // specifically affects the home page only
          page_name.css  // changes to one page, ie: index.php?main_page=page_name
 language_page_name.css  // changes to one page, when that language is used
            c_??_??.css  // changes to all info pages in a category
  language_c_??_??.css  // changes to all info pages in a category, when that language is used
  c_??_??_children.css  // changes for all children of the specified parent. Also supports a language prefix.
              m_??.css  // changes to a manufacturer's listing page
      language_m_??.css  // changes to a manufacturer's listing page, when that language is used
              p_??.css  // changes to a product's info page
      language_p_??.css  // changes to a product's info page, when that language is used
            print*.css  // printer-friendly global usage site-wide changes for printing-only
            page##.css  // EZ-Page -- css specific to a numbered EZ-page ... ie:  page21.css would be for EZ-Page number 21 ... ie: for the URL index.php?main_page=page&id=21

The 'stylesheet.css' is expected to load first and should contain the bulk of your CSS selectors. Each file loaded takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties you wish to change should be in the optional CSS files. You can have different overrides for the same page, in different languages, because the two would never be called at the same time.

If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change a 'background-image' for your French customers.

If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you want it in black and the other in red.

Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in Germany, that phrase must be in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible, DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and finally learn about CSS... your site will still be up and running.

Additional information is contained in the Zen Cart documentation.


Adapted from ideas presented by
Juxi Zoza
03/15/05

---

Quote:

---

Originally Posted by royaldave

OK.

Installed fresh copy of 2.0.1. Using demo DB. All is good.
Installed fresh copy of bootstrap. All is good - shopping cart update qty works as it should.
Dropped the demo DB and put a copy of my live DB in there. Upgraded it through zc_install.
Shopping cart update qty now broken!

So something in my DB is causing the issue! What?

Here's the weird thing though - if I get a copy of the recursive classic version of tpl_shopping_cart_default.php and drop it in over the bootstrap one (and remove the isMobile bits so it will run) - the update qty functionality works as it should!

I promise you no other changes have been made.

Any ideas?

---

I'd need a gzipped copy of the database to see for myself; send me a PM with a link, please.

Further to my query above, in regards to id's or classes that already exist in the template but don't appear to have any set styling for example:

h1 id="indexCategories-pageHeading" class="pageHeading" from the home page.

Can I add these to the stylesheet, or should I create and load a new one?

Quote:

---

Originally Posted by mikecnz

Further to my query above, in regards to id's or classes that already exist in the template but don't appear to have any set styling for example:

h1 id="indexCategories-pageHeading" class="pageHeading" from the home page.

Can I add these to the stylesheet, or should I create and load a new one?

---

Your "best" option is to add them to the site_specific_styles.php, within a <style></style> section. That way, you won't overwrite your updates when the base template is updated.

@mikecnz

Quote:

---

if ($this_is_home_page) {
?>
<style>
h1 {color: red;}
</style>
<?php
}
This will allow for styling of the home page, is there a list of codes for the various pages? e.g. contact us, ez pages, etc?

---

See this post: https://www.zen-cart.com/showthread....28#post1391428

jpda

Is there any work underway to update this to use Bootstrap 5.3.3 or is it staying on Bootstrap 4.6.2 for the foreseeable future?

Quote:

---

Originally Posted by strelitzia

Is there any work underway to update this to use Bootstrap 5.3.3 or is it staying on Bootstrap 4.6.2 for the foreseeable future?

---

Planned, but nothing currently underway.

Quote:

---

Originally Posted by lat9

Planned, but nothing currently underway.

---

I have a client wanting BS5 so I may need to look at the conversion then. Perhaps you could set up a BS5 directory in your GitHub repo so I can share any work that I might do.
Would also help to agree on a version number for the change to 5.

Quote:

---

Originally Posted by strelitzia

I have a client wanting BS5 so I may need to look at the conversion then. Perhaps you could set up a BS5 directory in your GitHub repo so I can share any work that I might do.
Would also help to agree on a version number for the change to 5.

---

Just for grins and giggles, let's call it v5.0.0 ... thanks for your assistance.

Hi Cindy,

I've started working on migrating the template from Bootstrap 4 to Bootstrap 5. One significant change in Bootstrap 5 is the removal of the jQuery dependency, which affects how we handle certain components, such as carousels.

Regarding the carousel updates, I wanted to get your input on the approach we should take. There are two options:

Stick with the existing jQuery carousel code: This would involve keeping the current jQuery implementation of the carousel and making necessary adjustments to ensure compatibility with Bootstrap 5. However, this approach would still rely on jQuery, which goes against Bootstrap 5's philosophy of removing the dependency.

Update to use the Bootstrap 5 default carousel: This would involve refactoring the carousel code to utilize the native Bootstrap 5 carousel component, which is built using vanilla JavaScript. This approach aligns with Bootstrap 5's recommended practices and eliminates the need for jQuery.

Considering the long-term maintainability and alignment with Bootstrap 5's principles, which approach do you prefer? Let me know your thoughts, and we can discuss further to determine the best course of action."

Quote:

---

Originally Posted by strelitzia

Hi Cindy,

I've started working on migrating the template from Bootstrap 4 to Bootstrap 5. One significant change in Bootstrap 5 is the removal of the jQuery dependency, which affects how we handle certain components, such as carousels.

Regarding the carousel updates, I wanted to get your input on the approach we should take. There are two options:

Stick with the existing jQuery carousel code: This would involve keeping the current jQuery implementation of the carousel and making necessary adjustments to ensure compatibility with Bootstrap 5. However, this approach would still rely on jQuery, which goes against Bootstrap 5's philosophy of removing the dependency.

Update to use the Bootstrap 5 default carousel: This would involve refactoring the carousel code to utilize the native Bootstrap 5 carousel component, which is built using vanilla JavaScript. This approach aligns with Bootstrap 5's recommended practices and eliminates the need for jQuery.

Considering the long-term maintainability and alignment with Bootstrap 5's principles, which approach do you prefer? Let me know your thoughts, and we can discuss further to determine the best course of action."

---

Using the native Bootstrap 5 for the carousel seems the right path to me. Please note that the template's load of the latest jQuery should be kept, since many other plugins make use of that interface.

Quote:

---

Originally Posted by lat9

Using the native Bootstrap 5 for the carousel seems the right path to me. Please note that the template's load of the latest jQuery should be kept, since many other plugins make use of that interface.

---

Yes, I've noticed this and retained it in the preload.

Quote:

---

Originally Posted by strelitzia

Yes, I've noticed this and retained it in the preload.

---

Great. Note, too, that I've created a v500 branch on the repo: https://github.com/lat9/ZCA-Bootstra...late/tree/v500

v3.7.3 of the ZCA Bootstrap template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes associated with these GitHub issues:

#316: Don't display back-to-top on small/medium devices.
#386: Use the $template class to locate site_specific_styles.php.
#411: Add the zc210 notifier to the account_history_info page's template.
#417: Submitted keywords to AJAX search must be a 'string'.
#419: Display shipping module's error messages in the shipping-estimator.
#421: "Align" with zc210's implementation for the order_status page's template.
#422: Split CSS/JS loading into separate modules; was in common/html_header.php.
#426: ezpages :: page_is_ssl removed in zc210; default always to 'SSL'.
#428: Recognize zc210's mobile-menu settings for EZ-Pages.
#429: Add support for zc210's "Featured Categories" feature.
#432: Correct layout inconsistency between "Notification" and "Manufacturers Info" centerboxes.
#434: Correct background-color bleed-through on various card classes.
#435: Centerbox Background Color applied to containing cards, not the wrapper.

I had the following problems with the bestsellers displayed in the sideboxes:
- In Configuration -> Maximum Values -> Best Sellers for Box I had to put in 11 to display 10 bestseller.
- The number 1 bestseller was never displayed. It started with the second best selling item.

I fixed it by modifying includes/templates/bootstrap/sideboxes/tpl_best_sellers.php.
Line 19

Code:

---

for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {

---

should be

Code:

---

for ($i = 0, $j = count($bestsellers_list); $i<$j; $i++) {

---

Line 22

Code:

---

$i . '. ' .

---

should be

Code:

---

$i+1 . '. ' .

---

Somebody check please.

I forgot to add:
Zen Cart version 1.5.8a
Bootstrap 3.7.0

Quote:

---

Originally Posted by todoonada

I had the following problems with the bestsellers displayed in the sideboxes:
- In Configuration -> Maximum Values -> Best Sellers for Box I had to put in 11 to display 10 bestseller.
- The number 1 bestseller was never displayed. It started with the second best selling item.

...

---

i can confirm the first item, but not the 2nd item; ie if you needed to have 1 more then the max to display that number.

BUT, the #1 best seller was displayed in my setup.

my fix:

Code:

---

//from
for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {
// to
for ($i = 1, $j = count($bestsellers_list); $i<=$j; $i++) {

---

in my setup, your line 22 fix, is not correct.

my $bestsellers_list is an array. and the first array element is 1. if your first array element is 0 (which is possible if you have an override of the bestseller module; and i will note that your version of bootstrap does not); then i can see how your code would be correct.

best.

I do not have an override of the bestseller module.
This code is the original code. I just added the first line (echo $bestsellers_list[0]['name'];) to access the first element in the array, which is position 0.

Code:

---

echo $bestsellers_list[0]['name'];
if ($is_carousel === false) {


    $content = '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="list-group-flush sideBoxContent">' . "\n";


    for ($i = 1, $j = count($bestsellers_list); $i<$j; $i++) {
        $content .=
            '<a class="list-group-item list-group-item-action" href="' . zen_href_link(zen_get_info_page($bestsellers_list[$i]['id']), 'products_id=' . $bestsellers_list[$i]['id']) . '">' .
                $i . '. ' .
                zen_trunc_string($bestsellers_list[$i]['name'], BEST_SELLERS_TRUNCATE, BEST_SELLERS_TRUNCATE_MORE) .
            '</a>';
    }


    $content .= "</div>\n";
    return;
}

---

Result looks like this. The item above the "Bestseller" headline is the best selling item at array position 0.

Attachment 20753

actually you are correct.

i am running a module that is overriding the bestseller list; and is using an older version of the module.

the change did happen in v158a, and specifically this commit:

https://github.com/zencart/zencart/c...980bee4b28f972

the old code was like this:

PHP Code:

---

  $rows = 0;
  while (!$best_sellers->EOF) {
    $rows++;
    $bestsellers_list[$rows]['id'] = $best_sellers->fields['products_id'];
... 


---

the index value being the var $rows, and here, it starts at 1.

the new code is like this:

PHP Code:

---

    $bestsellers_list = [];
    foreach ($best_sellers as $bestseller) {
        $best_products_id = $bestseller['products_id'];
        $bestsellers_list[] = [
            'id' => $best_products_id,
            'name'  => $bestseller['products_name'],
... 


---

with no explicit setting of the index, it will definitely start at 0.

good catch.

as to what is the most eloquent way to address this error, i can not say.

but the commit i referenced above is definitely where this bug got introduced.

Thank for confirming, carlwhat.

ZC 2.0.1
PHP 8.3
Bootstrap 3.7.3

So, I setup a new site and got everything working but for some reason I cannot get it to use the override template files
ZCs Doc page description is fairly stupid proof but it does not work on my site.
**********
Edit includes/languages/english/YOURTEMPLATE/lang.index.php. (Copy includes/languages/english/lang.index.php to includes/languages/english/YOURTEMPLATE/lang.index.php if the override file doesn’t already exist.)
**********
I have done the exact method as described above but for changing the "YOURTEMPLATE" to my own template name "wsworx"
I also did the same thing for the main page logo and it doesn't work either.
The system will not use my override file.
I have the bootstrap template selected in the system
If I inspect the logo element on the main page it shows it using the image from the "template_default" template
I cleared the cache in my browser

Any assistance would be greatly appreciated

I setup the new store in a subfolder as a demo for testing before taking it live
I just realized when I inspect the logo on the main page it is actually being pulled from the default_template of my live site.
I don't understand that as I have the includes/configure.php setup to use the demo site as the catalog

Quote:

---

Originally Posted by wsworx

I setup the new store in a subfolder as a demo for testing before taking it live
I just realized when I inspect the logo on the main page it is actually being pulled from the default_template of my live site.
I don't understand that as I have the includes/configure.php setup to use the demo site as the catalog

---

There are two config files. includes/configure.php and YOURADMIN/includes/configure.php

As to the template being used. If you cloned something to wsworx or created it in some other way, you still need to select it in Tools >> Template Selection

> I just realized when I inspect the logo on the main page it is actually being pulled from the default_template of my live site.

You might have an absolute path reference hardcoded somewhere (perhaps in your template).

Check includes/templates/bootstrap/templates/tpl_header.php in your demo site to see if you changed it to hardcode the logo path?

Quote:

---

Originally Posted by carlwhat

actually you are correct.

i am running a module that is overriding the bestseller list; and is using an older version of the module.

the change did happen in v158a, and specifically this commit:

https://github.com/zencart/zencart/c...980bee4b28f972

the old code was like this:

PHP Code:

---

  $rows = 0;
  while (!$best_sellers->EOF) {
    $rows++;
    $bestsellers_list[$rows]['id'] = $best_sellers->fields['products_id'];
... 


---

the index value being the var $rows, and here, it starts at 1.

the new code is like this:

PHP Code:

---

    $bestsellers_list = [];
    foreach ($best_sellers as $bestseller) {
        $best_products_id = $bestseller['products_id'];
        $bestsellers_list[] = [
            'id' => $best_products_id,
            'name'  => $bestseller['products_name'],
... 


---

with no explicit setting of the index, it will definitely start at 0.

good catch.

as to what is the most eloquent way to address this error, i can not say.

but the commit i referenced above is definitely where this bug got introduced.

---

See this Zen Cart PR for the correction: https://github.com/zencart/zencart/pull/6769

PHP 8.1.2
ZC 2.0.1
ZCA Bootstrap 3.7.3

Right now I'm running parts of the product pages through a screen reader. One of my pages has the following

https://i.imgur.com/DmV5pju.png

Running it through a screen reader, I hear this:

Code:

---

Enhance Commit 1 foundation: Your (image for) High Attack or (image for) Mid Attack attack gets +1 speed and +1 damage.

---

What I wanted to know was, without disabling or changing the IMAGE_ALT_PREFIX define (since it is useful in some cases), is there a way that I can modify the zen_image call to not auto insert the "(image for)" so that a screen reader doesn't insert it?

Quote:

---

Originally Posted by retched

PHP 8.1.2
ZC 2.0.1
ZCA Bootstrap 3.7.3

Right now I'm running parts of the product pages through a screen reader. One of my pages has the following

https://i.imgur.com/DmV5pju.png

Running it through a screen reader, I hear this:

Code:

---

Enhance Commit 1 foundation: Your (image for) High Attack or (image for) Mid Attack attack gets +1 speed and +1 damage.

---

What I wanted to know was, without disabling or changing the IMAGE_ALT_PREFIX define (since it is useful in some cases), is there a way that I can modify the zen_image call to not auto insert the "(image for)" so that a screen reader doesn't insert it?

---

That (image for) text is coming from the base Zen Cart's zen_image function's use of

PHP Code:

---

    'IMAGE_ALT_PREFIX' => '(image for)', 


---

which is set in the default lang.english.php. You could add that definition to your template-override version, simply setting the language-constant's value to an empty string.

v3.7.4 of the ZCA Bootstrap Template is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191

This release contains changes associated with these GitHub issues:

#268: Correct image resizing on column-based products' listings.
#438: "Retire" use of banners_on_ssl field, per zc210 usage.
#439: Update "Matching Heights" jQuery to its most recent version.
#442: Correct quantity-entry "shrink" on column-based products' listings.
#444: Add zc210 notifications to html_header.php and tpl_main_page.php.
#446: "Hide" the ZCA Bootstrap Colors configuration group.
#447: Correct best-sellers' sidebox display (was missing the last item).
#448: Add notifications to tpl_account_history_info.php, primarily for Ty Package Tracker.
#450: Add notification to tpl_footer.php to enable a footer-menu to be included.
#452: Add a 'soft' setting to enable the inclusion of Font Awesome Brands' icons, e.g. Twitter or Facebook.

Is it possible to insert a page background ?

Quote:

---

Originally Posted by windsurfer

Is it possible to insert a page background ?

---

Quite possible; that will require custom CSS. See this GitHub Wiki article for additional information: https://github.com/lat9/ZCA-Bootstra...ecific-styling

Hello all,

i am facing another issue with my ZC 2.0.1 update.

I have Bootstrap template with OPC and Image Handler.

When going to my product listings under categories, the product image ##do not get reseize on mobile and they overlap each other.

For example https://www.royal-fleur.com/thanksgi...d-centerpieces

Each picture on mobile size is displayed at 400 x 400 and obviously overlap each other.

How can i fix this please?

Thank you in advance for your help

Quote:

---

Originally Posted by nicksab

Hello all,

i am facing another issue with my ZC 2.0.1 update.

I have Bootstrap template with OPC and Image Handler.

When going to my product listings under categories, the product image ##do not get reseize on mobile and they overlap each other.

For example https://www.royal-fleur.com/thanksgi...d-centerpieces

Each picture on mobile size is displayed at 400 x 400 and obviously overlap each other.

How can i fix this please?

Thank you in advance for your help

---

Not sure if it is the proper way to go about my issue but it seems to be an issue with .listingProductImage in stylesheet_zca_colors.php.

at line 371 i changed

Code:

---

.listingProductImage {
    min-width: <?= (int)IMAGE_PRODUCT_LISTING_WIDTH ?>px;

---

to

Code:

---

.listingProductImage {
    min-width: auto;

---

It seems to have resolve the product picture issue

Can someone confirm if it would create some issue somewhere else?

thank you

Quote:

---

Originally Posted by nicksab

Hello all,

i am facing another issue with my ZC 2.0.1 update.

I have Bootstrap template with OPC and Image Handler.

When going to my product listings under categories, the product image ##do not get reseize on mobile and they overlap each other.

For example https://www.royal-fleur.com/thanksgi...d-centerpieces

Each picture on mobile size is displayed at 400 x 400 and obviously overlap each other.

How can i fix this please?

Thank you in advance for your help

---

FWIW, i am not seeing the problem on your website.

that said, this sounds like a problem that was recently addressed.

i would review this github issue on bootstrap. and i would then review the correction made, which was part of bootstrap 3.7.4.

but i'm not sure whether your css is cached on your computer, as i am not seeing the problem on your site.

Quote:

---

Originally Posted by carlwhat

FWIW, i am not seeing the problem on your website.

that said, this sounds like a problem that was recently addressed.

i would review this github issue on bootstrap. and i would then review the correction made, which was part of bootstrap 3.7.4.

but i'm not sure whether your css is cached on your computer, as i am not seeing the problem on your site.

---

Thanks Carl.

I did a change to my css to temporarily fix the layout since it is a live site.

My bootstrap version is 3.7.1 and will do the update. Thanks for providing the link

I am getting the following log:

ZC 2.0.1
Bootstrap 3.7.1 with OPC

Code:

---

[12-Nov-2024 23:20:19 UTC] PHP Fatal error: Uncaught Error: Undefined constant "TEXT_LOOKUP_INSTRUCTIONS" in /includes/templates/royal_fleur/templates/tpl_order_status_default.php:184
Stack trace:
#0 /includes/templates/royal_fleur/common/tpl_main_page.php(238): require()
#1 /index.php(94): require('/home/zch1akhw6...')
#2 {main}
thrown in /includes/templates/royal_fleur/templates/tpl_order_status_default.php on line 184

---

I tried the suggested fix below but no luck. I copied includes/languages/english/lang.order_status.php to my template

I am still getting the log and my order status page is pretty much blank

Quote:

---

Originally Posted by lat9

Actually, that looks like a bug in the zc158 language loader. I thought (keyword) that deference should be given to a legacy-named language file, although I'm seeing now that OPC (since the order_status page was, for previous Zen Cart versions, newly added) distributes its version of /english/order_status.php in the main language directory. Sigh.

To correct, for now, simply copy /includes/languages/english/order_status.php to /includes/languages/english/bootstrap/order_status.php (replacing bootstrap with your template clone's name).

---

How can i fix it please?

Thank you

The One Page Checkout (OPC) distribution provides /includes/languages/english/YOUR_TEMPLATE/lang.order_status.php. Copy that file to /includes/languages/english/royal_fleur.

How would one take the quick reorder sidebox and get a link to it to show in the mobile menu versus disappearing on smaller sized screens.

Or even better have it show as a homepage centerbox once logged into the system

Or some other method to quick reorder products on mobile v surfing around.

Dont really see a searchable solution on this but a customer said it would be much easier to fill their cart like this and search for items not on the reorder list aka takes less time

Quote:

---

Originally Posted by JimmyV

How would one take the quick reorder sidebox and get a link to it to show in the mobile menu versus disappearing on smaller sized screens.

Or even better have it show as a homepage centerbox once logged into the system

Or some other method to quick reorder products on mobile v surfing around.

Dont really see a searchable solution on this but a customer said it would be much easier to fill their cart like this and search for items not on the reorder list aka takes less time

---

That'll require a site-specific edit to the site's (presumed) copy of the template's /includes/templates/bootstrap-copy/common/tpl_offcanvas_menu.php to add that content.

Thanks I didn't even look at that file so that could be helpful !

FYI if anyone wants to have a centerbox on login that shows their recently ordered items list that can be added to their cart instantly you can just add the sidebox code in sequence with mods desired into tpl_index_default and it will be shown or not depending on login status. Status of sidebox doesn't matter. What's most important is it doesn't impact the homepage for unique visitors as it's not visible to them.

Is there a way to have a sidebox show in mobile view?
In this particular case I'm trying to have a sidebox as a banner linking to my blog showing my holiday hours.
Using wide-banners instead isn't a great option either as the banner becomes unreadable in mobile view.

Seems strange to me that so much info that is available in pc view is deemed unnecessary in mobile views (ie currency/language selection).

Quote:

---

Originally Posted by gsh68

Is there a way to have a sidebox show in mobile view?
In this particular case I'm trying to have a sidebox as a banner linking to my blog showing my holiday hours.
Using wide-banners instead isn't a great option either as the banner becomes unreadable in mobile view.

Seems strange to me that so much info that is available in pc view is deemed unnecessary in mobile views (ie currency/language selection).

---

You can add the sidebox link to your site's bootstrap template's /common/tpl_offcanvas_menu.php.

Hello! I just recently had version 2.0.1 installed. What code do I need to add to the stylesheet.css to remove the underlines for links? I tried adding the following but nothing changed:

a:hover {
text-decoration: none; }
}
a:active {
text-decoration: none;
}

Another question where can I alter mobile format from 1 to 2 columns to whatever above 700px so every last few years galaxy and iphone go here given they all have larger screens than when this template was created originally and then below that can be 1 column if you own a 10= year old phone and so forth as it already is for tablets and desktop? Above 992 would be the set in cofig number and so forth. AMazon does 3 column now works fine.

However if this is done then fonts need to shrink as well esp H1 which is set at 2.5rem for some reason

On mobile:

I would like to get the product listing image to be "bigger".

If you look at my site www.royal-fleur.com on mobile, the product image displayed in centerboxes ( featured,specials...) are around 140px x 140 px for example.
However, the product listing image in categories are displayed at 110 px x 110 px.

I feel like there is a lot space between the actual image and the product card border. How can i reducedit so the images are slightly bigger.

I find

Code:

---

.p-3 {
    padding: 1rem !important;
}

---

but it is general and applies to other element in the page.

Any way to achieve it with out messing around the whole layout?

hope it makes sense. Thank you

Note: product listing image via admin control won't help. If too big, the images overlap on mobile.

How is it possible to have the productDescription text fill the full width of the page? See image. Still keeping the Add to Cart, Price and Model fields.

Attachment 20803

https://github.com/lat9/ZCA-Bootstra...ate/issues/273

It's probably not the right way to do this, but I added:

.productDescription {width:210%}

in includes/templates/bootstrap/css/stylesheet.css

and so far it seems to work.

I used to use the Image Handler plugin which displayed the images like this:

Attachment 20804

Additional images displayed underneath the main image. Unfortunately this plugin is not compatible with zen cart 2.1.0.
Can something similar be made with Bootstrap? or zen cart 2.1.0 in general? How are images and additional images handled? and to which directory do I upload additional images?

I found it in the stylesheet_364.css file and changed underline to none.

Quote:

---

Originally Posted by DML73

I used to use the Image Handler plugin which displayed the images like this:

Attachment 20804

Additional images displayed underneath the main image. Unfortunately this plugin is not compatible with zen cart 2.1.0.
Can something similar be made with Bootstrap? or zen cart 2.1.0 in general? How are images and additional images handled? and to which directory do I upload additional images?

---

There's a Bootstrap Configuration setting (Use Bootstrap Additional Image Carousel), which comes close. There's an "Additional Images" button which displays a modal popup carousel of images when clicked.

Thanks, I got that enabled now. Am I correct that there is no option to show the small additional images below the main image, instead of the 'Additional images' button?

Is there a setting for making the top navigation bar same width as the rest of the page?
Header Container Type, Main Content Container Type and Footer Container Type in Bootstrap Template Settings is set to 'container'.

Also, is there a setting to make the width of the whole 'container' a bit wider? (red arrow in image below)

Attachment 20805

Quote:

---

Originally Posted by DML73

Is there a setting for making the top navigation bar same width as the rest of the page?
Header Container Type, Main Content Container Type and Footer Container Type in Bootstrap Template Settings is set to 'container'.

Also, is there a setting to make the width of the whole 'container' a bit wider? (red arrow in image below)

Attachment 20805

---

Top navigation bar, hmm. A CSS setting for that doesn't currently 'pop out' at me.

For the "whole container" width, that would result in the overrides of various CSS media queries at the Bootstrap 4 breakpoints, similar to:

Code:

---

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

---

Those breakpoints and the associated default max-widths are

576px ..... 540px
768px ..... 720px
992px ..... 960px
1200px ... 1140px

P.S. Be sure to make this and other styling changes in the /css/site_specific_styles.php (rename or copy the dist.site_specific_styles.php). That'll make sure that your styling customizations survive a template upgrade more easily.

Quote:

---

Originally Posted by DML73

Thanks, I got that enabled now. Am I correct that there is no option to show the small additional images below the main image, instead of the 'Additional images' button?

---

You're correct; that'd be custom code.

Quote:

---

Originally Posted by lat9

You're correct; that'd be custom code.

---

For the additional images carousel, is it possible to change the left / right arrow?

They are barely visible in my situation. Maybe something like a white square with black chevron?

here is an example https://www.royal-fleur.com/christma...as-centerpiece

Also can the speed of the slide be increase or reduce.

Thank you

Perhaps try to add the following CSS to your stylesheet:

Code:

---

/* Change the color of Font Awesome chevron arrows */
.carousel-control-next i,
.carousel-control-prev i {
    color: #FFD700;
}

---

That would change the color to Yellow, but you can adjust the hex value to whatever desired color works best for you.

Quote:

---

Originally Posted by Jeff_Mash

Perhaps try to add the following CSS to your stylesheet:

Code:

---

/* Change the color of Font Awesome chevron arrows */
.carousel-control-next i,
.carousel-control-prev i {
    color: #FFD700;
}

---

That would change the color to Yellow, but you can adjust the hex value to whatever desired color works best for you.

---

thank you

Quote:

---

Originally Posted by Jeff_Mash

Perhaps try to add the following CSS to your stylesheet:

Code:

---

/* Change the color of Font Awesome chevron arrows */
.carousel-control-next i,
.carousel-control-prev i {
    color: #FFD700;
}

---

That would change the color to Yellow, but you can adjust the hex value to whatever desired color works best for you.

---

I gave it a shot but somehow it being overwritten by another "file" named <style>

Quote:

---

Originally Posted by nicksab

I gave it a shot but somehow it being overwritten by another "file" named <style>

---

Create (if not already present) a file in the template's /css directory named site_specific_styles.php. That CSS is loaded as the very last bit of styling, so adding the changes you want to have precedence ... will.

@nicksab

Just a reminder that the site_specific_styles.php file should have the following as a minimum:

Code:

---

<?php ?>
<style>
  /* Your content here ... */
</style>

---

Replace everything in red with your css code. With lat9's suggestion, it would look like:

Code:

---

<?php
?>
<style>
  .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700;
}
</style>

---

Quote:

---

Originally Posted by dbltoe

@nicksab

Just a reminder that the site_specific_styles.php file should have the following as a minimum:

Code:

---

<?php ?>
<style>
  /* Your content here ... */
</style>

---

Replace everything in red with your css code. With lat9's suggestion, it would look like:

Code:

---

<?php
?>
<style>
  .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700;
}
</style>

---

---

ok thank you.

Quote:

---

Originally Posted by dbltoe

@nicksab

Just a reminder that the site_specific_styles.php file should have the following as a minimum:

Code:

---

<?php ?>
<style>
  /* Your content here ... */
</style>

---

Replace everything in red with your css code. With lat9's suggestion, it would look like:

Code:

---

<?php
?>
<style>
  .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700;
}
</style>

---

---

umm I tried the following in site_specific_styles.php

Code:

---

<?php
/*
 * BOOTSTRAP 3.6.4
 *
 * Create a file called "site_specific_styles.php" to contain any changes
 * to base css provided by this template. Place site-specific content
 * between the opening and closing style tags.
 *
 * Refer to https://github.com/lat9/ZCA-Bootstrap-Template/wiki/Frequently-Asked-Questions#applying-site-specific-styling
 * for additional information.
 */
?>
<style>
  .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700;
}
</style>

---

Nothing happened and when I look at the page source, the file is not being loaded with the rest of the stylesheets.

What am I missing? site is at royal-fleur dot com for reference

thank you

I also try renaming it to royal_specific_styles.php but same results

That looks correct but I have no way of knowing if the provided CSS was correct.

If folks would follow the Posting Tips better, we can provide better help. They're there for a reason.

In this case, knowing the URL could help me see if the provided rule would actually work.

Quote:

---

Originally Posted by nicksab

I also try renaming it to royal_specific_styles.php but same results

---

this will not work.

Quote:

---

Originally Posted by nicksab

umm I tried the following in site_specific_styles.php

Code:

---

<?php
/*
 * BOOTSTRAP 3.6.4
 *
 * Create a file called "site_specific_styles.php" to contain any changes
 * to base css provided by this template. Place site-specific content
 * between the opening and closing style tags.
 *
 * Refer to https://github.com/lat9/ZCA-Bootstrap-Template/wiki/Frequently-Asked-Questions#applying-site-specific-styling
 * for additional information.
 */
?>
<style>
  .carousel-control-next i, .carousel-control-prev i {
    color: #FFD700;
}
</style>

---

Nothing happened and when I look at the page source, the file is not being loaded with the rest of the stylesheets.

What am I missing? site is at royal-fleur dot com for reference

thank you

---

assuming your royal_fleur template is a clone of bootstrip the file should be here:

https://www.royal-fleur.com/includes...fic_styles.php

but alas it is not. so if you are putting that file in the correct position, then it is a permissions issue. as i am not seeing the file there, then it is one of those things: wrong position or wrong permissions.

if you solve that and it is still not working, i would examine this section of code to ensure you have it in your template:

best.

Quote:

---

Originally Posted by carlwhat

this will not work.



assuming your royal_fleur template is a clone of bootstrip the file should be here:

https://www.royal-fleur.com/includes...fic_styles.php

but alas it is not. so if you are putting that file in the correct position, then it is a permissions issue. as i am not seeing the file there, then it is one of those things: wrong position or wrong permissions.

if you solve that and it is still not working, i would examine this section of code to ensure you have it in your template:

best.

---

thank you.

my apologies to all. I thought I was suppose to rename the file dist-site_specific_styles.php . Woops.

I made the changes in site_specific_styles.php afret remove "dist-" from the file name and added to my templates css file.

It seems working now ( after clearing my cache for the hundreds time)

Thanks again

In tpl_product_info_display.php I see the if

$display_price_top === true
$display_price_bottom === true

On the product page I see the latter one (inspecting the page I see id="productsPriceBottom-productPriceBottomPrice" class="productPriceBottomPrice")

I suppose there is a setting somewhere for it, but can't find it, what am I missing?

I can edit the template file to my likes, just curious to understand the functioning of it.

Quote:

---

Originally Posted by keneso

In tpl_product_info_display.php I see the if

$display_price_top === true
$display_price_bottom === true

On the product page I see the latter one (inspecting the page I see id="productsPriceBottom-productPriceBottomPrice" class="productPriceBottomPrice")

I suppose there is a setting somewhere for it, but can't find it, what am I missing?

I can edit the template file to my likes, just curious to understand the functioning of it.

---

See Configuration / Bootstrap Template Settings / Product Info Pricing Location. It can be one of Both, Above Only or Below Only.

Quote:

---

Originally Posted by lat9

See Configuration / Bootstrap Template Settings / Product Info Pricing Location. It can be one of Both, Above Only or Below Only.

---

Speechless!
You wouldn't believe how many times I looked there, and managed to miss it.

I am aware it is a wierd suggestion/request, but would you consider adding the option of disabling both; like said I can edit the template file, so no big deal, just a thought.

Quote:

---

Originally Posted by keneso

Speechless!
You wouldn't believe how many times I looked there, and managed to miss it.

I am aware it is a wierd suggestion/request, but would you consider adding the option of disabling both; like said I can edit the template file, so no big deal, just a thought.

---

You can set that setting to be Below Only and then add the following to your site_specific_styles.php

Code:

---

#productsPriceBottom-card {display: none;}

---

Yes, done it already.

Questions in regards to the banner carousel (mostly on the index page)

What changes would be needed in order to "lazy" load the banner image?

Disregards my question if the images are already lazy or defer loaded. I just didn't see any reference to it

Thank you

Not convinced this issue is template related as it is occurring across the default templates as well, but I'm experiencing issues getting the medium and large product images to display. I have uploaded images for product A as follows:

/images/products/categoryA/productA.png
/images/products/categoryA/productA_01.png
/images/medium/products/categoryA/productA_MED.png
/images/large/products/categoryA/productA_LRG.png
/images/large/products/categoryA/productA_01_LRG.png

The original product image and additional image displays properly on the product info page (but only at the smaller size). It does not appear to be loading the medium or large images. Any ideas on what I might be doing wrong? I do not have any image plugins installed, and using the bootstrap template with modal images. Confirmed the suffix for _MED and _LRG matches the config settings in admin.

Thanks in advance!

Quote:

---

Originally Posted by mcqueeneycoins

Not convinced this issue is template related as it is occurring across the default templates as well, but I'm experiencing issues getting the medium and large product images to display. I have uploaded images for product A as follows:

/images/products/categoryA/productA.png
/images/products/categoryA/productA_01.png
/images/medium/products/categoryA/productA_MED.png
/images/large/products/categoryA/productA_LRG.png
/images/large/products/categoryA/productA_01_LRG.png

The original product image and additional image displays properly on the product info page (but only at the smaller size). It does not appear to be loading the medium or large images. Any ideas on what I might be doing wrong? I do not have any image plugins installed, and using the bootstrap template with modal images. Confirmed the suffix for _MED and _LRG matches the config settings in admin.

Thanks in advance!

---

If it's happening with the default templates as well, it's a base Zen Cart issue.

Quote:

---

Originally Posted by lat9

If it's happening with the default templates as well, it's a base Zen Cart issue.

---

I narrowed down the issue to the folder structure. When I upload the images via admin product page, there is no subfolder dropdown to select so I was manually adding the path for the image (../images/products/categoryA/filename.png. That works, which is why the main image loaded, but the med and lrg files didn't. I think zencart was looking for the file path I entered as a subdirectory and/or was causing it to look in the wrong place. I ended up just moving everything to a single subfolder (rather than the multi-level) structure I had, and everything working well so far. If you have suggestions on how to add the extra sub-level without messing up the MED and LRG paths I'd still love to solve the problem.

Quote:

---

Originally Posted by mcqueeneycoins

I narrowed down the issue to the folder structure. When I upload the images via admin product page, there is no subfolder dropdown to select so I was manually adding the path for the image (../images/products/categoryA/filename.png. That works, which is why the main image loaded, but the med and lrg files didn't. I think zencart was looking for the file path I entered as a subdirectory and/or was causing it to look in the wrong place. I ended up just moving everything to a single subfolder (rather than the multi-level) structure I had, and everything working well so far. If you have suggestions on how to add the extra sub-level without messing up the MED and LRG paths I'd still love to solve the problem.

---

Thanks for the update. The base (and most templates') code is expecting the images to be in the /images directory.

If you're hand-entering the name of the image, you'd enter it as products/categoryA/filename.png

Zen Cart 2.0.1
PHP 8.3.14
Bootstrap 3.7.2-beta5
No other plugins

The listingDisplayOrderSorter with recommended, product name etc is only configurable via a file edit? Just making sure, I found no admin side config for it.

~Melanie

Quote:

---

Originally Posted by mprough

Zen Cart 2.0.1
PHP 8.3.14
Bootstrap 3.7.2-beta5
No other plugins

The listingDisplayOrderSorter with recommended, product name etc is only configurable via a file edit? Just making sure, I found no admin side config for it.

~Melanie

---

While that sorter has no control of its own, it's only displayed if one (or both) of Product Listing / Display Category Manufacturer Filter (PRODUCT_LIST_FILTER) or Product Listing / Include Product Listing Alpha Sorter Dropdown (PRODUCT_LIST_ALPHA_SORTER) are enabled.

Quote:

---

Originally Posted by lat9

While that sorter has no control of its own, it's only displayed if one (or both) of Product Listing / Display Category Manufacturer Filter (PRODUCT_LIST_FILTER) or Product Listing / Include Product Listing Alpha Sorter Dropdown (PRODUCT_LIST_ALPHA_SORTER) are enabled.

---

Disabling Product Listing / Display Category Manufacturer Filter (PRODUCT_LIST_FILTER) made it go away ONLY on product listing
Product Listing / Include Product Listing Alpha Sorter Dropdown (PRODUCT_LIST_ALPHA_SORTER) is also already disabled

But the sorter still displays on products_new, featured_products & products_all but NOT on specials.... weird.

So instead I disabled the price options in the product listing in tpl_modules_listing_display_order.php by commenting them out. However, the (products_new, featured_products & products_all) sorters still displaying have the price options included.... where is it coming from?

In fact I fully deleted the contents of includes/templates/bootstrap/templates/tpl_modules_listing_display_order.php and still on (products_new, featured_products & products_all) the sorter shows.

~Melanie

If you temporarily change the site's template to responsive_classic, does the same behavior occur?

*resolved*

I modified the zcabootstrapobserver.php to turn the Sold Out button into a link to the product info page. The code I have below seems to work fine on the product listing pages, but I get the following log error when on the search results page (even though the link itself still works):

Code:

---

--> PHP Warning: Undefined array key "cPath" in /includes/classes/observers/ZcaBootstrapObserver.php on line 316.

---

Here is what I have in the observer file:

Code:

---

                } else {
                    $sold_out_button_class = 'button_sold_out_sm';
                    $sold_out_button_name = BUTTON_SOLD_OUT_SMALL_ALT;
                                        $sold_out_button_link = zen_href_link(zen_get_info_page($p1['products_id']), 'cPath=' . $_GET['cPath'] . '&products_id=' . $p1['products_id'], 'SSL');
                }

                $p2 = zca_button_link($sold_out_button_link, $sold_out_button_name, 'button_sold_out');
                break;

---

I'm sure I've just done something wrong, but can someone help me so that the link works on any page where the Sold Out button might show?

you can try something like:

PHP Code:

---

//from
$sold_out_button_link = zen_href_link(zen_get_info_page($p1['products_id']), 'cPath=' . $_GET['cPath'] . '&products_id=' . $p1['products_id'], 'SSL');
//to
$sold_out_button_link = zen_href_link(zen_get_info_page($p1['products_id']), (isset($_GET['cPath']) ? 'cPath=' . $_GET['cPath'] : '') . '&products_id=' . $p1['products_id'], 'SSL'); 


---

best.

Quote:

---

Originally Posted by lat9

If you temporarily change the site's template to responsive_classic, does the same behavior occur?

---

It's live. I was able to remove the options for $$, but not the dropdown.

Quote:

---

Originally Posted by carlwhat

you can try something like:

PHP Code:

---

//from
$sold_out_button_link = zen_href_link(zen_get_info_page($p1['products_id']), 'cPath=' . $_GET['cPath'] . '&products_id=' . $p1['products_id'], 'SSL');
//to
$sold_out_button_link = zen_href_link(zen_get_info_page($p1['products_id']), (isset($_GET['cPath']) ? 'cPath=' . $_GET['cPath'] : '') . '&products_id=' . $p1['products_id'], 'SSL'); 


---

best.

---

Thank you @carlwhat!

Is it possible to enable a navigation header-bar? Or is such a plugin available?

Quote:

---

Originally Posted by DML73

Is it possible to enable a navigation header-bar? Or is such a plugin available?

---

Like a 'mega-menu'? I've done that for other sites, but don't have the code as a plugin.

ZC 2.1.0
PHP 3.2
Using version 3.7.4 of this template

Everything appears to work however I am getting the following error logs:


[03-Jan-2025 13:39:22 UTC] Request URI: /index.php?main_page=product_info&products_id=1990, IP address: xx.xxx.xx.xxx, Language id 1
#0 /includes/modules/pages/product_info/main_template_vars.php(66): zen_debug_error_handler()
#1 /includes/templates/bootstrap/common/tpl_main_page.php(233): require('/home/customer/...')
#2 /index.php(94): require('/home/customer/...')
--> PHP Warning: Undefined array key "lang" in /includes/modules/pages/product_info/main_template_vars.php on line 66.

Thank you

Quote:

---

Originally Posted by n8pbm

ZC 2.1.0
PHP 3.2
Using version 3.7.4 of this template

Everything appears to work however I am getting the following error logs:


[03-Jan-2025 13:39:22 UTC] Request URI: /index.php?main_page=product_info&products_id=1990, IP address: xx.xxx.xx.xxx, Language id 1
#0 /includes/modules/pages/product_info/main_template_vars.php(66): zen_debug_error_handler()
#1 /includes/templates/bootstrap/common/tpl_main_page.php(233): require('/home/customer/...')
#2 /index.php(94): require('/home/customer/...')
--> PHP Warning: Undefined array key "lang" in /includes/modules/pages/product_info/main_template_vars.php on line 66.

Thank you

---

What additional plugins/add-ons are present on the site? What sideboxes are enabled?

Plugins installed

Braintree Credit card (Old Version and does generate depreciation logs)
Ty package Tracker
Export Shipping and Order Information II
DBIo
Order comments Boilerplate

Sideboxes are:
category
EZ Pages
Bootstrap/Information

I know the Braintree plugin needs to be upgraded, However the new upgrade does not work with my Braintree account. I am hoping that will be fixed soon. I originally thought that module was causing the issues (And maybe it is).

Thank you

Hmm, none of those add-ons/sideboxes should have bearing on that log (coming from the Zen Cart base).

Is your site multi-lingual?

I like the modal dialog display of additional images, and generally it's just what's needed.

However, occasionally some detail in the image can still be hard to see when it's scaled down to 500 px wide. Would you consider adding a link to the dialog to open the image in full size?

ZC 1.5.8a, Bootstrap 3.6.4.

Quote:

---

Originally Posted by lat9

Hmm, none of those add-ons/sideboxes should have bearing on that log (coming from the Zen Cart base).

Is your site multi-lingual?

---

It is not.

However, I think this is a product that should not be active. It appears to be a product that is "abandoned" somehow. I cannot find it in the admin/catalog area. So I think it is a product that got abandoned. I will do some investigating.

Just an update, it looks like I have a product listed in the products table that does not have a record in the products_description table. I believe this is causing the issue.

I may have to find a way to create a SQL Statement to identify any other orphan records.

Thanks for the feedback.

Quote:

---

Originally Posted by n8pbm

Just an update, it looks like I have a product listed in the products table that does not have a record in the products_description table. I believe this is causing the issue.

I may have to find a way to create a SQL Statement to identify any other orphan records.

---

select p.products_id from products p where not exists (Select pd.products_id from products_description pd where pd.products_id = p.products_id);

ZC2.1.0, Bootstrap 3.7.4.

No sure if this is relevant, a bug in the template or if I did something wrong, but just wanted to make a note about this cart update button issue:

https://www.zen-cart.com/showthread....06#post1405206

Hoping maybe somebody could confirm if it's a template bug or not.

Quote:

---

Originally Posted by DML73

ZC2.1.0, Bootstrap 3.7.4.

No sure if this is relevant, a bug in the template or if I did something wrong, but just wanted to make a note about this cart update button issue:

https://www.zen-cart.com/showthread....06#post1405206

Hoping maybe somebody could confirm if it's a template bug or not.

---

It is; see this correction which will be part of v3.7.5 of the template:

https://github.com/lat9/ZCA-Bootstra...dca59dda5b0L73