ZCA Bootstrap 4 Template [Support Thread]

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

This release contains changes associated with the following GitHub issues:

#68: Enable the definition of a site-specific CSS file.
#104: Sideboxes are not disabled if COLUMN_xx_STATUS or SET_COLUMN_xx_STATUS is set to '0'.
#105: Stray <ul> present in the site_map page's template.
#107: checkout_payment_address incorrectly identifies shipping (not billing) address as current.
#108: HTML validation error in breadcrumbs.
#110: MySQL Fatal error in AJAX Search on strict MySQL 5.7 installations.
#111: Missing space between class names for dropdown menus.
#113: Enable interoperation with COWOA's no_account page.
#117: Accessibility 'tweaks'.
#118: HTML validation error in listing pagination when ellipsis is required.
#119: Document how to transfer color customizations from a test site to its live version.

lat9:

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

This release contains changes associated with the following GitHub issues:

#68: Enable the definition of a site-specific CSS file.
#104: Sideboxes are not disabled if COLUMN_xx_STATUS or SET_COLUMN_xx_STATUS is set to '0'.
#105: Stray <ul> present in the site_map page's template.
#107: checkout_payment_address incorrectly identifies shipping (not billing) address as current.
#108: HTML validation error in breadcrumbs.
#110: MySQL Fatal error in AJAX Search on strict MySQL 5.7 installations.
#111: Missing space between class names for dropdown menus.
#113: Enable interoperation with COWOA's no_account page.
#117: Accessibility 'tweaks'.
#118: HTML validation error in listing pagination when ellipsis is required.
#119: Document how to transfer color customizations from a test site to its live version.
Now available for downloading: https://www.zen-cart.com/downloads.php?do=file&id=2191

Hello all,

I am having some display issue while on mobile. (see screenshots)

When i go on product listing, the product pictures don t seem to be resizing properly somehow.

On main page, the center box display the product just fine ( using SWGuy mods for 2 product display)

What could be doing this? I am using Image Handler as well. Could it be interfering with the picture resizing on small size screen?

Thank you for your help

nicksab:

Hello all,

I am having some display issue while on mobile. (see screenshots)

When i go on product listing, the product pictures don t seem to be resizing properly somehow.

On main page, the center box display the product just fine ( using SWGuy mods for 2 product display)

What could be doing this? I am using Image Handler as well. Could it be interfering with the picture resizing on small size screen?

Thank you for your help
This is one of those cases where a link to the site displaying the behavior would help.

lat9:

This is one of those cases where a link to the site displaying the behavior would help.

Sorry for the delayed response. I just managed to get the site on a live server. I was working on it with Xampp

the site is at http://www.royal-fleur.com/upgrade

The mobile display is really messing up for me. I must have done something bad somewhere but no clue what.

Thanks Lat9 for looking into it as well as the OPC missing. I really appreciate it

nicksab:

Sorry for the delayed response. I just managed to get the site on a live server. I was working on it with Xampp

the site is at http://www.royal-fleur.com/upgrade

The mobile display is really messing up for me. I must have done something bad somewhere but no clue what.

Thanks Lat9 for looking into it as well as the OPC missing. I really appreciate it

I'll jump in if I may. I am not familiar with the Bootstrap template but, if I inspect one of the images I see that the CSS is applying a minimum width to them (also affecting your non-mobile page), this code

.listingProductImage {min-width: 300px;}

I would check whether you really need it.

Upto date info in my sig.

Please bare with me as it is a few years since using Zencart.

I am just about to install this template and looking at the install instructions in the docs just want confirmation I am going to do this correctly, as having the install issues I had I want this a bit smoother.

I am a bit confused by this "If you haven't made any changes to the Zen Cart 'base' version of /includes/modules/order_total/ot_coupon.php, you can simply copy that file from the template's distribution. Otherwise, you'll need to merge the one marked section with your store's version of the file."

There are no changes made to my install, do I copy the above file from the templates folder and overwrite it to zencart /includes/modules/order_total/ot_coupon.php overwritting the file already there?

Thanks

simon1066:

I'll jump in if I may. I am not familiar with the Bootstrap template but, if I inspect one of the images I see that the CSS is applying a minimum width to them (also affecting your non-mobile page), this code

.listingProductImage {min-width: 300px;}

> 
> I would check whether you really need it.

Simon,

Thanks for helping.  I am not a  bootstrap  pro  and learning as  I go as  well.

I saw the min-width css via the developer console as well and wondering if it is needed.

When it is removed, the image are displayed properly but  i have no  idea if it is  affecting  anything  else.

Any bootstrap expert can advise on this, please?

Thank you

nicksab:

Simon,

Thanks for helping. I am not a bootstrap pro and learning as I go as well.

I saw the min-width css via the developer console as well and wondering if it is needed.

When it is removed, the image are displayed properly but i have no idea if it is affecting anything else.

Any bootstrap expert can advise on this, please?

Thank you

One way to check would be to search the Bootstrap fileset for 'listingProductImage' to see where it's used.

Angiex1:

Upto date info in my sig.

Please bare with me as it is a few years since using Zencart.

