Ajaxify submitting the woocommerce review form

Since the default behavior breaks the shopping experience in my opinion, I would like to use Ajax to submit the woocommerce review form.

I’ve used jQuery.ajax() to post the form but If someone is not logged in, all I get back are errors. Even when all the form fields (rating, comment, author and email address) are filled out.

Read More

Please help me out!

Edit — added the code I tried

jQuery('document').ready(function($){

    $( '#review_form' ).append( '<div id="comment-status"></div>' );

    var commentform = $('#commentform'); 
    var statusDiv   = $('#comment-status')

    commentform.submit(function(){  

        var formdata    = commentform.serialize(); 
        var formurl     = commentform.attr('action'); 

        statusDiv.html( '<p class="wdpajax-error">Bezig met verwerken...</p>' ); 

        $.ajax({  

            type: 'post',  
            url: formurl,  
            data: formdata,  

            error: function( XMLHttpRequest, textStatus, errorThrown ) {

                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);

                statusDiv.html( '<p class="alert alert-danger" >Je hebt een van de verplichte velden leeg gelaten of te snel nog een reactie geplaatst</p>' ); 

            },  

            success: function( data, textStatus ) {  

                if( textStatus == "success" )  { 

                    commentform.hide();                 
                    statusDiv.html(' <p class="alert alert-success" ><strong>Bedankt voor je beoordeling!</strong> Het kan even duren voordat hij op de site verschijnt, aangezien we hem nog moeten controleren</p>' );  

                } else { 

                    statusDiv.html( '<p class="alert alert-warning">Je hebt een van de verplichte velden leeg gelaten of te snel nog een reactie geplaatst</p>' );  
                    commentform.find( 'textarea[name=comment]' ).val( '' );  

                }

            } 

        });

        return false;    

    });     

});

Related posts