[Resolved] Avada Theme Modal not working.

[Author]

Posts

[DanielS9588]

I am trying to: Have Avada Modal Pop Up work properly.

Link to a page where the issue can be seen:
hidden link

I expected to see:
I expect to see the Avada Modal Pop Up appear.

Instead, I got:
It currently flashes in appearance, but does not stay on screen.

Six months ago I had an issue where the ToolSet Modal wasn't working. Not the Avada Modal is not working.

I troubleshot it to ToolSet being the issue by disabling the plugins.

[Christian Cox]

Hello, I'm looking into this now to see if I can replicate the problem with Avada 7.4.1 active on my local site. I'll give you an update shortly.

[Christian Cox]

In my local environment I was able to resolve this problem by going to Toolset > Settings > General tab and selecting the option "The theme or another plugin is already loading Bootstrap 3". Avada already includes a proprietary version of the Bootstrap library, along with other Bootstrap features like the modal you're using in the Avada builder. Disabling Toolset's version of the Bootstrap library is probably best here, since there is no need to include it twice.

Please try the option "The theme or another plugin is already loading Bootstrap 3" in Toolset > Settings > General, and then you may need to clear your theme's cached CSS and JavaScript files if you use their CSS or JavaScript file compiler systems (usually found in Avada > Performance).

Let me know if this does not solve the problem completely.

[DanielS9588]

Christian,

Thank you for the quick turn-around, but the issue has not been resolved.

ToolSet is being used to modify the WooCommerce Product Layout. In this layout is a Modal popup for INGREDIENTS.
hidden link
This popup was working fine and the Avada modal on this page:
hidden link
Wasn't working.

Now with your direction (ToolSet > Setting > The theme or another plugin is already loading Bootstrap 3 | And flushing the cache) the Avada modal is working, but NOT the ToolSet modal. It isn't appearing at all.
hidden link

Further insight is needed.

Thank you,

[Christian Cox]

Okay I understand better now, your site uses both the Avada modal system and the Bootstrap modal system in different locations. Both systems are somewhat incompatible with each other since Avada enqueues its own specific version of Bootstrap, so I think one approach to working around this problem would be to enqueue Bootstrap 3 with Toolset, but only on the pages that specifically require it for the Bootstrap modal. To be clear, this means that it will not be possible to use both the Avada modal and the Bootstrap modal on the same page since the Bootstrap library loaded by Toolset will conflict with Avada's proprietary Bootstrap implementation.

If the only place where you have applied Bootstrap modals like this is in the Product Category archive, a custom code snippet you can utilize along with the option "Toolset should load Bootstrap 3" in Toolset > Settings > General will suppress Toolset's loading of Bootstrap outside of the Product Category archives. If Bootstrap modals are used in other areas, this script might need to be adjusted to enqueue Bootstrap selectively in those areas as well. I would need more information about these other implementations of the Bootstrap modal to give you an updated script.

To apply the workaround, select the option "Toolset should load Bootstrap 3" in Toolset > Settings > General and add the following code to your child theme's functions.php file, or to a new custom code snippet in Toolset > Settings > Custom code, set to run everywhere and activated:

// Selectively enqueue Bootstrap 3 using Toolset, but only on specific pages - in this case, the Product Category archives 
// This allows use of the Bootstrap modal system on pages that do not also utilize the Avada modal system, since the two are incompatible
// Toolset Support reference: https://toolset.com/forums/topic/avada-theme-modal-not-working/
function selective_enqueue_bootstrap(){
  if ( function_exists('is_product_category') && !is_product_category() ) {
    // dequeue Bootstrap CSS
    function dequeue_bootstrap_css(){
      wp_dequeue_style( 'toolset_bootstrap_styles' );
    }
    add_action( 'wp_print_styles', 'dequeue_bootstrap_css' );

    // dequeue Bootstrap JS 
    function dequeue_bootstrap_js(){
      wp_dequeue_script( 'toolset_bootstrap' );
    }
    add_action( 'wp_print_scripts', 'dequeue_bootstrap_js' );    
  }
}
add_action( 'wp_enqueue_scripts', 'selective_enqueue_bootstrap', 100 );

Let me know the results after applying this workaround and I can continue troubleshooting if necessary.