ZCA Bootstrap 4 Template [Support Thread]

Not without a link to the site.

zamzom:

[ZC 1.5.8][Bootstrap 3.5.2]
Back-to-top button is sometimes covering important buttons.
This is may be more of a style question but is there a way to push this button towards outside the main block meanwhile reducing rest of the block size especially on desktop view?

Have you tried this?

In your css for the button insert clear:both (if clear:left or clear:right do not work)

https://www.w3schools.com/cssref/pr_class_clear.php

and/or apply margins eg margin-top:1em

https://www.w3schools.com/cssref/pr_margin-top.php

hope this helps

dw08gm:

Have you tried this?

In your css for the button insert clear:both (if clear:left or clear:right do not work)

https://www.w3schools.com/cssref/pr_class_clear.php

and/or apply margins eg margin-top:1em

https://www.w3schools.com/cssref/pr_margin-top.php

hope this helps
I *think *that this could be solved via a CSS z-index setting; I'll take a look (eventually).

As a suggestion, a template option to disable this button would be nice.

I have removed it from includes/templates/bootstrap/common/tpl_main_page.php on quite a few sites.

This would be more of a feature request, but is there an easy way to have the "Newsletter Subscribe" checkbox also featured on the checkout page?

It would be the same exact code as seen on the Account Creation page, I'd imagine.

Here's why. Since we have guest checkout, we want the opportunity to capture as many newsletter subscribers as possible. These are people who may not create an account, or perhaps may have forgotten that we offer a newsletter after they created their account.

By also displaying the "Subscribe to our Newsletter" box on the checkbox page, it gives us one more opportunity to increase our mailing list since there's more daily orders vs daily account creations.

Could you tell me what code to copy into which file in order to make that one of the boxes? It could look just like it does on the account creation page: https://i.postimg.cc/FHZHXvGH/Electricc-Touch-Dimensions.png

swguy:

As a suggestion, a template option to disable this button would be nice.

I have removed it from includes/templates/bootstrap/common/tpl_main_page.php on quite a few sites.

Jeff_Mash:

This would be more of a feature request, but is there an easy way to have the "Newsletter Subscribe" checkbox also featured on the checkout page?

It would be the same exact code as seen on the Account Creation page, I'd imagine.

Here's why. Since we have guest checkout, we want the opportunity to capture as many newsletter subscribers as possible. These are people who may not create an account, or perhaps may have forgotten that we offer a newsletter after they created their account.

By also displaying the "Subscribe to our Newsletter" box on the checkbox page, it gives us one more opportunity to increase our mailing list since there's more daily orders vs daily account creations.

Could you tell me what code to copy into which file in order to make that one of the boxes? It could look just like it does on the account creation page: https://i.postimg.cc/FHZHXvGH/Electricc-Touch-Dimensions.png
I've created GitHub issues to note these requests; they *should *be included in the next template release.

Hi There,

Has anyone had any luck with webp images with bootstrap carousel, I've tried but no success.

Thanks in advance.

Using the carousel ... how? I can't think of a reason why that image type wouldn't work.

my testing code is below

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="images\banners\Toronto.webp" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h5>Toronto</h5> <p>Hello</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="images\banners\PRIME-Header.webp" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h5>Fever-Tree</h5> <p>Mixers</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="images\banners\Essentia.webp" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h5>Essentia</h5> <p>Water</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

the webp images not appear but if I use .jpg they do.

allmart:

Hi There,

Has anyone had any luck with webp images with bootstrap carousel, I've tried but no success.

Thanks in advance.

What version of Zencart?

Does the browser's dev tools give any clues? Perhaps under the Console or Network tabs.

simon1066:

What version of Zencart?

Does the browser's dev tools give any clues? Perhaps under the Console or Network tabs.

1.5.7d

no errors or clues in the dev tools

lat9:

Not without a link to the site.
test site:
https://www.allmart.ca/store/

allmart:

test site:
https://www.allmart.ca/store/

I don't have a solution to hand but carousel images show in Firefox, not in Chrome or Edge though.

It might be that Chrome's being more picky than Firefox about all those <script></script> and <style></style> elements sprinkled through the header and the slideshow.

The HTML validator (https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.allmart.ca%2Fstore%2F) has a bunch of 'bad' things to say!

simon1066:

I don't have a solution to hand but carousel images show in Firefox, not in Chrome or Edge though.

I just discovered that when using webp for any of my images on my test site, they don't appear.

You might take a look at https://optipic.io/en/webp/zencart/

Suppoasedly, you can keep your png, gif, jpg for those browsers that do not play well with webp but the connection will present the image in webp if the browser is compatible.

Inspecting a .webp image in Chrome dev tools shows a mixture of back and forward slashes in the src path. It seems that Firefox does a better job at resolving this mixture than the other two browsers.

https://www.allmart.ca/store/images\banners\Toronto.webp

They should all be forward slashes, I suspect this is the way in which they were added to the slider, possibly by copying the relative path from Notepad or such like. I haven't seen the other instances of .webp images throughout the site but hopefully the same is happening there.

simon1066:

Inspecting a .webp image in Chrome dev tools shows a mixture of back and forward slashes in the src path. It seems that Firefox does a better job at resolving this mixture than the other two browsers.

https://www.allmart.ca/store/images\banners\Toronto.webp

> 
> They should all be forward slashes, I suspect this is the way in which they were added to the slider, possibly by copying the relative path from Notepad or such like. I haven't seen the other instances of .webp images throughout the site but hopefully the same is happening there.

Changed all to forward slashes with no effect.

allmart:

Changed all to forward slashes with no effect.

Well, the slider images are showing for me in Chrome and Edge now. Perhaps clearing browser cache might help.

Edit: Actually you've reverted the slider images to .jpg (with nivo slider) so scrap the above.

Ok, I think I know the why. Visiting this image in chrome, dev tools shows it as having a type of 'document', it should be 'webp'

https://www.allmart.ca/store/images/banners/PRIME-Header.webp

So you can rule out the slider plugin. I don't have the answer though, possibly server or .htaccess related.