ZCA Bootstrap 4 Template [Support Thread]

[nicksab]

I'm going to have to defer to someone more familiar with the guts of bootstrap.

You should be able to use CSS to control the element's width with either a percentage, fit-content, or some other setting. None of them effect the .table-responsive except the removal of an overflow-x:auto and you only see that in products with attributes.

It is displayed in two different sizes when the item has or doesn't have attributes but I can't find what is controlling it.

360.4 x 274

360.4 x 202

Thank you dbltoe

i tried a few thing in css as well like padding and margin but no luck.

It is too bad as all my product have attributes but i guess a bit of side scrolling can't hurt.

[simon1066]

Thank you dbltoe

i tried a few thing in css as well like padding and margin but no luck.

It is too bad as all my product have attributes but i guess a bit of side scrolling can't hurt.

I too am not that familiar with Bootstrap but I think you could shift the attributes to the left and remove their list style for small screens, like this

@media (max-width:???px) {

.productsCell-attributes ul {
  padding-left: 0px;
  list-style: none;
}

}

That almost does it for resolutions down to 360px width, to remove scrolling completely at that width play about with the padding of .productsCell

(I'm assuming that the productsCell class isn't used elsewhere - worth checking)

[dbltoe]

Thanx to ASAlishaa for adding the bootstrap cheatsheet to the bootstrap reamde.md I think I may have found where the problem is coming from.

The particular table is given the class table-responsive and table responsive is actually in the CSS.

However the bootstrap cheatsheet suggests that the class should be table-*-responsive with the * being sm, md, lg, or xl. It's possible that the missing clarifier is not letting CSS do its thing.

I will have to test when back at the computer later today.

[nicksab]

Thanx to ASAlishaa for adding the bootstrap cheatsheet to the bootstrap reamde.md I think I may have found where the problem is coming from.

The particular table is given the class table-responsive and table responsive is actually in the CSS.

However the bootstrap cheatsheet suggests that the class should be table-*-responsive with the * being sm, md, lg, or xl. It's possible that the missing clarifier is not letting CSS do its thing.

I will have to test when back at the computer later today.

Thank you for looking into this and let me know how the testing goes please

[lat9]

