javascript - Woocommerce "Add to cart" ajax - Stack Overflow

admin管理员组

文章数量:1419666

On the product category page, when someone clicks "Add to cart", woomerce adds "View cart" below this button through Ajax. I found that the script which handle this is /assets/js/frontend/add-to-cart.js

Now, I want to add also "Procceed to checkout", so someone can go to checkout immediately.

This is the output of the script:

jQuery( function( $ ) {

// wc_add_to_cart_params is required to continue, ensure the object exists
if ( typeof wc_add_to_cart_params === 'undefined' )
    return false;

// Ajax add to cart
$( document ).on( 'click', '.add_to_cart_button', function(e) {

// AJAX add to cart request
var $thisbutton = $( this );

if ( $thisbutton.is( '.product_type_simple' ) ) {

    if ( ! $thisbutton.attr( 'data-product_id' ) )
        return true;

    $thisbutton.removeClass( 'added' );
    $thisbutton.addClass( 'loading' );

    var data = {
        action: 'woomerce_add_to_cart',
    };

    $.each( $thisbutton.data(), function( key, value ) {
        data[key] = value;
    });

    // Trigger event
    $( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

    // Ajax action
    $.post( wc_add_to_cart_params.ajax_url, data, function( response ) {

        if ( ! response )
            return;

        var this_page = window.location.toString();

        this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );

        if ( response.error && response.product_url ) {
            window.location = response.product_url;
            return;
        }

        // Redirect to cart option
        if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {

            window.location = wc_add_to_cart_params.cart_url;
            return;

        } else {

            $thisbutton.removeClass( 'loading' );

            fragments = response.fragments;
            cart_hash = response.cart_hash;

            // Block fragments class
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).addClass( 'updating' );
                });
            }

            // Block widgets and fragments
            $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
                message: null,
                overlayCSS: {
                    opacity: 0.6
                }
            });

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

            // View cart text
            if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
                $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                    wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
            }

            // Replace fragments
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).replaceWith( value );
                });
            }

            // Unblock
            $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();

            // Cart page elements
            $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {

                $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();

                $( 'body' ).trigger( 'cart_page_refreshed' );
            });

            $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
                $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
            });

            // Trigger event so themes can refresh other areas
            $( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash, $thisbutton ] );
        }
    });

    return false;

}

return true;
});

Is there anybody who has done something similar?

On the product category page, when someone clicks "Add to cart", woomerce adds "View cart" below this button through Ajax. I found that the script which handle this is /assets/js/frontend/add-to-cart.js

Now, I want to add also "Procceed to checkout", so someone can go to checkout immediately.

This is the output of the script:

jQuery( function( $ ) {

// wc_add_to_cart_params is required to continue, ensure the object exists
if ( typeof wc_add_to_cart_params === 'undefined' )
    return false;

// Ajax add to cart
$( document ).on( 'click', '.add_to_cart_button', function(e) {

// AJAX add to cart request
var $thisbutton = $( this );

if ( $thisbutton.is( '.product_type_simple' ) ) {

    if ( ! $thisbutton.attr( 'data-product_id' ) )
        return true;

    $thisbutton.removeClass( 'added' );
    $thisbutton.addClass( 'loading' );

    var data = {
        action: 'woomerce_add_to_cart',
    };

    $.each( $thisbutton.data(), function( key, value ) {
        data[key] = value;
    });

    // Trigger event
    $( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

    // Ajax action
    $.post( wc_add_to_cart_params.ajax_url, data, function( response ) {

        if ( ! response )
            return;

        var this_page = window.location.toString();

        this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );

        if ( response.error && response.product_url ) {
            window.location = response.product_url;
            return;
        }

        // Redirect to cart option
        if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {

            window.location = wc_add_to_cart_params.cart_url;
            return;

        } else {

            $thisbutton.removeClass( 'loading' );

            fragments = response.fragments;
            cart_hash = response.cart_hash;

            // Block fragments class
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).addClass( 'updating' );
                });
            }

            // Block widgets and fragments
            $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
                message: null,
                overlayCSS: {
                    opacity: 0.6
                }
            });

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

            // View cart text
            if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
                $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                    wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
            }

            // Replace fragments
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).replaceWith( value );
                });
            }

            // Unblock
            $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();

            // Cart page elements
            $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {

                $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();

                $( 'body' ).trigger( 'cart_page_refreshed' );
            });

            $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
                $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
            });

            // Trigger event so themes can refresh other areas
            $( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash, $thisbutton ] );
        }
    });

    return false;

}

return true;
});

Is there anybody who has done something similar?

• javascript
• ajax
• wordpress
• woomerce
• cart

Share Improve this question Follow edited Jun 4, 2015 at 4:47 Rohil_PHPBeginner 6,08022 gold badges2323 silver badges3232 bronze badges asked Jun 3, 2015 at 21:28 TomTomTomTom 3722 silver badges88 bronze badges 2

• Once the item is added to the cart, a link appears that takes the user to the cart. What are you trying to do differently? – helgatheviking Commented Jun 3, 2015 at 21:35
• There is a basket and there is a checkout. Checkout is last step in the proccess of the payment 1. nanshy./basket 2. nanshy./checkout I want to take a user immediately to checkout or to basket. So basically I just need to add one more link below "View basket" – TomTom Commented Jun 3, 2015 at 21:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If you look here from the Woomerce repo, you can see that add-to-cart.js is localized from that class.

Unfortunately, there isn't a filter to just add your own link. What you could try is copying add-to-cart.js to your theme and set the new src of the registered add-to-cart.js to your new local copy, by using this method.

From there you can alter the this conditional found in Woomerce repo.

So, technically yes, you could could this, but there are caveats:

• You would need to repeat this process for variation products
• If translation is a concern, you need to address that as well
• Any time the plugin updates, you now have to b through these files for any differences that could break functionality or cause a security issue.

本文标签： javascriptWoocommerce quotAdd to cartquot ajaxStack Overflow