ZCA Bootstrap 4 Template [Support Thread]

jpda:

Working in ZenCart v1.5.8a, PHP v8

Question:
Installing Bootstrap 3.6.3
In the install files I see 2 folders:
ZCA-Bootstrap-Template-3.6.3/includes/languages/english/bootstrap
ZCA-Bootstrap-Template-3.6.3/includes/languages/english/extra_definitions

I would expect also ZCA-Bootstrap-Template-3.6.3/includes/languages/english/html_includes
containing /bootstrap/html_includes/bootstrap
to override the defines as in ZenCart v1.5.8a includes/languages/english/html_includes/responsive_classic/

Is that correct?
The base bootstrap template provides no overrides to the html_includes sub-directory, so that directory is not included in the template's distribution. For your clone of the bootstrap template, you'll need to create /includes/languages/english/html_includes/YOUR_BOOTSTRAP/ and copy/create any additional content needed.

Thank you Cindy, that's clear.:smile: I will change only my cloned version and keep the base version as distributed.

Hi there
I need some help with my template please.

What i would like to do is to change the main page image thumbnail sizes for the products to larger thumbnail sizes.

I have tried doing this through Configuration/Images but for some reason it does not allow me to do this.

I am using the latest version of Bootstrap Template

Any help really appreciated

Thank you

Answers to the posting tip questions can really help us to help you.

In this case, we could use a look at your site and specifically which images you are trying to change.

The images that I am trying to change are in the New products Cata gory and featured category both on the main page of my shop.

amebb:

The images that I am trying to change are in the New products Cata gory and featured category both on the main page of my shop.
Those images are sized using Configuration :: Images :: Small Image Width (and Height).

lat9:

Those images are sized using Configuration :: Images :: Small Image Width (and Height).
... currently. Unfortunately, the Featured and New Products centerboxes are both using the above settings instead of the new/featured ones.

Zencart 1.5.8
ZCA-Bootstrap-Template-3.6.1

I am doing some test orders and when i go to the order history page i get an error

error: PHP Fatal error: Uncaught Error: Undefined constant "QUANTITY_SUFFIX"
path: includes\templates\bootstrap\templates\tpl_account_history_info_default.php on line 42.

 <td class="accountQuantityDisplay"><?php echo  $order->products[$i]['qty'] . QUANTITY_SUFFIX; ?></td>

If someone could assist be much appreciated

chadlly2003:

Zencart 1.5.8
ZCA-Bootstrap-Template-3.6.1

I am doing some test orders and when i go to the order history page i get an error

error: PHP Fatal error: Uncaught Error: Undefined constant "QUANTITY_SUFFIX"
path: includes\templates\bootstrap\templates\tpl_account_history_info_default.php on line 42.

This just means that there is no definition for QUANTITY_SUFFIX in your language flles. https://docs.zen-cart.com/user/localization/missing_language_constants/

I would suggest that you search through an unaltered copy of the ZC and template files to find where that definition should be.

chadlly2003:

Zencart 1.5.8
ZCA-Bootstrap-Template-3.6.1

I am doing some test orders and when i go to the order history page i get an error

error: PHP Fatal error: Uncaught Error: Undefined constant "QUANTITY_SUFFIX"
path: includes\templates\bootstrap\templates\tpl_account_history_info_default.php on line 42.

lat9:

Those images are sized using Configuration :: Images :: Small Image Width (and Height).

Thank you for your reply.
I have managed to sort the image sizing on the main page of my website. But, how do i change the image sizing in the product description?
At the moment my product images are small

Thank you

amebb:

Thank you for your reply.
I have managed to sort the image sizing on the main page of my website. But, how do i change the image sizing in the product description?
At the moment my product images are small

Thank you
Image sizing in products' description is based on the HTML present in those descriptions. If you want an image sized to a certain dimension, you'll need to update the descriptions to specify the height and width parameters for any <img> tags.

Hi all,
I'm still working on implementing an updated website using bootstrap template. I recently updated my BS version from 3.6 to 3.6.3 by updating the changed files in the readme docs. Using ZC 1.5.8a. In testing my site, I'm coming across a couple of minor issues I'm hoping someone can help me address:

