CODEWITHSUNDEEP
phpjqueryajaxwordpresswoocommerce
user1192309
user1192309

Reputation: 57

Wordpress - using Ajax on Woocommerce add to cart button shortcodes

I have a pretty strange problem with a custom build I am doing in Wordpress. I am using hooks to overwrite a starter theme's 'add-to-cart' button on a custom page showing products. The weird thing is that when I loop through the add-to-cart button to add quantity options on my products, the original Ajax function disappears. I then implemented another function to add it back in (and cause my custom 'view cart' button's items-in-cart number to update) but although it works in the cart, it doesn't seem to be working for my custom shop page.

I am using this snippet in my header to handle the cart contents:

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

$count = WC()->cart->cart_contents_count;
?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php 
if ( $count > 0 ) {
    ?>
    <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
    <?php
}
    ?></a>

And here are my two functions in my child-theme functions.php:

/**
 * Ensure cart contents update when products are added to the cart via AJAX
*/

function my_header_add_to_cart_fragment( $fragments ) {

ob_start();
$count = WC()->cart->cart_contents_count;
?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
if ( $count > 0 ) {
    ?>
    <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
    <?php            
}
    ?></a><?php

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

return $fragments;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );


/**
 * Add quantity to products in Products Page
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
    $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    $html .= woocommerce_quantity_input( array(), $product, false );
    $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
    $html .= '</form>';
}
return $html;
}

I think that my second function adding a new add-to-cart button is overwriting the initial Ajax functionality, but everything I try to do to add this functionality back in is not working. I'm not the best at JS/jQuery so it's probably that I'm not implementing my code properly.

Any help with this would be much appreciated.

Upvotes: 3

Views: 3117

Answers (1)

Tristup
Tristup

Reputation: 3663

Need to add another classes to the button i.e add_to_cart_button & ajax_add_to_cart. Hope this will do for you.

Upvotes: 1

Related Questions