Site icon Hip-Hop Website Design and Development

How to override Plugin javascript function : $(‘body’).on(‘change’,’.class’)

How do I override – copy and modify – an event triggered function which lives in a custom.js file in a plugin directory.

Context

I am using a 3rd party plugin for a Product Table.

When the visitor changes a Product Quantity

Then the plugin uses Javascript

My Requirement

I need to update a 2nd attribute in that same table product row.

My Workaround

$('body').on('change', '.wpt_row input.input-text.qty.text', function() {

   var temp_number = $(this).parents('tr.wpt_row').data('temp_number');
   var Qty_Val = $(this).val();
   var product_id = $(this).parents('tr').data('product_id');

   var thisRow = '#table_id_' + temp_number + ' tr.product_id_' + product_id;

   $( thisRow + ' input.input-text.qty.text').val(Qty_Val);
   $( thisRow ).attr('data-quantity', Qty_Val);
   $( thisRow + ' a.wpt_woo_add_cart_button').attr('data-quantity', Qty_Val);
   $( thisRow + ' a.add_to_cart_button ').attr('data-quantity', Qty_Val);
            
   // [ my custom fix : Update new quantity to Add to Cart URL] --------------------------- [ BEG ]
   var Item_URL = '?add-to-cart=' + product_id + '&quantity=' + Qty_Val;
   $( thisRow + ' a.add_to_cart_button ').attr('href', Item_URL);
   // [ my custom fix : Update new quantity to Add to Cart URL] --------------------------- [ END ]

   <snip>
   <etc>

});

Long Term Problem

My workaround is not ideal – when the custom.js is updated my patch is going to get overwritten, and my ‘fix’ will get lost.

Help Wanted

How do I go about doing this inside either:

I have written quite a few of my own functions, but my first stumbling block is that this is an ‘event based function’, and not a ‘named function’.


I will continue to dig around for some answers and to educate myself, but any pointers would be much appreciated!