1. In small screen media mode <576px the category column is limited to 32.5%. I think this is because I have columns per row set to 3. When I change to 1 the mobile display is fine, but the desktop display has more columns than I want. How can I have 1 column in mobile mode and 3 columns in desktop mode but still remain fluid based on screen width?

2. The back-to-top button continues to appear on top of other buttons, despite the fix that was supposed to be added to 3.6.3? Couldn't find where to disable the button or adjust settings. It's mainly affecting the checkout button and confirm order buttons. Maybe I missed something when updating the template?

Thank you in advance!

1. Did you try changing the columns-per-row to 0 (fluid)? If that doesn't do what you want, v3.6.3 adds a 'soft' configuration setting:

    // -----
    // Starting with v3.6.3, a categories' fluid layout can be identified.  If predefined (like
    // in an /extra_datafiles .php module), that override is used.
    //
    if ($category_row_layout_style === 'fluid') {
        $grid_cards_classes = 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3';
        if (!isset($grid_category_classes_matrix)) {
            // this array is intentionally in reverse order, with largest index first
            $grid_category_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-lg-4 row-cols-xl-5',
                '9' => 'row-cols-1 row-cols-md-3 row-cols-lg-4 row-cols-xl-5',
                '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',
            ];
        }

2. There's a 'soft' setting (see dist.site-specific-bootstrap-settings.php) that totally disabled the back-to-top button. If you still want it to show, but not overlay "important" buttons, here's what I added to my /css/site_specific_styles.php so it overlays the footer:

#back-to-top {
    bottom: 2.5vh;
}

Thanks, Lat! I have a 3/9/0 column setup with the template, so I changed the 4,5 and 6 on the configuration all to 3 and now it displays correctly on the smaller screens and has a max of 3 columns on larger screens. Is there any way to get the categories to fill the width of the center box equally on the larger screens though? For example, when I have column count set at 3 and there is a row with only 2 categories, they auto adjust to 50%. When I change the column count to 0 for fluid, now each category only takes up 33%, even if there are only 2 categories on a row. Just a visual preference, not a dealbreaker, but wanted to check.

2. I added the code you provided to the css (as well as my separate css file called by the site-specific version) and no change on the back to top button--it still overlays checkout and confirm order. Anything else I can look at?

1. That's the way that Bootstrap card-deck elements work.
2. A link to the site?

lat9:

1. That's the way that Bootstrap card-deck elements work.
2. A link to the site?

Try this--hopefully it works. Still a work in progress: https://www.thecoinauthority.com/index.php?main_page=index&cPath=1

Thanks again!

lat9:

Are you using the shipping-estimator on the shopping-cart page or as a modal pop-up? The 'standard' behavior of the template (like the rest of the Zen Cart templates) is to include some javascript/jQuery element to hide the "State" field when a pulldown is in use.

For Bootstrap, that's in the bootstrap templates jscript/jscript_addr_pulldowns_zca_bootstrap.php file.

Are there any console errors (see via the browser's F12/Inspect tab)? If so, those might identify the source of the issue. If the HTML isn't valid, the jQuery addition sometimes will not happen properly.

I was having this same issue--I think the code is missing an else statement in the tpl_modules_shipping_estimator.php file. Here's what I added and for now seems to be working as intended:

<?php
            if ($flag_show_pulldown_states === true) {
?>
    <label class="inputLabel" for="stateZone" id="zoneLabel"><?php echo ENTRY_STATE; ?></label>
    <?php echo zen_draw_pull_down_menu('zone_id', zen_prepare_country_zones_pull_down($selected_country), $state_zone_id, 'id="stateZone"'); ?>
    <div class="p-2" id="stBreak"></div>
<?php
            } else {
?>
    <label class="inputLabel" for="state" id="stateLabel"><?php echo $state_field_label; ?></label>
    <?php echo zen_draw_input_field('state', $selectedState, zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_state', '40') . ' id="state"'); ?>
    <div class="p-2"></div>
<?php
}           
		 
 if (CART_SHIPPING_METHOD_ZIP_REQUIRED === 'true') {

Nope, that will make it so that any countries that don't have zones (e.g. France) won't have an entry for their province.

lat9:

Nope, that will make it so that any countries that don't have zones (e.g. France) won't have an entry for their province.

Got it, sorry if I confused anyone. Not sure if it is related or not, but it doesn't look like the State/Province drop down menus auto-update when a new country is selected in the estimator. Is it supposed to?