JavaScript Best Practices and Problem Solving

The MBB Plugin uses JavaScript, specifically jQuery (and jQuery-UI)

You must ensure that your website has no JavaScript errors before installing the Buying Buddy plugin.
JavaScript errors can occur due to badly written plugins or code, or conflicts between multiple JavaScript components.

WARNING! Identifying and fixing problems with the Buying Buddy widgets on your website is made significantly more complex if there are still underlying JavaScript errors from other components on your website.

JavaScript and jQuery are common technologies that are very commonly used but operate slightly differently depending on the Browser (IE, Chrome, Firefox, Safari etc).

Nearly all image slideshows or user interface effects (fade in, fade out  etc) that you see on a website will be written in JavaScript and probably use the jQuery library.

JavaScript Best Practices

Are you using a WordPress Cache Plugin on your WordPress site?
To ensure the most current versions of widget Plugin Code and Buying Buddy widget code, you should check your settings or turn this off for pages that have Buying Buddy widgets being used.

Load Buying Buddy libraries LAST
One approach that can often quickly eliminate errors due to JavaScript conflicts is to ensure the Buying Buddy JavaScript libraries load LAST after all the other libraries load on your webpages. This may mean just re-sequencing the Buying Buddy script in the, or it may mean loading the Buying Buddy right at the end of the page.

Special Notes for jQuery UI
Buying Buddy uses jQuery UI v1.11.4
Most of the jQuery UI components are loaded.
If you need jQuery UI we recommend that you use libraries loaded by the Buying Buddy plugin.
If you choose to additionally load a different version then this is not supported and may break functions such as the animated carousel etc.

Diagnosing JavaScript Errors

When you experience issues with Buying Buddy widgets, the first thing to do is check you have no JavaScript errors on your site.

Many websites (especially WordPress) use multiple JavaScript plugins. Therefore, if it is not obvious, you should attempt to isolate the specific script that is the source of the error.

This JavaScript help page provides a good explanation of some methods you can use to specifically pinpoint the error. (Although this resource is from WordPress the methods apply to any website).

[blockquote]Internet Explorer 8+: Press F12. Click on the "Console" tab in the window that opens up.

Firefox: Go to Tools > Web Developer > Error Console

Safari: Go to Safari > Preferences > Advanced and check "Show Develop menu in menu bar". After you do that once, you can access the error console by going to Develop > Show Error Console

Chrome: Go to View > Developer > Javascript Console. Then click on the "Console" tab

Opera: Go to Tools > Advanced > Error Console
[/blockquote]

WordPress

It is possible that the Theme may be causing issues - especially if you have an old theme. To check this, make a temporary switch to the default WordPress "2012" (or more recent) theme and see if the error still exists.

Remove or turn-off all your plugins or JavaScript modules one by one, until the problem goes away. You may wish to repeat this process in a different sequence to confirm the problem script as often the errors are caused by JavaScript plugins that conflict with each other.

Other Sites

Remove or turn-off all your plugins or JavaScript modules one by one, until the problem goes away. You may wish to repeat this process in a different sequence to confirm the problem script as often the errors are caused by JavaScript plugins that conflict with each other.

How to Fix JavaScript Errors

Once you have identified the issue, there are two approaches

  1. Remove and do not use the plugin or code
  2. Get the author of the code (the person who wrote the code) to make corrections

Avoiding Lazy Load

MBB Plugin does a "Lazy Load" of the JavaScript. This helps improve page load times

However, if you wish to load the scripts in the <head> without Lazy Load, then replace the Buying Buddy script with the following separate lines of code in the <head> section of every page.

<script type='text/javascript'>
var MBB = { "mbbUrl" : "https://www.mbb2.com/version3", "data" : { "acid" : "[YOUR_MBB_ACID]", "mbbdomain" : "[YOUR_WEBSITE_DOMAIN]" } }; // DO NOT INCLUDE http with domain ie www.mydomain.com
</script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=\[YOUR_GOOGLE_MAP_KEY]'></script>
<script type='text/javascript' src='https://www.mbb2.com/version3/css/theme/acid/[YOUR_MBB_ACID]'></script>
<script type='text/javascript' src='https://www.mbb2.com/scripts/my-buying-buddy.4.0.js'></script>

Updated on November 6, 2021

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support