ZCA Bootstrap 4 Template [Support Thread]

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

[lat9]

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.

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

[kwright]

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

[lat9]

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.

[DrByte]

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

[lat9]

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.

[keneso]

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

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

[DrByte]

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',
            ];

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