ZCA Bootstrap 4 Template [Support Thread]

You are the best!

Thanks!

g2ktcf:

Any chance someone has this as a demo that I can see? The original one listed in this thread says "domain for sale" lol

Thanks for reporting; this has been fixed.

This issue hits the bootstrap template:
Zone restricted shipping modules won't show up in estimator unless state dropdown is used
https://github.com/zencart/zencart/issues/4476

How can I have two cards per row on mobile? I have tried fiddling with $grid_classes_matrix but that doesn't seem to be what's needed.

swguy:

How can I have two cards per row on mobile? I have tried fiddling with $grid_classes_matrix but that doesn't seem to be what's needed.

With this I see two per row

'10' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'8' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',

Thanks - this gives two per row on the index listing pages (/index.php?main_page=index&cPath=2_82) but not two per row for the centerboxes on the front page, which is what I was hoping to get.

(Sorry, I realize now that my original request didn't specify this detail.)

keneso:

With this I see two per row

'10' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'8' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',

That's it!  Edits to your clone's /includes/modules/bootstrap/product_listing.php's $grid_classes_matrix array.

swguy:

Thanks - this gives two per row on the index listing pages (/index.php?main_page=index&cPath=2_82) but not two per row for the centerboxes on the front page, which is what I was hoping to get.

(Sorry, I realize now that my original request didn't specify this detail.)
The products/row on those centerboxes are controlled by the various (e.g. featured, special, new) per-row counts present in Configuration :: Product Info. For instance, the new-products/row is controlled by SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS.

Mobile seems to be stuck at 1. Yes, desktop and tablet home page centerbox products per row can be modified (I think it's configuration > Index listing though) but mobile always seems to let a single column take 100% of the width.

This is the home page centerboxes only - other index pages seem to be controlled using the grid as noted above.

swguy:

Mobile seems to be stuck at 1. Yes, desktop and tablet home page centerbox products per row can be modified (I think it's configuration > Index listing though) but mobile always seems to let a single column take 100% of the width.

This is the home page centerboxes only - other index pages seem to be controlled using the grid as noted above.
When you say mobile, what viewport width are you referring to?

I am using the Chrome simulator with iPhone 6/7/8, and that is 375x667. (Right click, Inspect, select device type.). Same for other phones - Pixel 2, Nexus 4, etc.

When I go to https://vinosdefrutastropicales.com/zc157_bs4/ and do this I see 1 item per row in the new products centerbox as shown in the attached image.

That's going to require changes to each of the /includes/templates/bootstrap/centerboxes/tpl*.php files, changing the overall container as identified in this Bootstrap document: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

I thought it would be something like this - thanks these were the leads I needed. I'll let you know how it goes.

If anyone else is interested in this, here's my diff for includes/templates/bootstrap/centerboxes/tpl_modules_featured_products.php; other files would be analogous.

@@ -36,14 +36,14 @@ if (is_array($list_box_contents) > 0 ) {
     //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
 ?>

-<div class="card-deck text-center">
+<div class="card-deck text-center row row-cols-2">
 <?php
     for($col=0, $j=sizeof($list_box_contents[$row]); $col<$j; $col++) {
       $r_params = "";
       if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
      if (isset($list_box_contents[$row][$col]['text'])) {
 ?>
-    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>'; ?>
+    <?php echo '<span ' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</span>'; ?>
 <?php
       }
     }

Possibly interesting to Bootstrap template users:
I find having "Sold Out" presented as a button to be confusing. Even in CSS Buttons mode, I'd rather just use the graphic image (the same way "Call for Price" does).
I put in a PR for 1.5.8 that does this but it's an easy backport. See

https://github.com/zencart/zencart/pull/4479

g2ktcf:

Any chance someone has this as a demo that I can see? The original one listed in this thread says "domain for sale" lol

I'm also using this template on a live store at https://www.thegluepeople.co.uk/

CunningStunt2:

I'm also using this template on a live store at https://www.thegluepeople.co.uk/

Here's a few of mine built with Bootstrap:

https://businesscardprinting.uk

https://ventureengravings.uk

https://brassplaque.co.uk

https://engravedplaques.uk

https://theredarrows.co.uk

Fantastic template so many visitors since changing to this format and it really seems to create a nice retention and sale rate. So wanted to pass on appreciation for making my custom template completely obsolete due to your design prowess.

Hello,

Not sure where to post this as I'm not sure if its a Zencart or template issue.

I recently upgraded Zencart and ZCA versions and now my larger image modal popup is blank.

<div id="productLargeImageModal" class="modal-body"></div>

I tried changing tpl_image.php to the earlier version but that didn't work.

<?php echo zen_image($products_image_large, $products_values->fields['products_name']); ?>

Doing some more digging I was able to get it partially working by adding the image dimensions. But if I change MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT to LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT it blanks again.

<?php echo zen_image($products_image_large, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT); ?>

Any suggestions on how to display the full sized image?

PHP 7.2
Zen Cart 1.5.7c
ZCA Bootstrap 3.1.5

Thanks

I should add all my images are uploaded to /images. No folders for sizes, etc. I upload a single large image for all items with no special wording for size.