woocommerce custom ajax top cart

HiI’m trying to get the top cart in woocommerce to update the quantity and price automatically.

I have got it to work to some extent by using this as a template:

Read More

http://www.amberweinberg.com/developing-custom-woocommerce-themes/

The issue is that I need it to use ajax to alter 2 elements not just one,

here is the html I am using in the themes fuctions.php file

                <div class="cartWrapper"> 
                <a href="#" title="Checkout">
                    <div id="cartsummary"><p>
                        <span class="cart-bubble cart-contents"><a class="cart-bubble cart-contents"><?php echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?></a>
                <?php if($woocommerce->cart->get_cart_url() != ''){ $cart=$woocommerce->cart->get_cart_url();}
                else {$cart = home_url().'/cart/';};
                ?></span> 
                    </div> 
                </a>
                <div id="carttotal">
                    <div id="cartprice">
                    <p>
                        <a class="cart-total"><?php echo $woocommerce->cart->get_cart_total() ?></a>
                    </p>
                    </div> 
                    <a class="button" href="#" title="Checkout" type="button">View Basket</a>
                </div>
            </div>

and the code to auto update the cart without refresh:

    // Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php)
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    ?>
    <a class="cart-bubble cart-contents"><?php echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?></a>
    <a class="cart-total"><?php echo $woocommerce->cart->get_cart_total() ?></a>
    <?php

    $fragments['a.cart-contents a.cart-total'] = ob_get_clean();

    return $fragments;

}

The issue is that whilst this works it produces a long list of cart totals and items in the cart which I have to hide using css style oveflow:hidden on the relevant element. Presumably this is because I have coded the ajax element wrongly, can anyone point me in the right direction?

Thanks

Related posts

Leave a Reply

1 comment

  1. Try this:

    Functions.php

    add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
    
    function woocommerce_header_add_to_cart_fragment( $fragments ) 
    {
        global $woocommerce;
        ob_start(); ?>
    
        <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> <?php echo $woocommerce->cart->get_cart_total(); ?></a>
    
        <?php
        $fragments['a.cart-contents'] = ob_get_clean();
        return $fragments;
    }
    

    Cart Code:

    <div class="header_cart">
        <h5><a href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php _e('Shopping Cart', 'home-shopper'); ?></a></h5>
        <div class="cart_contents">
            <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> <?php echo $woocommerce->cart->get_cart_total(); ?></a>
        </div>
    </div>