Asked  10 Months ago    Answers:  5   Viewed   10 times

In my woocommerce website, I have changed the cart page, removed the button "update cart" and create 2 buttons to add and remove items of product like I show in this picture:

When I click on the quantity buttons I want to call the same function if I press the button to update the cart.

For this I am using ajax but it doesn't do anything.

First in my function.php file I have this:

  function update_my_cart() {
    // here update then cart
    var_dump("execute");
  }
  add_action( 'wp_ajax_update_my_cart', 'update_my_cart' );    // If called from admin panel
  add_action( 'wp_ajax_nopriv_update_my_cart', 'update_my_cart' );  



    add_action( 'wp_enqueue_scripts', 'rct_enqueue_scripts' );

    if ( ! function_exists( 'rct_enqueue_scripts' ) ) :

    function rct_enqueue_scripts() {
    wp_enqueue_script( 'rct-js', get_template_directory_uri() . '/js/themeCoffee.js', array(), '1.0', true );
    wp_localize_script('rct-js', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php' )));
    }

    endif;

And in my jquery file I have this:

  updatecart = function(qty) {
    var currentVal, data, item_hash, request;
    currentVal = void 0;
    data = void 0;
    item_hash = void 0;
    currentVal = parseFloat(qty);
    request = $.ajax({
      url: 'ajax_object.ajax_url',
      method: 'POST',
      data: {
        quantity: currentVal,
        action: 'update_my_cart'
      },
      dataType: 'html'
    });
    request.done(function(msg) {
      alert('cart update ');
    });
    request.fail(function(jqXHR, textStatus) {
      alert('Request failed: ' + textStatus);
    });
  };   

I obtain this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Because I try to load my_website/cart/ajax_object.ajax_url.

Thanks in advance!

 Answers

3

You have forget this essential process:

add_action('wp_enqueue_scripts', 'add_my_ajax_scripts'); 

function add_my_ajax_scripts() {
    // Here you register your script located in a subfolder `js` of your active theme
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    // Here you are going to make the bridge between php and js
    wp_localize_script( 'ajax-script', 'cart_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

Then you will retrieve "ajaxurl" and "cart_ajax" in your javascript file in "url:":

$.ajax({
  url: cart_ajax.ajaxurl,
  ...
})

Your javascript function will not work. Here are some functional examples of what you need to do:

  • WooCommerce - auto update total price when quantity changed?

  • Wordpress passing ajax value to a specific page using Wordpress

  • Using AJAX With PHP on Your WordPress Site Without a Plugin

  • How to use Ajax with your WordPress Plugin or Theme?

Wednesday, August 11, 2021
 
2

Updated on 2021

For WooCommerce versions from 3.2 to 5+, Optimized jQuery code and Removed a quantity bug. Added quantity reset after add to cart.


The following custom function is hooked in woocommerce_loop_add_to_cart_link filter hook and adds a quantity input field to each product on WooCommerce archives pages and other product loops. We use here mostly the original WooCommerce code.

A bit of jQuery code is necessary to update the data-quantity attribute on the add to cart button when customer changes the quantity. Some styling might be needed, depending on your client wishes (and on your theme).

An additional section to hide the "View cart" button is located at the end.

The code:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update data-quantity
            $(document.body).on('click input', 'input.qty', function() {
                $(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            }).on('click', '.add_to_cart_button', function(){
                var button = $(this);
                setTimeout(function(){
                    button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
                }, 1000); // After 1 second

            });
        });
    </script>
    <?php
}

Code goes in functions.php file of your active child theme (active theme).
Tested and works on WooCommerce version 4.1.1 and WordPress 4.5.1 on Storefront theme.


Hiding "View cart" button (when using Ajax add to cart):

1). You can add this CSS rule to the styles.css file located in your active theme:

a.added_to_cart.wc-forward {
    display:none;
}

2). You can use the following hoocked function (first option is the best way):

add_action( 'wp_head' , 'hide_ajax_view_cart_button' );
function hide_ajax_view_cart_button(){
    if( is_shop() || is_product_category() || is_product_tag() ): ?>
    <style>
        a.added_to_cart.wc-forward {
            display:none;
        }
    </style>
    <?php endif;
}

