ZCA Bootstrap 4 Template [Support Thread]

lat9:

I've just submitted v3.1.2 of the Bootstrap 4 Template for the Zen Cart moderators' review. I'll post back here when it's available for download (https://www.zen-cart.com/downloads.php?do=file&id=2191).

 This release contains changes associated with the following GitHub issues:

#50: Correct unwanted background coloring for EZ-Pages' footer links.
#52: Header-messages were being hidden by the upper nav-bar.
#53: Reduce the 'footprint' associated with the inline styling.
#54: Additions to the admin's ZCA Bootstrap Colors tool, pulling in the add-to-cart card and buttons.
#56: Correct 'return-to' page when adding multiple items from SNAF pages.
#57: products_new and specials pages missing manufacturers_id for listing output.
#58: HTML-related changes for the admin's ZCA Bootstrap Colors tool.
Now available for download.

Does this deal with the button in product lists allowing it to not be pale gray?

What class is that element or where does the flexbox override come in because that needs to be a different color. I tried

.input-group-prepend {
color: #ff9900;}

but that does zip and neither of the other classes seem to impact it either which leads me to believe it's the flexbox aspect

On another related to that space question on the regular product pages I added an up/down button easy peazy however not so easy on the product listing page with entire categories listed dozens of skus.

What would make the add to cart quantity box perfect is an up/down arrow here too that way a person can be on a category and using their finger tap up or down units on as many skus as they like in a given category thus reducing navigation.

Can someone point me to that file? As I said the actual individual product listings were easy to find but I am not sure where the entire category listings box is casuing a ripple impact on these two interrelated things

JimmyV:

Does this deal with the button in product lists allowing it to not be pale gray?

What class is that element or where does the flexbox override come in because that needs to be a different color. I tried

.input-group-prepend {
color: #ff9900;}

but that does zip and neither of the other classes seem to impact it either which leads me to believe it's the flexbox aspect
Unfortunately, those add-to-cart button coloring updates missed that "Add" element on listing pages. That'll be something to tackle next time.

JimmyV:

On another related to that space question on the regular product pages I added an up/down button easy peazy however not so easy on the product listing page with entire categories listed dozens of skus.

What would make the add to cart quantity box perfect is an up/down arrow here too that way a person can be on a category and using their finger tap up or down units on as many skus as they like in a given category thus reducing navigation.

Can someone point me to that file? As I said the actual individual product listings were easy to find but I am not sure where the entire category listings box is casuing a ripple impact on these two interrelated things
All the Bootstrap-4 product-related listings (products, specials, new, all, featured and search-results) are formatted via /includes/modules/bootstrap/product_listing.php; that's where you can add the up/down counter for the multiple-add-to-cart form.

Thanks I will look closer as I didn't see it in that file.

Not sure if this is the right place but, common items bring me here.

Two sites:

FFirst is 1.5.5a with only changes of late being the installation of the new USPS mod.
Second is new 1.5.7c test site that looks like a lat9 mod demo site of all the latest versions:P

Neither is using the bootstrap template BUT,

Console on the 1.5.5a says the YOUR_ADMIN/includes/bootstrap.min.css.map is a 403

Console on the 1.5.7c says> DevTools failed to load source map: Could not parse content for https://test.com/admin/includes/css/bootstrap.min.css.map: Unexpected end of JSON inputTest and admin are, of course, not real AND the file is not there as it was not included in 1.5.5a

I'm wondering what commonality lies between the two situations. Does the new USPS need bootstrap?

If a site is not using bootstrap, does the map need to be loaded?

Picture straw -- Picture me grasping

THANX

dbltoe:

Not sure if this is the right place but, common items bring me here.

Two sites:

FFirst is 1.5.5a with only changes of late being the installation of the new USPS mod.
Second is new 1.5.7c test site that looks like a lat9 mod demo site of all the latest versions:P

Neither is using the bootstrap template BUT,

Console on the 1.5.5a says the YOUR_ADMIN/includes/bootstrap.min.css.map is a 403

Console on the 1.5.7c saysTest and admin are, of course, not real AND the file is not there as it was not included in 1.5.5a

I'm wondering what commonality lies between the two situations. Does the new USPS need bootstrap?

If a site is not using bootstrap, does the map need to be loaded?

Picture straw -- Picture me grasping

THANX
The new USPS doesn't need the bootstrap processing for its operations. The bootstrap.min.css.map message is admin-only, noting that the admin's processing since zc156 is also Bootstrap-based.

Guess I'll have to find another straw.

dbltoe:

Guess I'll have to find another straw.
It'd be easier for me to help to find that straw, if only I knew what the straw is trying to slurp! In other words, what's the issue you're trying to solve?

I am just not getting what is going on. I've done a complete search of the 1.5.5a site and can find no reference of where the boootstrap.min.css.map might be called or required. Yet, I get the 403. When I add the file, I get the Unexpected end of JSON input that I get on the 1.5.7c site.

Since neither is posting any warning or error, I'm hoping to find some correlation that can get me in the area of the problem. I am not making any sense of stack overflow or any other source trying to explain Unexpected end of JSON input and nothing specific to Zen Cart.

In short, I may need to know the answer in order to describe the problem.:huh:

Might be isolated to my systems but IOS doesn't like mobile checkout steps on this template and several columns do not show and you can't navigate over to them either. I solved this by removing the trash column as that function is solved by the quantity column. I also removed per item price on checkout which isn't really needed either as you still have total price.

Another issue that seems to just be IOS is the number in the quantity box again on mobile on say an X or non plus device the number is not visible because the "space" is designated I think a 4 but it really needs to be a 7 or 8 to allow the font to easily be seen.

Didn't act well on actual devices nor when I checked it on the emulators. I actually had a client tell me as she uses and iphone could have sworn it was good prior to going live but the IOS I don't generally use and perhaps missed this on setup

JimmyV:

Might be isolated to my systems but IOS doesn't like mobile checkout steps on this template and several columns do not show and you can't navigate over to them either. I solved this by removing the trash column as that function is solved by the quantity column. I also removed per item price on checkout which isn't really needed either as you still have total price.

Another issue that seems to just be IOS is the number in the quantity box again on mobile on say an X or non plus device the number is not visible because the "space" is designated I think a 4 but it really needs to be a 7 or 8 to allow the font to easily be seen.

Didn't act well on actual devices nor when I checked it on the emulators. I actually had a client tell me as she uses and iphone could have sworn it was good prior to going live but the IOS I don't generally use and perhaps missed this on setup
Are you referring to the 'base', 3-page checkout? I don't own any iStuff, so it's difficult for me to do any i-related testing.

I'll grant that I've not done extensive testing over the past months on the 3-page checkout process.

Yes it has a 3 stage checkout did you normally use a different kind?

In the new Edge you can enter the page you want then hit 3 dots under the X and then go to more tools and then you can hit developer tools and it will give you an emulation model which can be altered from format to format to see how your template looks on various systems.

I believe android detects page sizing issues and automatically adjusts but i devices appear not to according to my client as well as this emulator. SO by altering a few things it is fine sadly now I forget how exactly I did it so I need to loop back to it I had to alter several things to get the layout identical in i and android it is a live site or I'd have a compare which now I need to check the backup prework

@dbltoe you can disable the use of maps if you don't use them. Right click > Inspect > click Gear > uncheck Enable CSS source maps. (There's also one for JavaScript.)

JimmyV:

Yes it has a 3 stage checkout did you normally use a different kind?

In the new Edge you can enter the page you want then hit 3 dots under the X and then go to more tools and then you can hit developer tools and it will give you an emulation model which can be altered from format to format to see how your template looks on various systems.

I believe android detects page sizing issues and automatically adjusts but i devices appear not to according to my client as well as this emulator. SO by altering a few things it is fine sadly now I forget how exactly I did it so I need to loop back to it I had to alter several things to get the layout identical in i and android it is a live site or I'd have a compare which now I need to check the backup prework
Most of my Bootstrap template checkout testing has been done with the One-Page Checkout (and associated BS-4 template updates) enabled. It'll take me a while to find some time to get your environment set up for testing.

I am mentioning it in case people use the template that way to keep and eye out I don't think it's possible to fit so many columns like tpl file has like that in a mobile pixel space so you just toast the ones as noted as they really are repetitive plus I believe you need to adjust modules pages shopping cart quantity space size to, in my case 24, as people can order in the hundreds of a specific sku but if you do single or double digit the box size can be much smaller. I looked at adjusting space and paddings etc it's just not going to look good with so many columns shrunk like that. You have quantity, refresh, item, price, total, trash across an apple 8 or whatever just not alot of pixels there to have all that IMO

ZC v157c
ZCA Bootstrap 4 v3.1.2
One Page Checkout v2.3.8
ZCA Bootstrap 4 for OPC v1.0.0

In Firefox using Guest Checkout, we're encountering an issue where "City" is autofilling "Address 2" field, leaving the "City" field blank. What is the best way to resolve this? Thanks!

RoseStar:

ZC v157c
ZCA Bootstrap 4 v3.1.2
One Page Checkout v2.3.8
ZCA Bootstrap 4 for OPC v1.0.0

In Firefox using Guest Checkout, we're encountering an issue where "City" is autofilling "Address 2" field, leaving the "City" field blank. What is the best way to resolve this? Thanks!
In most browsers, on most templates, this is an issue. Other than setting those fields as non-autofill (which would cause some customer complaints), I'm not sure what could be done within the template itself.

I've just submitted v1.0.1 of the Bootstrap-4/OPC integration for the Zen Cart moderators' review; I'll post back here when it's available for download.

This version contains changes only to /includes/templates/bootstrap/css/checkout_one.css, correcting the display of the CSS overlay during guest checkout.