ZCA Bootstrap 4 Template [Support Thread]

I am officially taking this template out of (BETA) stage! :yes:

This will be the new Support Thread moving forward.

Download at: https://www.zen-cart.com/downloads.php?do=file&id=2191

As of v1.0.4

• Bootstrap 4.

• Responsive.

• 3 Column Layout (removes right column on product info, shopping cart & checkout pages).

• Option to include the Product Notification and Manufacturer Info side boxes on the product info pages.

• Mobile Friendly Drop Down Menu.

• Tabbed Login Page.

• Order Progress Bar on Checkout Pages.

• Modals replace popup Windows (except shipping estimator).

• Optional Additional Images Modal w/ Carousel.

• Option to have all Listing Pages use a Columnar Layout (products_new, featured_products, products_all and index&cPath).

• No (almost NO) Stylesheet.

• Added Color Stylesheet.

• Demo is here: https://zc158.vinosdefrutastropicales.com/zc158/index.php?main_page=index

Formatting of attributes with images are broken due to extra closing divs (</div></div>) in includes/modules/bootstrap/attributes.php. Radio buttons could not be clicked. Moved zen_draw_radio_field ahead of label in case 4 to be consistent with other cases to correct. Issue opened in github and fix sent to Cindy

badarac:

Formatting of attributes with images are broken due to extra closing divs (</div></div>) in includes/modules/bootstrap/attributes.php. Radio buttons could not be clicked. Moved zen_draw_radio_field ahead of label in case 4 to be consistent with other cases to correct. Issue opened in github and fix sent to Cindy

Okay,

Cindy, note this issue is not present in the GitHub files. Not sure if it's present in ZC files, don't see how for last 2 updates were taking directly from GitHub. I'll look more into this one but stumped on how ZC files differ.

rbarbour:

Okay,

Cindy, note this issue is not present in the GitHub files. Not sure if it's present in ZC files, don't see how for last 2 updates were taking directly from GitHub. I'll look more into this one but stumped on how ZC files differ.

I did download the zip from plugins again and the extra /div is defiantly there. I also found it in the file on github (around line 270).

badarac:

I did download the zip from plugins again and the extra /div is defiantly there. I also found it in the file on github (around line 270).

You are correct sir,

I'll update GitHub as time permits and include fix in next release.

Would you be interested in incorporating your flexible footer module into this? I really like this template but think it's missing a good footer section. Or, if not, can you please advise on if you think it would be relatively easy to integrate or would there be a lot of conflicts?

lankeeyankee:

Would you be interested in incorporating your flexible footer module into this? I really like this template but think it's missing a good footer section. Or, if not, can you please advise on if you think it would be relatively easy to integrate or would there be a lot of conflicts?

No, I have no plans to incorporate any plugins into this template (my own or third party) . @lat9 or I may choose specific plugins to include template-overrides for, to bring in the BS classes like I did for One-Page Checkout, simply a thanks to @lat9 for all her awesome work on this template. I made the decision to trust & empower @lat9 to do as she wishes with the Github repository and this template. If she chooses to incorporate any plugins, I don't have an issue with that.

This template like my Responsive DIY Template Default template were build as starter templates. This template will require one to learn Bootstrap for most catalog side appearance plugins will need tweaking to be used with this template or at least bring in the BS look and feel.

I have Flexible Footer Menu Multilingual installed on a test template and NO, there is no conflicts with the BS framework (even with the class "col"), However an additional div should be placed in the tpl_footer.php file to clear the floats.

<div class="clearfix"></div>

Great, thanks for the tip on the footer. I will start digging into bootstrap more and compare it with foundation to see which way I'm headed. I appreciate all of your contributions, best of luck with your new B&M endeavor!

Does this template work with V1.5.4 or 1.5.1 of ZenCart?

harlock:

Does this template work with V1.5.4 or 1.5.1 of ZenCart?

This template has only been tested on v1.5.5f by myself, I haven't done any backward compatibility testing.

Does this template allow color changes or replacing colors with backbground images in header bars (sidebox header, main top header etc)?

turuga:

Does this template allow color changes or replacing colors with backbground images in header bars (sidebox header, main top header etc)?

This template "out-of-box" inherits the Bootstrap > Utilities > Colors classes.

I include a colors stylesheet: /includes/templates/bootstrap/css/stylesheet_colors.css, which include some examples where I used colors outside the BS framework which override BS color classes.

I also added element ID's where possible due to the way BS adjoins several classes and can be frustrating when trying to override the BS classes.

So, yes, you can add color changes or replace colors with background images.

I created a new stylesheet called stylesheet_zcustom.css to put any modifications to the color or any other styling. This prevents losing any customization when upgrading the template.

I like this template very much as I find it easier customizable than responsive classic for the likes of me: changing color or background image of headers.

It seems some or one css files are called from outside website: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css.

Perhaps at beta stage it was done so? should all css be downloaded somehwhere?
Thanks.

turuga:

It seems some or one css files are called from outside website: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css.

Perhaps at beta stage it was done so? should all css be downloaded somehwhere?
Thanks.

No, that was and is intentional...

The Bootstrap CSS framework is loaded via the BootstrapCDN, this file controls the look and feel.

Any and all CSS additions & overrides should be put in either the /includes/templates/bootstrap/css/stylesheet_colors.css or /includes/templates/bootstrap/css/stylesheet.css files or as @lankeeyankee suggested, create a new file /includes/templates/bootstrap/css/stylesheet_zcustom.css

If you choose to do a custom download of the bootstrap CSS framework, it should be called where the BootstrapCDN link is called or overrides will not be picked up.

Hi Rbarbour,

Is there way to change these colors or insert background image from my side? pls see the attached image. If so, how for the IT illiterate? thank you.

turuga:

Hi Rbarbour,

Is there way to change these colors or insert background image from my side? pls see the attached image. If so, how for the IT illiterate? thank you.

Either edit the stylesheet_colors.css file or (in my opinion) create a new stylesheet as I mentioned in my previous post. The reason I call it stylesheet_zcustom is because anything starting with stylesheet_ is loaded on every page by zen cart's default behavior. And css cascades alphabetically so zcustom will load last and take precedence over anything else unless the class or ID is marked !important in a different sheet or is overridden by an inline style.

In your new sheet simply add .list-group-item {background-color: YOUR COLOR}

For a background image it would be .list-group-item {background-image: YOUR IMAGE; background-color: YOUR COLOR} You always want a background color in case the image becomes unavailable for some reason.

Thank you Lankeeyankee, i will try your suggestions.

But it seems like the shipping module does not work. I use zone rates. I use 5-6 zones. When the template is changed to responsive classic, the shipment module works, i.e. a visitor can choose country and get shipping cost estimated. But not with Bootstrap (can't choose country). Do you see the same?

rbarbour:

No, that was and is intentional...

The Bootstrap CSS framework is loaded via the BootstrapCDN, this file controls the look and feel.

Any and all CSS additions & overrides should be put in either the /includes/templates/bootstrap/css/stylesheet_colors.css or /includes/templates/bootstrap/css/stylesheet.css files or as @lankeeyankee suggested, create a new file /includes/templates/bootstrap/css/stylesheet_zcustom.css

If you choose to do a custom download of the bootstrap CSS framework, it should be called where the BootstrapCDN link is called or overrides will not be picked up.

This is an amazing template. Does anybody encounter any shipping module issue? I wonder if I am an exception.

turuga:

This is an amazing template. Does anybody encounter any shipping module issue? I wonder if I am an exception.

What issue are you encountering? I just activated zone rates and works fine for me.