ZCA Bootstrap 4 Template [Support Thread]

dbltoe:

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. :D

nicksab:

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. :D

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)

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.

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.

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

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.

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 "/>

<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>

• /
  ?> <script src = "<? php echo $ preloads ['bsjs'] ['link'];?>" integrity = "<? php echo $ preloads ['bsjs'] ['integrity'];?>" crossorigin = "anonymous"> </script>

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>

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.

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

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
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.

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

Hello all,

How do I specify an image as body background?

I can see in admin where we can specify a color for the body background ( ZCA Bootstrap Color).

I would like to specify an image for my site background but not sure how to do it with bootstrap.

Thank you in advance for the help

in the original template, includes/templates/bootstrap/css/dist-site-specific_styles,php is provided as an override CSS file. Follow the instructions inside the file and save it to your template.

Issue with layout when using columns on computer. The layout is trying to display 3 columns however they are only 2 are showing on the first row and the text is reduced to a narrow box. Second row has one column also squashed then the pattern repeats.

The issue appears to be in includes\modules\bootstrap\product_listing.php if I remove line 437 ```
wrap_with_classes' => 'col mb-4',

Is this a bug? What dose this line do? To me, it looks like it causes a div to be placed around each product div, then the div, that contains the product is set to width 32.5% which explains the narrow text box.

Zen cart 1.5.8
bootstrap 3.4.0

brittainmark:

Issue with layout when using columns on computer. The layout is trying to display 3 columns however they are only 2 are showing on the first row and the text is reduced to a narrow box. Second row has one column also squashed then the pattern repeats.

The issue appears to be in includes\modules\bootstrap\product_listing.php if I remove line 437 ```
wrap_with_classes' => 'col mb-4',

> 
> Is this a bug? What dose this line do? To me, it looks like it causes a div to be placed around each product div, then the div, that contains the product is set to width 32.5% which explains the narrow text box.
> 
> Zen cart 1.5.8
> bootstrap 3.4.0
Check your site's ***Configuration :: Product Listing :: Columns per Row***.  For the Bootstrap template, set that to either 0 (fluid columns) or 1 (rows).

Thanks! That's fixed it. :smile: I have now found the FAQ's which explains it. thanks again.

Hi its been a while.

Upto date info in sig.

I have had to start the site again urghhh! and have uploaded bootstrap 4 and am working on it but it has no footer and I am not sure if it is supposed to be like that or its an issue with how I uploaded the template or with zencart?

I want to add the footer and put some links in there. But have no idea how and have read through the docs but am lost.

@Angiex1, here's a link to my demo site for the template (albeit currently on zc157): https://vinosdefrutastropicales.com/zc157_bs4/

As you can see, there should be a footer. Are you seeing any myDEBUG*.log files in the site's /logs sub-directory?

I am do you want me to copy it here?

X-out any info like your IP or admin dierectory name and copy the debug here using the # above.

You can also take a look at the docs for partial blank page.

Ok am a little bit confused as I downloaded this copy here of bootstrap https://www.zen-cart.com/downloads.php?do=file&id=2191 but my version in configuration bootstrap template settings states it is version 3.4.0 but it says version 4 in the plugins

I had to change the .htaccess file very slightly when installed as has happened previously on the previous zencart install I could not get into the admin file unless changing this but this did not remove the footer.

here is the debug file for bootstrap I didn't know there was a sql file is it worth putting this is my cart?

The ZCA "bootstrap" template (or a clone) was activated on 2022-10-23 09:26:23 and some of its default settings are different than those currently set. You can copy and paste the following SQL into your admin's Tools->Install SQL Patches to change those defaults:

UPDATE configuration SET configuration_value = '3', last_modified = now() WHERE configuration_key = 'MAX_DISPLAY_PAGE_LINKS' LIMIT 1;
UPDATE configuration SET configuration_value = '<li> / </li>', last_modified = now() WHERE configuration_key = 'BREAD_CRUMBS_SEPARATOR' LIMIT 1;
UPDATE configuration SET configuration_value = '⊢ ', last_modified = now() WHERE configuration_key = 'CATEGORIES_SEPARATOR_SUBS' LIMIT 1;
UPDATE configuration SET configuration_value = '', last_modified = now() WHERE configuration_key = 'CATEGORIES_COUNT_PREFIX' LIMIT 1;
UPDATE configuration SET configuration_value = '', last_modified = now() WHERE configuration_key = 'CATEGORIES_COUNT_SUFFIX' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'SHOW_SHIPPING_ESTIMATOR_BUTTON' LIMIT 1;
UPDATE configuration SET configuration_value = '4', last_modified = now() WHERE configuration_key = 'MAX_DISPLAY_SEARCH_RESULTS_FEATURED' LIMIT 1;
UPDATE configuration SET configuration_value = '4', last_modified = now() WHERE configuration_key = 'MAX_DISPLAY_NEW_PRODUCTS' LIMIT 1;
UPDATE configuration SET configuration_value = '4', last_modified = now() WHERE configuration_key = 'MAX_DISPLAY_SPECIAL_PRODUCTS_INDEX' LIMIT 1;
UPDATE configuration SET configuration_value = '0', last_modified = now() WHERE configuration_key = 'PRODUCT_LISTING_MULTIPLE_ADD_TO_CART' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'MAX_RANDOM_SELECT_NEW' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'MAX_DISPLAY_CATEGORIES_PER_ROW' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS' LIMIT 1;
UPDATE configuration SET configuration_value = '2', last_modified = now() WHERE configuration_key = 'SHOW_PRODUCT_INFO_COLUMNS_SPECIALS_PRODUCTS' LIMIT 1;