Woocommerce“添加到购物车” ajax

Question

On the product category page, when someone clicks "Add to cart", woocommerce 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: 'woocommerce_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?

Answer 1

If you look here from the Woocommerce 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 Woocommerce 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 comb through these files for any differences that could break functionality or cause a security issue.