Conversation
supportI have been exploring the use of this plugin for an ecommerce (WooCommerce) Checkout application. What I would like to do is to update the progress bar dynamically based on which sections of the Checkout form have been filled in. Is there a way to achieve this with this plugin? I am assuming I will need some AJAX/jQuery code for this. https://wordpress.org/plugins/progress-bar/
It’s possible. You’d want to use a do_shortcode in your code and pass a variable (either via PHP or javascript) into the shortcode to change the bar. I haven’t explored the idea of doing it purely with javascript before (you’ll need to basically hack the CSS that renders the bar) but a PHP solution would look something like this: $progress = 50; // This is your variable that you want to be dynamic. This would be fed from some other part of your site. echo do_shortcode( '[wppb progress=' . $progress . ' location=inside]' ); If you’re doing it purely with CSS, you wouldn’t need the do_shortcode , you’d just need to find the right CSS selector to hijack the bar, probably something like jQuery( 'div.wppb-progress > span' ) . The bars are using the same code shown in this tutorial ( http://css-tricks.com/css3-progress-bars/ ) so you can cross-reference your js with that tutorial. Hope that helps! Let me know what you figure out! I’d love to see the result. 🙂
Hi Chris With your help and a bit of experimentation with jQuery code, I am able to get the desired functionalit,y, i.e. the Progress Bar live updates as the Checkout fields are validated. I would really like to release this code to the WordPress.org repository. Essentially, it is a few lines of PHP code (in functions.php) and 1 JS file. What do you suggest? I was thinking of making this as a plugin. I know lots of other people (that do not wish to buy the commercial plugins) would benefit from it.
Here is the code I added to get the Progress Bar working with Woocommerce as a Checkout Progress Bar. https://gist.github.com/amitramani/4192ff2b4a8ec7230fa24b3fa0583991
It’s possible. You’d want to use a do_shortcode in your code and pass a variable (either via PHP or javascript) into the shortcode to change the bar. I haven’t explored the idea of doing it purely with javascript before (you’ll need to basically hack the CSS that renders the bar) but a PHP solution would look something like this: $progress = 50; // This is your variable that you want to be dynamic. This would be fed from some other part of your site. echo do_shortcode( '[wppb progress=' . $progress . ' location=inside]' ); If you’re doing it purely with CSS, you wouldn’t need the do_shortcode , you’d just need to find the right CSS selector to hijack the bar, probably something like jQuery( 'div.wppb-progress > span' ) . The bars are using the same code shown in this tutorial ( http://css-tricks.com/css3-progress-bars/ ) so you can cross-reference your js with that tutorial. Hope that helps! Let me know what you figure out! I’d love to see the result. 🙂
Hi Chris With your help and a bit of experimentation with jQuery code, I am able to get the desired functionalit,y, i.e. the Progress Bar live updates as the Checkout fields are validated. I would really like to release this code to the WordPress.org repository. Essentially, it is a few lines of PHP code (in functions.php) and 1 JS file. What do you suggest? I was thinking of making this as a plugin. I know lots of other people (that do not wish to buy the commercial plugins) would benefit from it.
Here is the code I added to get the Progress Bar working with Woocommerce as a Checkout Progress Bar. https://gist.github.com/amitramani/4192ff2b4a8ec7230fa24b3fa0583991