I am just about to install this template and looking at the install instructions in the docs just want confirmation I am going to do this correctly, as having the install issues I had I want this a bit smoother.

I am a bit confused by this "If you haven't made any changes to the Zen Cart 'base' version of /includes/modules/order_total/ot_coupon.php, you can simply copy that file from the template's distribution. Otherwise, you'll need to merge the one marked section with your store's version of the file."

There are no changes made to my install, do I copy the above file from the templates folder and overwrite it to zencart /includes/modules/order_total/ot_coupon.php overwritting the file already there?

Thanks
If you've made no changes to the Zen Cart "base", you can safely copy all the files in the Bootstrap template's distribution to your store's file directory.

Thank you,

simon1066:

One way to check would be to search the Bootstrap fileset for 'listingProductImage' to see where it's used.

Using built in developer tool, i got the following:

/includes/templates/bootstrap/css/stylesheet_zca_colors.php

Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;}

Would the removal of it solve my display issue? I am not sure how it would affect the template as it seems to be only in the color stylesheet.

Thank you again all for helping

nicksab:

Using built in developer tool, i got the following:

/includes/templates/bootstrap/css/stylesheet_zca_colors.php

Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;}

Would the removal of it solve my display issue? I am not sure how it would affect the template as it seems to be only in the color stylesheet.

Thank you again all for helping

I see, the min width uses the value of the product Listing image width. That being said, simply adjusting the width of the image of the product listing might be sufficient to solve your issue (probably something I should have thought of from the start). I wouldn't remove it.

The width of the image is set in Admin > Images > Image - Product Listing Width

Just a few WAG's here. Bootstrap 4 incorporates a lot that responsive_classic does not. Ajax Search, some image handling and control of columns in Product Listing.

I'm thinking you may be loading extra things with bootsstrap that are fighting with these features.

I would first check Admin >> Configuration >> Product Listing >> Product Listing - Columns Per Row to make sure it is set for 0 versus the recommended 3. This will allow bootstrap to properly work with your product images.

dbltoe:

Just a few WAG's here. Bootstrap 4 incorporates a lot that responsive_classic does not. Ajax Search, some image handling and control of columns in Product Listing.

I'm thinking you may be loading extra things with bootsstrap that are fighting with these features.

I would first check Admin >> Configuration >> Product Listing >> Product Listing - Columns Per Row to make sure it is set for 0 versus the recommended 3. This will allow bootstrap to properly work with your product images.

Are you saying that Image Handler is not needed with bootstrap template? That would be great. I am just used to the automatic resizing with IH ( instead of uploading small/medium/ large pics)

I double and triple check the setting and it is set to 0. :(

Removing Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;} seems to fix the issue I have.

I am just scare of creating more problem down the line by taking things out like this. Any thoughts on this?

Can my "homemade " bootstrap menu be contributing to the issue?

Thanks all for helping

nicksab:

Are you saying that Image Handler is not needed with bootstrap template? That would be great. I am just used to the automatic resizing with IH ( instead of uploading small/medium/ large pics)

I double and triple check the setting and it is set to 0. :(

Removing Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;} seems to fix the issue I have.

I am just scare of creating more problem down the line by taking things out like this. Any thoughts on this?

Can my "homemade " bootstrap menu be contributing to the issue?

Thanks all for helping
Image Handler is a great addition to the Bootstrap 4 template and the combination is in use in a fair number of sites.

Since "that line" doesn't wreck havoc with the demo products (and a 3/6/3 layout), what layout do you have configured in the Bootstrap Template settings' Responsive Left/Center/Right Column Widths?

The "homemade" menu has some issues when viewed in a small landscape or small portrait mode. That'll be a matter of working out the CSS and associated Bootstrap classes required.

lat9:

Image Handler is a great addition to the Bootstrap 4 template and the combination is in use in a fair number of sites.

Since "that line" doesn't wreck havoc with the demo products (and a 3/6/3 layout), what layout do you have configured in the Bootstrap Template settings' Responsive Left/Center/Right Column Widths?

The "homemade" menu has some issues when viewed in a small landscape or small portrait mode. That'll be a matter of working out the CSS and associated Bootstrap classes required.

Since i am not using the right column, it is currently set to 3/9/0.

Left column width is set to 200px even though it has no influence on bootstrap if I understand it correctly.

The"homemade" menu is definetely a work in progress. It is my first attempt at bootstrap and was trying to mimic CSS_mega_menu.

Upto ate info in sig.

I want to make some changes to my site and know that I can do this with this template, but some of the changes may not be doable with the template.
Would it be advisable to use the clone a template once have made the changes or before? so if any upgrades happen I can use the copy template

Angiex1:

Upto ate info in sig.

I want to make some changes to my site and know that I can do this with this template, but some of the changes may not be doable with the template.
Would it be advisable to use the clone a template once have made the changes or before? so if any upgrades happen I can use the copy template
I'll suggest ... both. Clone the base 'bootstrap' template and make your 'clone' the active one. If you're preparing to make substantial changes, clone your clone so you have a backup.

Thank you, will do that :)