Step-by-step instruction for using custom pricing grids with pro-sites

@S H Mohanjith has been kind enough to help me set up custom pricing tables for pro-sites on my website :slight_smile:

  • S H Mohanjith
    • Developer
    function my_scripts_method() {
        wp_register_script( 'pricing-table', get_template_directory_uri() .'/js/my-scripts.js', array('jquery'));
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'pricing-table' );
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    in my-scripts.js

    function my_awesome_pro_sites_wrapper(level, duration) {
      jQuery('psts_level').value(level);
      jQuery('psts_period').value(duration);
    }
  • S H Mohanjith
    • Developer
    function my_scripts_method() {
        wp_register_script( 'pricing-table', get_template_directory_uri() .'/js/my-scripts.js', array('jquery'));
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'pricing-table' );
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    in my-scripts.js

    function my_awesome_pro_sites_wrapper(level, duration) {
      jQuery('psts_level').value(level);
      jQuery('psts_period').value(duration);
    }
  • tangible
    • WPMU DEV Initiate

    Sorry, I'm not a coder so I'm going to need more information than "in my-scripts.js" to be able to use this.

    Also, this isn't quite as important, but when you applied a coupon code, the prices on the old ugly boxes would change accordingly. It would also highlight your current subscription and prevent you from purchasing it. Is there a way to keep that functionality?

    Could you please provide more step-by-step instructions?
    eg: in folder X, open the Y,js document and paste tis code on line 50

  • S H Mohanjith
    • Developer

    Create a directory called js in your theme directory (e.g. wp-content/themes/twentyeleven/js). Create a file called my-scripts.js there and add the code in it.

    Then from your custom pricing table selection event call the function my_awesome_pro_sites_wrapper with the correct level and duration.

    Also, this isn't quite as important, but when you applied a coupon code, the prices on the old ugly boxes would change accordingly. It would also highlight your current subscription and prevent you from purchasing it. Is there a way to keep that functionality?

    Let me flag Aaron to help you with it.

  • Aaron
    • CTO

    Also, this isn't quite as important, but when you applied a coupon code, the prices on the old ugly boxes would change accordingly. It would also highlight your current subscription and prevent you from purchasing it. Is there a way to keep that functionality?

    That would be a lot of custom work, really beyond what I can help with here. For an example you can look at all the conditional code in the checkout_grid() function. Basically it uses lots of php conditionals to apply various classes to each button. The JS and css control the functionality based on those classes.

  • Santosh
    • Design Lord, Child of Thor

    Hello, I tried the above solution and followed the instructions as mentioned above:

    Create a directory called js in your theme directory (e.g. wp-content/themes/twentyeleven/js). Create a file called my-scripts.js there and add the code in it.

    Then I edited the pro-sites page, and called the function as below:

    <script type="text/javascript">
    my_awesome_pro_sites_wrapper(1,1);
    </script>

    However I get the error "Uncaught Typeerror: undefined is not a function", getting the error probably on " jQuery('psts_level').value(level);"

    Probably a few more references are required, it would be great if you could point me in the right direction.

    Thanks, Best Regards,
    Santosh

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.