In jQuery possiamo implementare una soluzione per l'aggiunta di un prodotto alla wish list di WooCommerce.

Definiamo il seguente codice nel template di WooCommerce single-product/meta.php:


<a class="wishlist-add" href="#" data-customer="<?php if( is_user_logged_in() ): echo get_current_user_id(); else: ?>0<?php endif; ?>" data-product="<?php echo get_the_ID(); ?>">
    <?php _e( 'Aggiungi alla wish list', 'textdomain' ); ?>
</a>

Creiamo la action AJAX nel file functions.php del nostro tema:


function my_add_to_wish_list() {
    $product_id = $_POST['product'];
    $user_id = (int) $_POST['customer'];
    $output = '';

    if( $user_id === 0 ) {
        $output = __( 'Effettua il login o registrati', 'textdomain' );
    } else {
        $list = get_user_meta( $user_id, 'wishlist', true );
        $data = array();
        if( empty( $list ) ) {
            update_user_meta( $user_id, 'wishlist', $product_id );
            
        } else {
            $items = explode( ',', $list );
            $in = array();
            if( in_array( $product_id, $items ) ) {
                
                $in[] = $product_id;
                foreach( $items as $item ) {
                    if( $item !== $product_id ) {
                        $in[] = $item;
                    }
                }
            } else {
                $in = $items;
                $in[] = $product_id;
            }

            update_user_meta( $user_id, 'wishlist', implode( ',', $in ) );
        }

        $output = __( 'Wish list aggiornata!', 'textdomain' );
    }
    echo $output;
    exit;
}

add_action( 'wp_ajax_my_wishlist', 'my_add_to_wish_list' );
add_action( 'wp_ajax_nopriv_my_wishlist', 'my_add_to_wish_list' );

Infine usiamo jQuery:


(function( $ ) {
    $(function() {
        if( $( ".wishlist-add" ).length ) {
            $( ".wishlist-add" ).click(function() {
                var $btn = $( this );
                $.post( "/wp-admin/admin-ajax.php", {
                    action: "my_wishlist", 
                    customer: $btn.data( "customer" ),
                    product: $btn.data( "product" )
                    }, function( message ) {
                        console.log( message );
                });
                return false;
            });
        }
    });
})( jQuery );