ZCA Bootstrap 4 Template [Support Thread]

[JimmyV]

Another thing people might like is to pull the shopping cart out of the hamburger on mobile. You do this by putting this right below the </button> in tpl_header in common

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>

<div class="mobile-cart-wrap d-lg-none">
<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>">
<i class="fa fa-shopping-cart"></i>
<span class="badge badge-pill badge-primary"><?php echo $_SESSION['cart']->count_contents(); ?></span>
</a>
</div>

[GoldBuckle]

I have just switched to the Bootstrap template (with ZC 2.0.1) and my desktop monitor resolution is 1920x1080. I like the template and the overall layout except that I don't like that it spans the full width of my monitor. I find it more visually appealing if it only takes up about 75% as like the Responsive Classic Template. Can I change this in the Admin or do I need to address it with CSS or a copy/custom template?

On a sidenote, I also find that the DPU 4.0.0-Beta.4 works with Bootstrap on 2.0.1 but you have to update - Admin > Dynamic Price Update Config > Where to display price setting to "productsPriceBottom-card-body"

[GoldBuckle]

Also, one other thing bugging me about the bootstrap is the white space in the logoWrapper, taglineWrapper and tagline are. It is just not visually pleasing from a graphic/web design standpoint. Ideally, this area should have the logo, search box, phone & hours, # of items in cart. I have looked at a number of different responsive websites that follow this or a very similar layout. I am thinking of trying a template over ride to address this but I don't want to alter the bootstrap responsiveness or accessibility. Any input, info or suggestions on doing this template over ride would be welcomed and much appreciated...

[lat9]

Also, one other thing bugging me about the bootstrap is the white space in the logoWrapper, taglineWrapper and tagline are. It is just not visually pleasing from a graphic/web design standpoint. Ideally, this area should have the logo, search box, phone & hours, # of items in cart. I have looked at a number of different responsive websites that follow this or a very similar layout. I am thinking of trying a template over ride to address this but I don't want to alter the bootstrap responsiveness or accessibility. Any input, info or suggestions on doing this template over ride would be welcomed and much appreciated...

Template-override; use Clone a Template: https://www.zen-cart.com/downloads.php?do=file&id=2087

[GoldBuckle]

Didn't know about this plugin, thank you!

Template-override; use Clone a Template: https://www.zen-cart.com/downloads.php?do=file&id=2087

[barco57]

Can I change this in the Admin or do I need to address it with CSS or a copy/custom template?

configuration > Bootstrap Template Settings
Header Container Type
Main Content Container Type
Footer Container Type

switch those from container-fluid to container.
You can then play with max-width on the container class if you need to change it

[barco57]

you can also get the top nav to be inside the container by removing the fixed-top from nav

[dbltoe]

https://alsjerky.com is an example of moving the information from logoWrapper to the define_main_page. We set the logoWrapper to display:none and used the trademark mod to put the company name on every page.

IMHO, the logoWrapper (even if used) should be turned off on all but the home page. In the case of https://topkayaker.com, you can see that all the info moved into the defined main section would take a lot of territory on every page on the site. With today's AI-assisted searches, users are less likely to see the home page and more likely to be sent to the product. Once there, they want product info more than site info.

[TamyA]

How can i display the back to top correctly on Firefox?
I am using zen cart 2.1.0, bootstrap 4


this is how it shows on Firefox

This how it shows on chrome

[lat9]

How can i display the back to top correctly on Firefox?
I am using zen cart 2.1.0, bootstrap 4


this is how it shows on Firefox

This how it shows on chrome

A link to the site would help, since I don't see that behavior with an as-shipped 3.7.8 (actually 3.7.9-beta) Bootstrap template using either Firefox or Chrome.