CODEWITHSUNDEEP
jquery
kiarashi
kiarashi

Reputation: 493

Override jquery function

This is the original code from a plugin

$('body').on('click.eddAddToCart', '.edd-add-to-cart', function (e) {

        e.preventDefault();

        var $this = $(this), form = $this.closest('form');

        var variable_price = $this.data('variable-price');
        var price_mode     = $this.data('price-mode');

        $.ajax({
            type: "POST",
            data: data,
            dataType: "json",
            ......
            success: function (response) {
                if( edd_scripts.redirect_to_checkout == '1' && form.find( '#edd_redirect_to_checkout' ).val() == '1' ) {

                    window.location = edd_scripts.checkout_page;

                } else {

                    if( variable_price == 'no' || price_mode != 'multi' ) {
                        // Switch purchase to checkout if a single price item or variable priced with radio buttons
                        $('a.edd-add-to-cart', container).toggle();
                        $('.edd_go_to_checkout', container).css('display', 'inline-block');
                    }

                }
        }
    }
}

I want to override 

$('.edd_go_to_checkout', container).css('display', 'inline-block');

with 

$('.edd_go_to_checkout').removeAttr('style').css('display', 'block');

Is there an easier way other then copying the entire ajax code into this

$("body").off(".eddAddToCart",".edd-add-to-cart").on("click.eddAddToCart",".edd-add-to-cart",function(e){ 
....
});

I'm unable to change this with css alone. This is a checkout button that shows only after a product has been added.

Any help is much appreciated.

Upvotes: 0

Views: 246

Answers (1)

trincot
trincot

Reputation: 350272

The best way is indeed to redefine the plug-in code you quoted. There is no nice way to hook into that plug-in.

Some of the not-so-nice ways to hook are:

  1. Redefine the jQuery $.fn.css method, so that it first calls the original jQuery css method, but then checks whether the current call concerns the call made setting the inline-block display style for your specific element: if so, you apply immediately the correction:

    var orig_fn_css = $.fn.css;
$.fn.css = function () {
    orig_fn_css.apply(this, arguments);
    if (arguments.length == 2 && arguments[0] == 'display' && arguments[1] == 'inline-block') {
        $(this).filter('.edd_go_to_checkout').removeAttr('style').css('display', 'block');
    }
    return this;
}

  2. You could use a MutationObserver to detect any attribute changes on the target element(s). When triggered, you check whether it concerns the specific inline-block display style change, and correct the action:

    var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName == 'style' && mutation.target.style.display == 'inline-block') {
      // Correct wrong assignment of the 'inline-block' display style:
      $('.edd_go_to_checkout').removeAttr('style').css('display', 'block');
    }
  });    
});

$('.edd_go_to_checkout').each(function () {
    observer.observe(this, { attributes: true })
});

Neither of these methods is recommendable, mainly because the code becomes harder to understand.

Upvotes: 1

Related Questions