Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Enqueue the JS File, Add Progress Bar to Checkout Page
/* Enqueue the JS File for manipulating the Progress Bar */
function my_theme_scripts() {
wp_enqueue_script( 'wc-checkout-progress-bar', get_stylesheet_directory_uri() . '/js/wc-checkout-progress-bar.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
/* Add the Progress Bar to the Checkout Page */
function ar_add_progress_bar(){
echo do_shortcode('[wppb progress=50 option="animated-candystripe purple" location=inside fullwidth=true]');
}
add_action('woocommerce_checkout_before_customer_details', 'ar_add_progress_bar');
/*! jquery.observe.js v0.0.1 | MIT License | gist.github.com/yckart/c893d7db0f49b1ea4dfb */
jQuery.observe = function (method, getter) {
// store the original handler function
var originalMethod = jQuery.fn[method];
jQuery.fn[method] = function () {
// cache $(this)
var self = this;
// store the old value
var oldValue = getter.call(self, arguments);
// execute the original hanlder and store its return value
var result = originalMethod.apply(self, arguments);
// store the new value
var newValue = getter.call(self, arguments);
// trigger the custom event and pass the stored old & new value
self.trigger(method, [oldValue, newValue]);
// return the result from the original handler.
return result;
};
};
/*! jquery.observe.class.js v0.0.1 | MIT License | gist.github.com/yckart/c893d7db0f49b1ea4dfb */
(function ($) {
var methods = ['addClass', 'toggleClass', 'removeClass'];
jQuery.each(methods, function (index, method) {
jQuery.observe(method, function () {
return this.className;
});
});
}(window.jQuery || window.Zepto));
var $node = jQuery('.form-row')
.on('addClass removeClass', function (e, oldClass, newClass) {
//console.log('Changed from %s to %s due %s', oldClass, newClass, e.type);
});
jQuery(".form-row").on('addClass removeClass', function(e){
// Count number of Fields that require validation
var numFields = jQuery('.validate-required').length;
// Count number of Fields that Require Validated and Have Been Validated
var validatedFields = jQuery('.validate-required.woocommerce-validated').length;
// Check whether Shipping and Billing Addresses match
if (jQuery(".shipping_address").css('display') == 'none')
{
// Count the number of fields that belong to Shipping Address
var numShippingFields = jQuery(".shipping_address > .validate-required").length;
// Count the number of fields that belong to Shipping Address
var numShippingValidatedFields = jQuery(".shipping_address > .validate-required.woocommerce-validated").length;
numFields = numFields - numShippingFields;
validatedFields = validatedFields - numShippingValidatedFields;
//console.log('Number of Shipping Fields = ' + numShippingFields);
//console.log('Number of Shipping Validated Fields = ' + numShippingValidatedFields);
}
// Get the width of the Progess Bar in Pixels
var widthOfProgressBar = jQuery(".wppb-wrapper").width();
// Start at 25% progress
var barWidth = (widthOfProgressBar * 3)/(4 * numFields);
var progress = widthOfProgressBar/4 + validatedFields * barWidth;
var progressPixels = progress + "px";
var insideText = validatedFields + "/" + numFields;
if (progressPixels > widthOfProgressBar)
{
progressPixels = widthOfProgressBar;
insideText = numFields + "/" + numFields;
}
//jQuery('#billing_company').val(barWidth);
// Set the Progress of the Bar
jQuery('div.wppb-progress > span').css('width', progressPixels);
// Set the text for number of validated fields/total number of fields
jQuery(".wppb-wrapper > .inside").html(insideText);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment