• Resolved Butazi

    (@butazi)


    I am trying to fix an issue on wordpress where I want to redirect the add-to-cart button to the checkout page. There was a solution found here.

    But this part I don’t get:

    add this bit of javascript anywhere after the wp-e-commerce.js is called in the header :

    jQuery(function($) {
    $(“form.product_form, .wpsc-add-to-cart-button-form”).die(‘submit’).live(‘submit’, function() {
    return confirm(‘Proceed to Checkout?’);
    });
    });”

    I pasted the code right after the wp_head(); but the page won’t load.

    I’m not super savy with this stuff but I can put the piece together with some help. Where should the jQuery go? Is the code messed up?

Viewing 10 replies - 1 through 10 (of 10 total)
  • That’s old enough code that the some of it officially deprecated (the live() function).

    What about Roy’s solution to turn on the fancy notifications and give the user the ability to go to checkout?

    Thread Starter Butazi

    (@butazi)

    Thanks for responding Andrew,

    Fancy notifications are already enabled. However we are only selling 1 product. So there is no reason to add that notification for them to keep browsing. It would be more ideal for them to go straight to checkout for a shorter sales funnel as well.

    That, and it’s also what the client is requesting.

    I guess the more correct code is

    jQuery(function($) {
    $(“form.product_form, .wpsc-add-to-cart-button-form”).die(‘submit’).live(‘submit’, function() {
    return true;
    });
    });

    What version of wpec are you using (hopefully the latest)? I’ll look at the js.

    Thread Starter Butazi

    (@butazi)

    We currently are on version 3.8.12.1

    Much appreciated Andrew. We also are using a premium theme that allows for custom js if that helps.

    So, I don’t have a raw wpec test environment set up (I’ll do it if we need to), and this is totally off the cuff, but, they are firing a trigger near the end of the ajax success script: jQuery( document ).trigger( { type : 'wpsc_fancy_notification', response : response } );

    You could try listening for that.

    jQuery(document).ready(function() {
    
      jQuery(document).on('wpsc_fancy_notification',function() {
        window.location = 'my checkout url';
      });
    });

    I would also suggest rather than adding custom js from a theme you do it the WordPress way and explicitly declare that your js has a dependency on the wpec js (the third parameter of wp_register_script). Add that stuff as a new js file called listener.js somewhere in your theme. Then, in functions.php:

    add_action( 'wp_enqueue_scripts', 'enqueue_my_listener' );
    function enqueue_my_listener()
      wp_register_script('my-listener','/path/to/your/js/listener.js',array('wp-e-commerce') );
      wp_enqueue_script('my-listener');
    }
    Thread Starter Butazi

    (@butazi)

    I’m having a bit of trouble digesting what you said, my apologies.

    jQuery(document).ready(function() {
    
      jQuery(document).on('wpsc_fancy_notification',function() {
        window.location = 'my checkout url';
      });
    });

    So what am I doing with the code above? I’m creating that code and putting it in a folder.

    This is what I have

    jQuery(document).ready(function() {
    
      jQuery(document).on('wpsc_fancy_notification',function() {
        window.location = '/checkout';
      });
    });

    Is the function.php code correct? I noticed a closed bracket with no open bracket to go along with it. Would would the open bracket be inserted (if needed)

    Currently this is what the code looks like on my end

    add_action( 'wp_enqueue_scripts', 'enqueue_my_listener' );
    function enqueue_my_listener()
      wp_register_script('my-listener','/wp-content/plugins/wp-e-commerce/wpsc-theme/listener.js',array('wp-e-commerce') );
      wp_enqueue_script('my-listener');
    }

    Sorry for my lack of skill. Let me know if I’m on the right track.

    No worries, we all started somewhere, and it’s not like I’m some WordPress master anyway. Yes, I did omit an opening bracket.

    You should create a new file with the jQuery(document)… code in it and it should be a javascript file (has a .js extension). That can go anywhere, but it’s easy to keep organized if you just put it in your theme. I wouldn’t suggest putting it in the wp-e-commerce directory, as I believe that gets completely nuked when you upgrade.

    Because WordPress is a templating system, meaning it renders pages dynamically based on content from the database and from multiple script files, you don’t add javascript in a <script>…</script> tag in your <head> like you would on a “normal” site. Functions.php is an excellent sandbox to paste in code until you get the hang of making one-time plugins for client sites.

    What you’re doing, step by step, is “hooking” the function enqueue_my_listener onto the action wp_enqueue_scripts with the add_action call. When WordPress runs the code, do_action('wp_enqueue_scripts'), all functions hooked that will be executed.

    In the function itself, first you are registering your script file with WordPress.

    The first argument ‘my-listener’ is arbitrarily named, but it’s helpful to name is something like the javascript file. If you were going to refer to it later (which you do in wp_enqueue_script), that’s what you’d refer to it by.

    The second parameter is the path to the file, pretty self explanatory.

    The third parameter is where you declare dependencies for your script. Meaning, this script will not be included until everything it is dependent on has been included as well. That way, you can be sure that the wpec js has already been included before you script is.

    Then, you’re running wp_enqueue_script, which is actually what puts the <script src=”…”></script> into the generated web page (I’m generalizing here).

    Make sense?

    Thread Starter Butazi

    (@butazi)

    Ok! Update!

    It worked!

    I clicked add-to-cart and the fancy notification popped up but the page did go to checkout. Then I disabled fancy notifications and boom! It work works perfectly!

    Thank you so much Andrew!

    Edit: reading your previous post. It all is making a lot of sense now!

    You are the man!

    Word. You’re welcome. Happy coding.

    I know the forum folks like to see as many topics resolved as possible so if you could mark this topic as such that’d be helpful please.

    Thread Starter Butazi

    (@butazi)

    Done and Done!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding jquery to head section’ is closed to new replies.