Sitepoint "Redeem code" tutorial for Woocommerce problems

Viewed 953

I am trying to implement "redeem coupon" functionality in a Woocommerce store, I have already found useful tutorial, but I can't make it work properly.

This is the tutorial.

What I've already done:

  1. Created new page template with this code:

    <div class="redeem-coupon">
    <form id="ajax-coupon-redeem">
        <p>
            <input type="text" name="coupon" id="coupon"/>
            <input type="submit" name="redeem-coupon" value="Redeem Offer" />
        </p>
        <p class="result"></p>
    </form><!-- #ajax-coupon-redeem -->
    

  2. Added this to my theme's functions.php file:

    add_action( 'wp_ajax_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' ); 
    add_action( 'wp_ajax_nopriv_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
    
  3. Added this to my theme's functions.php file:

    function spyr_coupon_redeem_handler() {
    
       // Get the value of the coupon code
      $code = $_REQUEST['coupon_code'];
    
    // Check coupon code to make sure is not empty
    if( empty( $code ) || !isset( $code ) ) {
    // Build our response
    $response = array(
        'result'    => 'error',
        'message'   => 'Code text field can not be empty.'
    );
    
    header( 'Content-Type: application/json' );
    echo json_encode( $response );
    
    // Always exit when doing ajax
    exit();
        }
    
    // Create an instance of WC_Coupon with our code
    $coupon = new WC_Coupon( $code );
    
    // Check coupon to make determine if its valid or not
    if( ! $coupon->id && ! isset( $coupon->id ) ) {
    // Build our response
    $response = array(
        'result'    => 'error',
        'message'   => 'Invalid code entered. Please try again.'
    );
    
    header( 'Content-Type: application/json' );
    echo json_encode( $response );
    
    // Always exit when doing ajax
    exit();
    
    } else {
    // Coupon must be valid so we must
    // populate the cart with the attached products
    foreach( $coupon->product_ids as $prod_id ) {
        WC()->cart->add_to_cart( $prod_id );
    }
    
    // Build our response
    $response = array(
        'result'    => 'success',
        'href'      => WC()->cart->get_cart_url()
    );
    
    header( 'Content-Type: application/json' );
    echo json_encode( $response );
    
    // Always exit when doing ajax
    exit();
        }
    }
    
  4. Created "kody.js":

    jQuery( document ).ready( function() {
    jQuery( '#ajax-coupon-redeem input[type="submit"]').click( function( ev ) {
    
    // Get the coupon code
    var code = jQuery( 'input#coupon').val();
    
    // We are going to send this for processing
    data = {
        action: 'spyr_coupon_redeem_handler',
        coupon_code: code
    }
    
    // Send it over to WordPress.
    jQuery.post( woocommerce_params.ajax_url, data, function( returned_data ) {
        if( returned_data.result == 'error' ) {
            jQuery( 'p.result' ).html( returned_data.message );
        } else {
            // Hijack the browser and redirect user to cart page
            window.location.href = returned_data.href;
        }
    })
    
    // Prevent the form from submitting
    ev.preventDefault();
    }); 
    });
    
  5. Called the script from functions.php with this code:

    function my_scripts_method() {
    wp_register_script('kody',
    get_template_directory_uri() . '/js/kody.js',
    array('jquery'),
    '1.0' );
    enqueue the script
    wp_enqueue_script('kody');
    }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    

And here's the weird thing: it's sort of working. I've setup a page where I can enter the coupon code, I paste the code, click "Redeem" and it adds products related to the coupon to the cart. It doesn't, however apply pre-defined discounts.

The "redeem coupon" page is also only half-working. It should display error messages when someone leaves the field empty or enters an incorrect code - and it only does the former. Entering incorrect code results in redirection to cart.

My knowledge on Ajax and JS is very limited, I tried to find some other tutorials, but without any luck.

Is something wrong with the code? It's from 2014, so something might have change in Wordpress engine, causing troubles.

Thank you in advance for any reply!

Regards

1 Answers
Related