Button does not work on my current theme

Hi,

This might be the direct conflict between your theme and this plugin or some other plugin might be interfering when particular theme is activated.

Having said that, it is quite difficult to answer about this conflict and I would suggest you to reach out to theme author regarding this issue so that they can direct you at correct direction.

Are you seeing any errors in browser console while you click on button?

Regards,
Ankit

Hi,

I’m seeing no errors and have deactivated all the plugins except yours and WooCommerce.

However, the button still isn’t working.

Thanks.

The odd thing is that all other buttons (from other plug-ins) work fine on my cart page. It’s only your plug-in that won’t acknowledge a button click.

Unfortunately, my theme is old so I can’t contact the author. But other plug-in’s seem to work ok.

Are there any potential conflicts in the stylesheets or functions that you can suggest looking?

Thanks.

I asked someone to look at your plug-in and he came up with some guidance if it helps…

We’ve confirmed that the ShareButton is receiving the onClick event, and MODAL_OPEN is being set to true.

However the dialog element:

<div role=”dialog” aria-modal=”true” class=”fade modal show” tabindex=”-1″ style=”display: block;”><div role=”document” class=”modal-dialog”><div class=”modal-content”><div class=”modal-header”><button type=”button” class=”close”><span aria-hidden=”true”>×</span><span class=”sr-only”>Close</span></button></div><div class=”modal-body”><div class=”wcssc-icons-container”><div><i class=”fas fa-envelope”></i></div><div><i class=”fas fa-copy”></i></div><div><i class=”fas fa-save”></i></div></div></div></div></div></div>

is not being inserted into the DOM with this specific theme (Oculus), where it is properly being inserted in another theme I don’t want to use (Storefront)

Do you know how it’s possible that this element isn’t coming in?

Thanks!

——————

And not sure if it’s related but my theme is older and it uses Bootstrap 3. If I don’t include the bootstrap.min.css file, your plug-in’s button works. However, the site is not formatted since it’s built on Bootstrap 3. Any chance this is any issue with Bootstrap 3?

Some more info… I spoke to the theme author and he also confirmed that the button click event is being received so there’s not much that can be done on the theme side (as per my earlier comment).

If you don’t have time to debug this, is there a way you can just point me in the right direction to address this? Or is there some way I can get this to work temporarily?

I like your plug-in so really want to try to get it to work for my theme.

Thanks.

Hi,

I am not sure if this is conflict with the bootstrap, but this plugin is using Recat bootstrap (https://react-bootstrap.github.io/), which I think requires bootstrap 4.

There’s an another version which is compatible with bootstrap 3, but I kept the latest one in order to keep things up-to-date.

Hope this helps.

Regards,
Ankit G.

Got it. Yes, I installed your old version and the button works. Unfortunately, it has some bugs that were fixed in your new version.

Do you have any suggestions on how to get this to work?

Thanks,

Paul

If I turn off the bootstrap.min.css file that’s included with my theme, your button works. Of course, the site itself is no longer formatted correctly.

Is there a way for your plug-in to ignore the bootstrap css file that’s included in the theme? That seems to be the source of the problem.

Is there a way to overwrite the bootstrap 3 css just for your plug-in?

Thanks.

.fade.modal.show {
opacity: 1 !important;
}
.modal-backdrop.show {
opacity: 0.5 !important;
}
put this css in your css file.

Thanks! This seems to have a similar effect as when I commented out the references to modal on my css file.

Do you know why only my theme along with this plug-in are affected? It seems like the theme by itself is okay, as well as the plug-in. They just don’t work together.

Also, will this cause any potential problems with any other plug-in that do use modal differently

Thanks.

I would like to add that I had to apply the following Custom CSS to my site running the “Zuka” theme from LA Studio. Without it, clicking on the “Share Cart” button just made the whole screen go dark, and nothing appeared. With this custom CSS, i get the modal windows that shows the sharing buttons.

.fade.modal.show {
opacity: 1 !important;
}
.modal-backdrop.show {
opacity: 0.5 !important;
}