NO BUG: Add to cart button not working good with icons and hasnt got any options to text too

Bugs
1

Bricks Version: 1.6.2
Hi!

I use it with query builder!
I wanted make only icons add to cart button (my custom SVG icons). I see, I can add icons to

  • add to cart
  • Adding
  • Added states

Add to cart state is working, all of other not show icons, only text.

On the other hand the texts and icons hasnt got different classes (example only a “span” the add to cart text, so i can make custom css) I tried to only add a whitespace to the custom text, but it not working, because it really add the space. :smiley:

Thirdly, the “view cart” state hasnt got ANY options in bircks editor. :frowning:

Tha ajax feature (open the minicart) is bad, only flash a second and after gone.

image
image730×523 99.9 KB

1 Like
2

Hi @simplecreative ,

Thank you very much for reporting the issues.

  1. Add to cart state is working, all of other not show icons
  • Assuming you are talking about AJAX add to cart. Please note that the Bricks AJAX settings (1.6.1) only apply to Single product’s add to cart button instead of the looping product. (Changelog – Bricks)

  1. Currently there is no way to remove the Add to cart text unless using a custom CSS to hide the span in the button.

  2. View cart state

  • The AJAX in looping product is handled by native WooCommerce (Enable AJAX add to cart buttons on archives)
  • Currently no style settings for it in Bricks.
  1. AJAX open mini cart only flash a second
  • Could you elaborate more on this or a video recording for me to check on?

Regards,
Jenn

3

Hi!

For flashing minicart i found the problem.

A script from an older solution got stuck. I deleted it from Bricks > Options > Custom scripts footer, and problem is gone.


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
    jQuery(document.body).on('added_to_cart', function(){
    	document.querySelectorAll(".bricks-woo-toggle").forEach(function(e) {
			let startTimer = null;
			let endTimer = null;

			startTimer = setTimeout( function() {
				e.click();
			}, 700 );

			endTimer = setTimeout( function() {
				clearTimeout(startTimer);
				e.click();
			}, 4500 );

			e.closest('.brxe-woocommerce-mini-cart').querySelector('.cart-detail').addEventListener('mouseover', function(){
				clearTimeout(endTimer);
			});
        });
    });
});
</script>
1 Like