I've just submitted v3.4.0 of the Bootstrap-4 template; it's now available for download (https://www.zen-cart.com/downloads.php?do=file&id=2191) and supports the Zen Cart 1.5.7 series as well as 1.5.8!

This release contains changes associated with the following GitHub issues and has been validated with Zen Cart v1.5.8:

#151: Update zen_cfg_read_only, using zc158 version for zc157 change
#150: Remove redundant button definitions
#147: ZcaBootstrapObserver::setVariables incompatible with PHP 8.2's dynamic properties' restriction
#142: Enable additional content to be displayed on the shopping_cart page
#141: Use 'standard' Zen Cart HTML 'id' for cart quantity/button display and centerboxes
#140: Don't include conditions if shipping and/or billing isn't available
#139: Preload (rather than prefetch) the CDN-based css/js files
#138: Consolidate One-Page Checkout/Bootstrap template integration
#137: 'common_address_formatting', set as primary checkbox should appear only for address_book_process
#136: Move 'country' selection above 'state' in common-address formatting
#135: Remove unused template files for all/featured/new products' listings
#135 opened on Jul 18 by lat9
#134: zc158 Compatibility, overall changes required.
#133: Exporting ZCA Bootstrap Colors
#132: orphan statement in tpl_modules_manufacturer_info
#131: modules\bootstrap\category_row.php compare to core ZC158 query
#130: centerboxes\new_products.php comparison to core query
#125: contact_us "Send Email To:" Selection Is Not Really Required
#124: Raw HTML displayed for when customer views an order's history
#122: Restore 'base' Zen Cart attributes HTML class and id attributes.

[giancalr]

Good evening, I downloaded the template, and in the html header file, I saw these lines: I assume we are going to preload the css and jscript files right? I wanted to know if they can be applied to other templates or does it only work on this one? Thank you

if (! empty ($ bs4_no_preloading)) {
?>
<link rel = "preload" href = "<? php echo $ preloads ['bscss'] ['link'];?>" integrity = "<? php echo $ preloads ['bscss'] ['integrity']; ?> "crossorigin =" anonymous "as =" style "/>
<link rel = "preload" href = "<? php echo $ preloads ['fa'] ['link'];?>" integrity = "<? php echo $ preloads ['fa'] ['integrity']; ?> "crossorigin =" anonymous "as =" style "/>
<link rel = "preload" href = "<? php echo $ preloads ['jquery'] ['link'];?>" integrity = "<? php echo $ preloads ['jquery'] ['integrity']; ?> "crossorigin =" anonymous "as =" script "/>
<link rel = "preload" href = "<? php echo $ preloads ['bsjs'] ['link'];?>" integrity = "<? php echo $ preloads ['bsjs'] ['integrity']; ?> "crossorigin =" anonymous "as =" script "/>
<? php

<link rel = "stylesheet" href = "<? php echo $ preloads ['bscss'] ['link'];?>" integrity = "<? php echo $ preloads ['bscss'] ['integrity']; ?> "crossorigin =" anonymous ">

<link rel = "stylesheet" href = "<? php echo $ preloads ['fa'] ['link'];?>" integrity = "<? php echo $ preloads ['fa'] ['integrity']; ?> "crossorigin =" anonymous "/>

<script src = "<? php echo $ preloads ['jquery'] ['link'];?>" integrity = "<? php echo $ preloads ['jquery'] ['integrity'];?>" crossorigin = "anonymous"> </script>
<? php
/ *
<script> window.jQuery || document.write (unescape ('% 3Cscript src = "<? php echo $ template-> get_template_dir ('. js', DIR_WS_TEMPLATE, $ current_page_base, 'jscript');?> / jquery.min.js"% 3E% 3C / script% 3E ')); </script>
* /
?>
<script src = "<? php echo $ preloads ['bsjs'] ['link'];?>" integrity = "<? php echo $ preloads ['bsjs'] ['integrity'];?>" crossorigin = "anonymous"> </script>

[lat9]

Good evening, I downloaded the template, and in the html header file, I saw these lines: I assume we are going to preload the css and jscript files right? I wanted to know if they can be applied to other templates or does it only work on this one? Thank you

if (! empty ($ bs4_no_preloading)) {
?>
<link rel = "preload" href = "<? php echo $ preloads ['bscss'] ['link'];?>" integrity = "<? php echo $ preloads ['bscss'] ['integrity']; ?> "crossorigin =" anonymous "as =" style "/>
<link rel = "preload" href = "<? php echo $ preloads ['fa'] ['link'];?>" integrity = "<? php echo $ preloads ['fa'] ['integrity']; ?> "crossorigin =" anonymous "as =" style "/>
<link rel = "preload" href = "<? php echo $ preloads ['jquery'] ['link'];?>" integrity = "<? php echo $ preloads ['jquery'] ['integrity']; ?> "crossorigin =" anonymous "as =" script "/>
<link rel = "preload" href = "<? php echo $ preloads ['bsjs'] ['link'];?>" integrity = "<? php echo $ preloads ['bsjs'] ['integrity']; ?> "crossorigin =" anonymous "as =" script "/>
<? php

<link rel = "stylesheet" href = "<? php echo $ preloads ['bscss'] ['link'];?>" integrity = "<? php echo $ preloads ['bscss'] ['integrity']; ?> "crossorigin =" anonymous ">

<link rel = "stylesheet" href = "<? php echo $ preloads ['fa'] ['link'];?>" integrity = "<? php echo $ preloads ['fa'] ['integrity']; ?> "crossorigin =" anonymous "/>

<script src = "<? php echo $ preloads ['jquery'] ['link'];?>" integrity = "<? php echo $ preloads ['jquery'] ['integrity'];?>" crossorigin = "anonymous"> </script>
<? php
/ *
<script> window.jQuery || document.write (unescape ('% 3Cscript src = "<? php echo $ template-> get_template_dir ('. js', DIR_WS_TEMPLATE, $ current_page_base, 'jscript');?> / jquery.min.js"% 3E% 3C / script% 3E ')); </script>
* /
?>
<script src = "<? php echo $ preloads ['bsjs'] ['link'];?>" integrity = "<? php echo $ preloads ['bsjs'] ['integrity'];?>" crossorigin = "anonymous"> </script>

You can certainly apply the same idea to other templates. Those preloads help in the template's performance by pre-loading the external jQuery, Font Awesome and Bootstrap CSS and JS elements used on all pages.

[giancalr]

Thanks for the quick reply,
how to apply them to other templates? Does the template in question have any particular function? because in the template files, I have not found any function related to preloads, what I did not understand is what the words "bscss" "fa" "bsjs" mean Thanks

[lat9]

Thanks for the quick reply,
how to apply them to other templates? Does the template in question have any particular function? because in the template files, I have not found any function related to preloads, what I did not understand is what the words "bscss" "fa" "bsjs" mean Thanks

The template uses CDN downloads for the Bootstrap CSS (bscss) and JS (bsjs) as well as Font Awesome (fa). How you use that construct on another template depends on that template's external dependencies.

[giancalr]

Good morning, ok thanks I'll do some tests,