ZCA Bootstrap 4 Template [Support Thread]

Localhost install of new ZC 157b. No other addons. Just installed the 3.1.0 over the 3.0.0. The change seem to break the product list layout such that the product contents has collapsed down leaving the images outside of the layout box.

kwright:

Localhost install of new ZC 157b. No other addons. Just installed the 3.1.0 over the 3.0.0. The change seem to break the product list layout such that the product contents has collapsed down leaving the images outside of the layout box.

Sure enough; let me see what the heck is going on.

@kwright, what is your setting for Configuration :: Product Listing :: Columns per row? I'm guessing that it's 3; does the page render correctly if you change that to 0?

lat9:

@kwright, what is your setting for Configuration :: Product Listing :: Columns per row? I'm guessing that it's 3; does the page render correctly if you change that to 0?

Yup, that was it. Easy fix, thanks!

kwright:

Yup, that was it. Easy fix, thanks!
Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.

lat9:

Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.
Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.

Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong

DrByte:

Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.

Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong
Thanks for that @DrByte; I'll use that GitHub issue to update the template's documentation.

lat9:

Thanks for the report and the follow-up. I'll create an issue on the template's GitHub repository to see why that setting causes that anomalous display.

DrByte:

Here's how it works:
0 = use bootstrap css rules
1 = display rows
2 or higher = force into X number of columns by manually calculating a percentage ... which cannot possibly take into account all the other bootstrap css such as for images etc.

So, simple solution: use 0 with the bootstrap template.

Technical:
0 = it outputs all the products as individual cards so bootstrap can style them
2+ = it forces the percentage width and injects a new wrapping div around each group, so that the number is forced upon the browser even if the browser size is wrong

What if I want to use more than the "standard" 3 columns?

keneso:

What if I want to use more than the "standard" 3 columns?
If you don't like the number of columns used by default for the fluid layout, you can customize them around line 182:

        // set css classes for "row" wrapper, to allow for fluid grouping of cells based on viewport
        // these defaults are based on Bootstrap4, but can be customized to suit your own framework
        if ($product_listing_layout_style === 'fluid') {
            $grid_cards_classes = 'row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-3';
            // this array is intentionally in reverse order, with largest index first
            $grid_classes_matrix = [
                '10' => 'row-cols-1 row-cols-md-2 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',
            ];

I'm really liking this template, really appreciate all of the work and support the author and supporters have put into this template! Like working with the Bootstrap framework as well.

I'm migrating away from the Winchester Responsive template to the ZCA Bootstrap 4 Template, I would like incorporate/replicate some of the key features that I really like from the Winchester Responsive template.

My top 3:
Header Dropdown Responsive Slim Menu
Responsive Home Page Flexslider
Flexible Footer Menu

I have already incorporated the Flexible Footer Menu Multilingual addon and styled it with Bootstrap. I would now like to incorporate/replicate the Winchester Responsive Header Dropdown Slim Menu, using Bootstrap of course.

Recommendations? Anyone using something similar? Would it make sense to use something like slimmenu since jQuery is already being used and style it using Bootstrap?

kwright:

I'm really liking this template, really appreciate all of the work and support the author and supporters have put into this template! Like working with the Bootstrap framework as well.

I'm migrating away from the Winchester Responsive template to the ZCA Bootstrap 4 Template, I would like incorporate/replicate some of the key features that I really like from the Winchester Responsive template.

My top 3:
Header Dropdown Responsive Slim Menu
Responsive Home Page Flexslider
Flexible Footer Menu

I have already incorporated the Flexible Footer Menu Multilingual addon and styled it with Bootstrap. I would now like to incorporate/replicate the Winchester Responsive Header Dropdown Slim Menu, using Bootstrap of course.

Recommendations? Anyone using something similar? Would it make sense to use something like slimmenu since jQuery is already being used and style it using Bootstrap?
That's the beauty of this template, IMO ... it's standards-based so that there are a ton of modifications available. You could try, for instance, Googling bootstrap 4 dropdown submenu to get a feeling for what's been done before.

I don't suggest using the slimmenu, not because it's bad, but that's just going to make a site have that many more things to manage.

Thanks @lat9,

Yes, been Googling until my wrist is sore! Too many options, which is good I guess. Think I'll try a few and see how they look in the template.

You have any favorites for a banner slider?

kwright:

Thanks @lat9,

Yes, been Googling until my wrist is sore! Too many options, which is good I guess. Think I'll try a few and see how they look in the template.

You have any favorites for a banner slider?
I've got one in development, but it might be published commercially.

lat9:

I've got one in development, but it might be published commercially.

Keep me posted!

I've just submitted v3.1.1 of the Bootstrap 4 template for the Zen Cart moderators' review. I'll post back here when it's available for download.

This version corrects the shipping-estimator's display on the shopping_cart page when state dropdowns are in use and the selected country has no zones. In that case, the state entry input is being disabled. See GitHub issue #48 for details.

Note that this release adds the file /includes/modules/bootstrap/shipping_estimator.php.

I've just submitted v1.0.0 of the Bootstrap-4 Template support for One-Page Checkout. When approved by the Zen Cart moderators, that sub-template can be downloaded here: https://www.zen-cart.com/downloads.php?do=file&id=2305
.

Early adopters can download the plugin's zip-file from its GitHub repository: https://github.com/lat9/bs4_opc/releases

lat9:

I've just submitted v1.0.0 of the Bootstrap-4 Template support for One-Page Checkout. When approved by the Zen Cart moderators, that sub-template can be downloaded here: https://www.zen-cart.com/downloads.php?do=file&id=2305
.

Early adopters can download the plugin's zip-file from its GitHub repository: https://github.com/lat9/bs4_opc/releases
Now available for download from the Zen Cart downloads.

First of all thank you for an amazing template, I have been able to customise pretty much the way I want for now. The only thing I'm having an issue with is the product page, where I can't get the Add to Cart box and price to display above the product description on mobile. Some of the product descriptions are rather long and I don't like that customers have to scroll so far down to "click" add to cart.

Shifty_J:

First of all thank you for an amazing template, I have been able to customise pretty much the way I want for now. The only thing I'm having an issue with is the product page, where I can't get the Add to Cart box and price to display above the product description on mobile. Some of the product descriptions are rather long and I don't like that customers have to scroll so far down to "click" add to cart.
I'm glad you like the template, it's been a team effort taking over where Ray Barbour left off!

You can move that price/add-to-cart section above the descriptions by moving (from an as-distributed v3.0.0/3.1.0 tpl_product_info_display.php) lines 231 through 302 after line 107.

lat9:

I've just submitted v3.1.1 of the Bootstrap 4 template for the Zen Cart moderators' review. I'll post back here when it's available for download.

This version corrects the shipping-estimator's display on the shopping_cart page when state dropdowns are in use and the selected country has no zones. In that case, the state entry input is being disabled. See GitHub issue #48 for details.

Note that this release adds the file /includes/modules/bootstrap/shipping_estimator.php.
Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2191