ZCA Bootstrap 4 Template [Support Thread]

[lat9]

I added files for bootstrap template in version 4.0.2 of the plugin release:
https://www.zen-cart.com/downloads.php?do=file&id=30

Thanks for the update, @pilou2!

[Mystery??]

Hi,
How does one go about centering the ez pages text for the top and bottom bar? I'm on zencart 158a.
I've tried adding

#navEZPagesTop ul{text-align:center;}

to the site_specific_styles.php but it doesn't work.


Also, just out of curiousity, is there a more simple way to center the logo header image through site_specific_styles.php rather then going to /includes/templates/clone/common/tpl_header.php and changing

from:

$sales_text_class = (HEADER_SALES_TEXT !== '') ? 'col-sm-4' : 'col-sm-12';
?>
            <div class="<?php echo $sales_text_class; ?>">
                <a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" aria-label="<?php echo TEXT_HEADER_ARIA_LABEL_LOGO; ?>">

to:

$sales_text_class = (HEADER_SALES_TEXT !== '') ? 'text-center w-100' : 'col-sm-12';
?>
            <div class="<?php echo $sales_text_class; ?>">
                <a class="d-block" href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" aria-label="<?php echo TEXT_HEADER_ARIA_LABEL_LOGO; ?>">

[lat9]

Hi,
How does one go about centering the ez pages text for the top and bottom bar? I'm on zencart 158a.
I've tried adding

#navEZPagesTop ul{text-align:center;}

to the site_specific_styles.php but it doesn't work.


Also, just out of curiousity, is there a more simple way to center the logo header image through site_specific_styles.php rather then going to /includes/templates/clone/common/tpl_header.php and changing

from:

$sales_text_class = (HEADER_SALES_TEXT !== '') ? 'col-sm-4' : 'col-sm-12';
?>
            <div class="<?php echo $sales_text_class; ?>">
                <a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" aria-label="<?php echo TEXT_HEADER_ARIA_LABEL_LOGO; ?>">

to:

$sales_text_class = (HEADER_SALES_TEXT !== '') ? 'text-center w-100' : 'col-sm-12';
?>
            <div class="<?php echo $sales_text_class; ?>">
                <a class="d-block" href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" aria-label="<?php echo TEXT_HEADER_ARIA_LABEL_LOGO; ?>">

I don't see an id="navEZPagesTop" element, but I do see id="ezpagesBarHeader" and id="ezpagesBarFooter". To center the links in those navigation elements, try the following CSS:

#ezpagesBarHeader > ul, #ezpagesBarFooter > ul {
    justify-content: center;
}

For aligning the logo image, the issue (I think) is that the id="taglineWrapper" should be a col-sm-8 when there's a tagline. It's currently col-sm-12, which causes it to be not aligned with the image since 4 + 12 > 12. I agree with the use of class="d-block" on the anchor tag that holds the image, that makes it easier for sites that want the image centered.

[lat9]

Above changes addressed in this (https://github.com/lat9/ZCA-Bootstra...ate/issues/289) GitHub issue.<br type="_moz">

[Mystery??]

#ezpagesBarHeader > ul, #ezpagesBarFooter > ul {
    justify-content: center;
}

That works great! Thank you

[Bruce1952]

Hi All,

Just wanted to know if the bootstrap template (latest one just installed not long ago) has the length, width and Height (Products category section) included in it and if not what file do I need to edit and location please in order to add.

[lat9]

Hi All,

Just wanted to know if the bootstrap template (latest one just installed not long ago) has the length, width and Height (Products category section) included in it and if not what file do I need to edit and location please in order to add.

Those non-standard product fields aren't included in the base template's product display. To add them to your template-clone, you'll edit (assuming that your products are of Product - General type) /includes/templates/your_clone/templates/tpl_product_info_display.php, finding this section

<!--bof Product details list  -->
<?php
$display_product_model = ($flag_show_product_info_model === '1' && $products_model !== '');
$display_product_weight = ($flag_show_product_info_weight === '1' && $products_weight != 0);
$display_product_quantity = ($flag_show_product_info_quantity === '1');
$display_product_manufacturer = ($flag_show_product_info_manufacturer === '1' && !empty($manufacturers_name));
if ($display_product_model === true || $display_product_weight === true || $display_product_quantity === true || $display_product_manufacturer === true) { ?>

<ul id="productInfo-productDetailsList" class="productDetailsList list-group mb-3">
  <?php echo (($display_product_model === true) ? '<li class="list-group-item">' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li class="list-group-item">' . TEXT_PRODUCT_WEIGHT .  $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_quantity == 1) ? '<li class="list-group-item">' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li class="list-group-item">' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<?php
  }
?>
<!--eof Product details list -->

If you're running on zc158, those fields will be present in variables $product_info->fields['products_weight'], $product_info->fields['products_height'] and $product_info->fields['products_length'] ... or whatever product-table field name you've chosen to use!

[Bruce1952]

Hi lat9,

And thank you for the help greatly appreciated. It is now looking as it should.

[lat9]

Hi lat9,

And thank you for the help greatly appreciated. It is now looking as it should.

[lat9]

v3.6.1 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 the following GitHub issues:

#271: Correct accessibility issue when <h1> text is an empty string.
#276: Correct misspelled CSS property name: cursor, not curser.
#278: Add titles for accessibility on Navigation Previous/Next buttons.
#279: "Fit" content on shipping-estimator form fields so that they're not 100% wide.
#280: Add spaces between text values on shopping-cart display page.
#281: Ensure that the quantity-update icon is an FA icon, regardless of the Update button's title's character length.
#284: Refactor shopping-cart page layout, especially for small screens.
#286: Correct shopping-cart delete icon/checkbox formatting when a product has a fixed-quantity display.
#288: Update jQuery to 3.7.1.
#289: Correct header/logo area layout.