Code goes in function.php file of your active child theme (active theme).

Thursday, April 1, 2021
 
EnTee
 
1

So i solved the problem. Hope this helps others to.

The most secure and almost "update save" way to make the variable products dropdown menus working, is to load the add-to-cart-variation.min.js after loading a new pair of products again. Please focus on the // Initialize again part:

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

        // Initialize again

        // if wp is installed in a subfolder
        // $.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

        $.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

    });
}

UPDATE

A even better way with caching the script file too! The getScript() is calling the jQuery.get() witch is a shorthand Ajax function of

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

So by calling the getScript() you make an ajax call, and the jQuery did not keep any kind of cache of your files. To cache the file too use the following

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

      // Initialize again

      $.ajax({
          type: "GET",

          // if wp is installed in a subfolder   
          // url: "../sichere-anwendung/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js",

          url: "/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js"),
          cache: true
            });

    });
}
Thursday, April 1, 2021
 
EastSw
 
3

You should try woocommerce_update_cart_action_cart_updated action hook. I have revisited your code a bit. Try this:

add_action( 'woocommerce_update_cart_action_cart_updated', 'on_action_cart_updated', 20, 1 );
function on_action_cart_updated( $cart_updated ){

    $applied_coupons = WC()->cart->get_applied_coupons();

    if( count( $applied_coupons ) > 0 ){
        $new_value        = WC()->cart->get_cart_subtotal();
        $discounted       = WC()->cart->coupon_discount_totals;
        $discounted_value = array_values($discounted)[0];
        $new_value        = $new_value-$discounted_value + 100;

        WC()->cart->set_total( $new_value );

        if ( $cart_updated ) {
            // Recalc our totals
            WC()->cart->calculate_totals();
        }
    }
}

Code goes in function.php file of your active child theme (or active theme). Untested. It could work.

Update: The WC_Cart set_total_price() method doesn't exist… I have replaced it by existing WC_Cart set_total()

Thursday, April 1, 2021
 
5

Here below are the hooks involved in WC_Cart add_to_cart() method:

A) Before an item is added to cart:

  1. Validation filter hook woocommerce_add_to_cart_validation
  2. Item Quantity change filter hook woocommerce_add_to_cart_quantity (not with ajax)
  3. Item Data change filter hook woocommerce_add_cart_item_data (not with ajax)
  4. and some others related to "sold individually" products (see here)

A) After an item is added to cart:

  1. Change cart Item filter hook woocommerce_add_cart_item
  2. Add an event, action hook woocommerce_add_to_cart

To be clear in your case:

  1. As you can see now woocommerce_add_to_cart is not a function but only an action hook.
  2. Hook location: It's located inside WC_Cart add_to_cart() method (at the end of the source code).
  3. When the hook is fired: It's fired once the WC_Cart add_to_cart() method is executed.
  4. What is the purpose: To execute some custom code when this method is executed (event).

Regarding your code:
It should be better to use the dedicated filter hook woocommerce_add_to_cart_validation that will stop customer that want to add a new item to the cart if there is already a product in cart from a different vendor, displaying optionally a custom message:

add_filter( 'woocommerce_add_to_cart_validation', 'filter_add_to_cart_validation', 10, 3 );
function filter_add_to_cart_validation( $passed, $product_id, $quantity ) { 
    if ( WC()->cart->is_empty() ) return $passed;

    // Get the VendorId of the product being added to the cart.
    $current_vendor = get_wcmp_product_vendors($product_id);

    foreach( WC()->cart->get_cart() as $cart_item ) {
        // Get the vendor Id of the item
        $cart_vendor = get_wcmp_product_vendors($cart_item['product_id']);

        // If two products do not have the same Vendor
        if( $current_vendor->id != $cart_vendor->id ) {
            // We set 'passed' argument to false
            $passed = false ;

            // Displaying a custom message
            $message = __( "This is your custom message", "woocommerce" );
            wc_add_notice( $message, 'error' );
            // We stop the loop
            break; 
        }
    }
    return $passed;
}

Code goes in function.php file of your active child theme (or active theme) or in any plugin file.

Tested and works.


Sunday, August 15, 2021
 
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share