jquery - Getting a script to affect a modal in Wordpress (BigCommerce)

Question

So, I'm running an online shoe store using BigCommerce for Wordpress, and everything is working good except for one thing: our client doesn't like it when the MSRP price + Regular price display together when the values are the same. So, we wrote a script that compares both prices and disables the MSRP price if both values are equal.

This is actually working perfectly everywhere except the product quick view card. So, I figure the quick view isn't loaded before the script fires. I'm not sure how to fix it.

I've tried loading the script inside the Quick View Product Card template, but that just breaks every product grid all over the site.

The Script:

/IF MSRP & REGULAR PRICE ARE THE SAME, REMOVE MSRP
jQuery(function($) {
//Pull price data
var divs2 = $('.msrp-fix .bc-product__price', this).html();
var divs = $('.msrp-fix .bc-product__retail-price-value', this).html();
//Pull page path
var pathname = window.location.pathname;
//Fire on all pages except sale page
if (pathname != "/sale/") {
//If MSRP + Price are equal
if (divs == divs2) {
//Apply this style
  $( ".bc-product__retail-price" ).css( "display", "none" );
// If not, do nothing
} else {
}
}
});

I'm not very experienced with this kind of thing, so I'm unsure of what my options are. Is there a different way to get the script to fire? A way to target the modal and fire on open? Hoping for some advice!

Answer 1

Heather with BC here! I am thinking that you're right about the script getting triggered on page load, and the quick-view modal may not trigger a page load. If this is the case, you would need to fire an event to trigger the script when the quick-view modal loads, as well. Rather than doing so on the product card itself, but on-load of the modal.

-- UPDATE --

I connected and had a discussion with another BC4WP developer and this is what they suggested for you in this situation.

Overall, being that this is javascript and not be a hook. The trigger is when someone clicks the Quick View Dialog button, when it is clicked, the dialog box is rendered and added to the DOM. The function in the plugin where this happens lives in: wp-content/plugins/bigcommerce/assets/js/src/public/buttons/quick-view-dialog.js

The trigger for initSingleDialog is around line 69, when the quick view button is clicked. Consider triggering a custom function on click of the same button that is triggering initSingleDialog. This function could make a call every few miliseconds checking for the existence of the pricing class - once it is there that means it has loaded.

Then run the same checks that are currently working for you. There is likely to be some troubleshooting since multiple dialogs can be initialized and they will all remain part of the DOM, so you may need to make sure the function is checking only for the price class within the dialog that was triggered.

We assume that the .msrp-fix class may be custom to your instance, so the way that classes are referenced may need to be adjusted.

Hopefully this helps out!