ZCA Bootstrap 4 Template [Support Thread]

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

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

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"

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

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...
Template-override; use Clone a Template: https://www.zen-cart.com/downloads.php?do=file&id=2087

Didn't know about this plugin, thank you!

lat9:

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

GoldBuckle:

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

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

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.

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

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

lat9:

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.

Since you do not see it then it must be my old environment (Windows 7).

this is how your back to top display on on my PC

ZC 2.1.0. My Store is set to Showcase with Prices (Admin Option 2), and Add to Cart turned off (Display Product Price/Add to Cart Admin Option 0), yet I still get the Add to Cart box in my Product Listings.

If I switch from ZCA Bootstrap-4 to Responsive Classic - extended, the Add to Cart box disappears.

I'm on a PC BTW It makes no difference what value I set for "Float the Add Selected to Cart button?".

Just checked my cell phone (in Bootstrap) and the box is there as well.

There looks to be an override hierarchy or conflict that I'm not following. Thanks in advance for any suggestions you can offer.

Don Wagner:

ZC 2.1.0. My Store is set to Showcase with Prices (Admin Option 2), and Add to Cart turned off (Display Product Price/Add to Cart Admin Option 0), yet I still get the Add to Cart box in my Product Listings.

If I switch from ZCA Bootstrap-4 to Responsive Classic - extended, the Add to Cart box disappears.

I'm on a PC BTW It makes no difference what value I set for "Float the Add Selected to Cart button?".

Just checked my cell phone (in Bootstrap) and the box is there as well.

There looks to be an override hierarchy or conflict that I'm not following. Thanks in advance for any suggestions you can offer.

I looked at tpl_product_info_display.php, and the addToCart-card doesn't seem to be conditional based on Showcase setting. I just commented it out for now.

Don Wagner:

ZC 2.1.0. My Store is set to Showcase with Prices (Admin Option 2), and Add to Cart turned off (Display Product Price/Add to Cart Admin Option 0), yet I still get the Add to Cart box in my Product Listings.

If I switch from ZCA Bootstrap-4 to Responsive Classic - extended, the Add to Cart box disappears.

I'm on a PC BTW It makes no difference what value I set for "Float the Add Selected to Cart button?".

Just checked my cell phone (in Bootstrap) and the box is there as well.

There looks to be an override hierarchy or conflict that I'm not following. Thanks in advance for any suggestions you can offer.

Don Wagner:

I looked at tpl_product_info_display.php, and the addToCart-card doesn't seem to be conditional based on Showcase setting. I just commented it out for now.
I'm not sure what version of the Bootstrap template you're using, but on v3.7.8 (latest release), the add-to-cart changes to "Contact Us" when the store is set to "Showcase with Prices". That's done in the get_products_display_price function, present in /includes/functions/functions_prices.php.

lat9:

I'm not sure what version of the Bootstrap template you're using, but on v3.7.8 (latest release), the add-to-cart changes to "Contact Us" when the store is set to "Showcase with Prices". That's done in the get_products_display_price function, present in /includes/functions/functions_prices.php.

I'm using 3.7.8, and was getting both "Add to Cart" text and a "Contact Us" button in the add to cart box. I see now exactly what you're saying - it didn't gel with me at first, as my current store has no references to a cart. But you've me thinking about revamping my "How to Order" page and links to it.

I am using 2.1.0. and haven't turned on side boxes in a while but am giving it a look on this template and so far I really like it. My question is does the template have a Filter option particularly for prices but interested in any others as well. I fished around the menus but no luck. If not, is there a plugin that anyone is aware of that will work with 2.1.0? Thanks in advance.:smile:

Did that but now I have two hamburgers on tablet/mobile

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>

I could use some help, as I am trying to figure out editing the tpl_header.php file to include the search bar in the top nav bar on desktop view as well as move the tagline under the logo and add columns/blocks 2-4 that will either be text or images to fill in the white space. See the jpg mockup vs stock tpl_header. Do I need to create a class ID for the additional blocks to contain text or images as in my Photoshop mock up? I would like these 3 blocks to show up in tablet and mobile view as well.

GoldBuckle:

I could use some help, as I am trying to figure out editing the tpl_header.php file to include the search bar in the top nav bar on desktop view as well as move the tagline under the logo and add columns/blocks 2-4 that will either be text or images to fill in the white space. See the jpg mockup vs stock tpl_header. Do I need to create a class ID for the additional blocks to contain text or images as in my Photoshop mock up? I would like these 3 blocks to show up in tablet and mobile view as well.

I'll note that the search-box can be achieved by simply setting the Bootstrap Template's Enable AJAX Search? setting to false.

For the links, you could start here: https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Note that I searched for "bootstrap 4 add links to header nav bar"

Hi Guys I am upgrading to Zencart 2.1 with the latest Bootstrap template. I need to add pull down menus on the header, where currently I have the EZ pages links. Is there a plug in to do this or it needs code modification. It would be nice if the EZ-pages mechanism was supporting pulldown menus also.