SOLVED: Quantity selector and WooCommerce Composite Products

Bugs
1

There seems to be a conflict between Bricks and WooCommerce Composite Products which is causing the quantity selector to not work correctly. The function bricksWooQuantityTriggers() is not properly targeting the span elements which need the .brx-initialized class added. This issue is only present when using the quantity selector on Composite Products pages, as the form element is replaced with a div with a class of .component_options.

Video: https://vimeo.com/822107323/3ddbf9303e?share=copy

function bricksWooQuantityTriggers() {
var quantityButtons = bricksQuerySelectorAll(document, ‘form .quantity .action’)

quantityButtons.forEach(function (button) {
	// @since 1.7.1 - Skip already initialized button
	if (button.classList.contains('brx-initialized')) {
		return
	}

	// @since 1.7.1 - Add initialized class to prevent re-initialization
	button.classList.add('brx-initialized')

	button.addEventListener('click', function (e) {
		e.preventDefault()

		// Only update cart if quantity input is not readonly (@since 1.7)
		var quantityInput = e.target.closest('.quantity').querySelector('.qty:not([readonly])')

		if (!quantityInput) {
			return
		}

		var updateCartButton = document.querySelector('button[name="update_cart"]')

		if (updateCartButton) {
			updateCartButton.removeAttribute('disabled')
			updateCartButton.setAttribute('aria-disabled', 'false')
		}

		if (e.target.classList.contains('plus')) {
			quantityInput.stepUp()
		} else if (e.target.classList.contains('minus')) {
			quantityInput.stepDown()
		}

		// Trigger change event for product quantity input (@since 1.7)
		const quantityInputEvent = new Event('change', { bubbles: true })
		quantityInput.dispatchEvent(quantityInputEvent)
	})
})

}

2

Hi Corby,
Thanks so much for your report!

Since it’s a paid plugin, would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Best regards,
timmse

3

Hi @cbodenburg ,

Thanks for the email login details and the video.
Yes, we can replicate the issue. The root cause is Bricks JavaScript code executed before Composite products JavaScript finish generated some additional DOMS, causing some quantity buttons not init.
(Actually, each step has one quantity input)

Already recorded in the bug tracker.

For the time being, you can place this code in Bricks > Settings >Custom Code > Body (footer) scripts

<script>
document.addEventListener('DOMContentLoaded', function (event) {
	setTimeout(() => {
		bricksWooQuantityTriggers()
	}, 100)
})
</script>

Regards,
Jenn

4

Hi Corby,

We’ve fixed this issue in Bricks 1.8 beta 2, now available as a manual download in your account.

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on any production/live website. It is only meant for testing in a local/staging environment.

1 Like