WooCommerce Cart qty buttons only showing after reloading

1 Views

I have created a copy of the cart template in my child theme and made some custom changes to the cart behaviour (CSS side cart like in hibr.com). I have these cart-related snippets in my header.php: 

<div class="close-me2"></div>
<?php echo do_shortcode('[woocommerce_cart]'); ?>




<div class="cart-outer" data-user-set-ocm="<?php echo $userSetSideWidgetArea; ?>">
        <div class="cart-menu-wrap">
            <div class="cart-menu">
                <a class="cart-contents" href="<?php //echo $woocommerce->cart->get_cart_url(); ?>"><div class="cart-icon-wrap"><i class="icon-salient-cart"></i> <div class="cart-wrap"><span><?php echo $woocommerce->cart->cart_contents_count; ?> </span></div> </div></a>
            </div>
        </div>



<div id="side-cart">
<div class="close-me2"></div>
<?php echo do_shortcode('[woocommerce_cart]'); ?>

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    <div class="widget-area">
        <?php dynamic_sidebar( 'sidebar-4' ); ?>
    </div>
<?php endif; ?>

Read More

Unfortunately it seems like whenever adding a product to the cart, the “wrong” cart is shown ever since no quantity buttons ” – + ” are displayed. After refreshing the page, the cart is displayed WITH the qty buttons: http://screencast.com/t/gzkb6QPfz

I have installed this plugin as well: wordpress.org/plugins/woocommerce-ajax-add-to-cart-for-variable-products/changelog/

These were the custom changes I’ve added to it, ever since my side-cart needs to be triggered: 

// Changes button classes
            $thisbutton.addClass( 'added' );

            var rightVal = 0; // base value
            $('#side-cart').animate({right: rightVal + 'px'}, {queue: false, duration: 500});

            $('.cart-outer a').attr("href", "javascript:void(0)");



            $('#side-cart .woocommerce').removeAttr('style');

            $('#side-cart .widget-area').removeAttr('style');


            $('.cart_empty3').attr('style', 'display:none !important;');

That all seems to me that some script is not loading properly after adding a product into cart, but I have no clue on where to start looking for the bug.

If you have an idea, let me know please. I will share a link for the website if needed, ever since I currently have http auth running.

Thanks!

Post Views: 1

Related posts

2 comments

  1. I have solved the displaying issue after overwriting the quantity-input.php like this:

    <div class="quantity buttons_added">
<input type="button" value="-" class="minus">
	<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="button" value="+" class="plus"></div>
</div>

    and using this jquery to give the qty buttons a trigger as well:

    jQuery(document).ready(function($){
    $('.quantity').on('click', '.plus', function(e) {
        $input = $(this).prev('input.qty');
        var val = parseInt($input.val());
        $input.val( val+1 ).change();
    });

    $('.quantity').on('click', '.minus', 
        function(e) {
        $input = $(this).next('input.qty');
        var val = parseInt($input.val());
        if (val > 0) {
            $input.val( val-1 ).change();
        } 
    });
});

    However now the issue remains that after adding a product into cart, the qty buttons “+” and “-” are only clickable after reloading the page.

    Seems to me the jquery isn’t loaded properly. Do you have a clue about that or is my jquery wrong?

    Thanks!

  2. Update:

    I have solved the issue by modifying the jQuery like this:

    jQuery(document).on('click', '.quantity .plus', function(e) {
    $input = jQuery(this).prev('input.qty');
    var val = parseInt($input.val());
    $input.val(val + 1).change();
}).on('click', '.quantity .minus', function(e) {
    $input = jQuery(this).next('input.qty');
    var val = parseInt($input.val());
    if(val > 0) {
        $input.val(val - 1).change();
    }
});

Comments are closed.