[Resolved] Quantity buttons + and – click event interfere because of to wide of a selector

Home Forums Support Quantity buttons + and – click event interfere because of to wide of a selector

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1438892
    Jaime Martinez

    Hola! First of all, thank you for GP Premium, loving it!

    # Description
    I found out that within GP Premium the woocommerce.js is interfering with other “quanity input’s behaviour” generated by the “woocommerce_quantity_input” function. This because the selector within woocommerce.js within GP Premium is targeting the “products own” quantity input a bit to greedy / wide.

    Currently is:
    quantityBoxes = $( 'div.quantity:not(.buttons-added), td.quantity:not(.buttons-added)' ).find( quantitySelector );

    # Fix
    Fixes the issues by adding form in front of it, which is the <form> element around.

    Fix (tested locally):
    quantityBoxes = $( 'form div.quantity:not(.buttons-added), td.quantity:not(.buttons-added)' ).find( quantitySelector );

    # Example
    I’m using WP Clever – Product Bundles plugin which add quantity inputs of bundled products to the page. When clicking on the [ + ] button of “main products” quantity input, then all the other fields also get uppped +1. While it should only +1 the input of itself.

    Bundle A / Quantity = 1

    Bundle sub-products:
    product A / quantiy = 2
    product B / quantity = 1
    product C / quantity = 1

    Currently when upping the Bundle quantity, also sets Product B and C to “2”.

    I think other Bundle plugins will experience this also.

    # Versions
    I’m running everything on the latest version.

    # Question
    Would you consider adding the CSS class as a fix?

    # Reference
    https://wordpress.org/plugins/woo-product-bundle/

    screenshot of quantity inputs

    Kind regards,

    Jaime Martinez!

    https://jaimemartinez.nl

    #1438970
    David
    Staff
    Customer Support

    Hi there,

    the problem is the Qty buttons that GP adds is not just for the Cart – they are also displayed on single products.

    But you can disable the Display Qty Buttons in Customizer > Layout > Woocommerce:

    https://docs.generatepress.com/article/woocommerce-overview/#single-product

    #1439006
    Jaime Martinez

    Hi David, thank you for your quick reply.

    The .cart CSS class doens’t related to the Cart page because the CSS class of the <form> element on that page is .woocommerce-cart-form. On the single page, that CSS class is .cart.

    Double checking my solution is that I prefixed the CSS selector with form instead of .cart to fix the issue. Because it only targets the “quantity” of the product and not other quantity input field. This way this solution also works on the Single product page && on the Cart page.

    I will update my previous code-snippet above.

    Also, I don’t want to disable these buttons, I would like them to not interfere with other quantity inputs.

    Kinds regards,

    Jaime

    https://jaimemartinez.nl

    #1439016
    David
    Staff
    Customer Support

    Aah ok – we’ll take a closer look at what we can do with that.

    #1439736
    Tom
    Lead Developer
    Lead Developer

    Thanks for the heads up here! Should be fixed in 1.12.0. We’ll be releasing alpha.1 on Monday if you’d like to test πŸ™‚

    #1443964
    Jaime Martinez

    Thank you very much for the swift reply && solution!

    Will check it out!

    https://jaimemartinez.nl

    #1444530
    Tom
    Lead Developer
    Lead Developer

    No problem! alpha.1 is now available if you’d like to confirm that it’s fixed πŸ™‚

    #1444681
    Jaime Martinez

    Yupp it works!

    https://jaimemartinez.nl

    #1444756
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for letting me know! πŸ™‚

    #1446558
    Chris

    Hi! I’ve been having a similar problem with SomewhereWarm’s Product Bundles plugin for WooCommerce: the plus and minus quantity buttons weren’t changing the quantity in either single product page or cart. The alpha release fixed this (great!) but there’s still a minor glitch in the styling.

    Product Bundle:
    Product-bundle

    Single item:
    Single-product

    I thought it would be a good idea to mention this here rather than start a new thread.

    #1447460
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link us to that page so we can take a closer look at the CSS?

    Thanks!

    #1447868
    Chris

    Sorry about that! Should’ve provided a link… πŸ˜…

    The site is still in development, but I’ve made a copy of a product bundle page (link in the private information).

    Hope this helps!

    #1447941
    David
    Staff
    Customer Support

    Hi there,

    The bundle button is injecting some hidden HTML between the qty and the add to cart button. Simple fix with a little CSS:

    .bundle_button {
        display: flex;
        align-items: center;
    }
    #1447980
    Chris

    Great! That helped a lot.

    For some reason the product bundle add to cart button was also shorter than the single product button, so I added this CSS to adjust it:

    .single_add_to_cart_button {
        height: 50px;
    }

    That seems to have done the trick.

    #1448266
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.