Confirmation Modals/Popups are not displayed on My Wishlist Page

Last updated on by

Sometimes, the confirmation modals (popups) are not displayed on My Wishlist page of Smart Wishlist. This can happen due to a variety of reasons. We shall discuss some of those below and provide their possible solutions.

1. Outdated version of jQuery (<1.9.1)

Bootstrap’s JavaScript requires jQuery version 1.9.1 or higher

Check the Developer Console of your browser. If the following error message is displayed, it means jQuery is outdated

Bootstrap’s JavaScript requires jQuery version 1.9.1 or higher

If your store is using jQuery older than 1.9.1, the modal would not appear for sure. A simple solution is to update the version of jQuery in your theme to 1.9.1 or above (we prefer version 2.2.0).

Updating the jQuery version may cause some dependent modules to misbehave. For e.g. a carousel on homepage which depends on jQuery 1.8, may stop working. Therefore we add a conditional update to jQuery which ensures that the updated version is loaded only on My Wishlist page, while the remaining store loads the previous version as usual.

  1. Open Online Store => Themes => Edit HTML/CSS
  2. Look for reference to jQuery and replace the older version with the latest version in the following structure

{% if template %}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' | script_tag }}
{% else %}
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' | script_tag }}
{% endif %}
Due to the above code, entire store loads version 1.8 while My Wishlist page loads version 2.2.0

2.  CSS override for .modal class

The modals have a parent CSS class of “modal” and if the theme overrides its properties such as z-index, opacity, display etc , then the modal will cease to display.

  1. Open Firebug (Firefox) or Developer tools (Chrome, Safari)
  2. In the HTML code of the page, scroll down to end. The modals are present  near closing </body> tag.
  3. Select any modal and view CSS properties of its sub elements. Check if following CSS properties are getting overridden by theme’s files z-index, opacity, display, position. If yes, you can fix this issue by doubly overriding the code.

    1. Open Apps => Smart Wishlist => Extra CSS
    2. Add the following to Wishlist section of Extra CSS tool.
    .modal
    {
    opacity:1 !important;
    z-index:99999 !important;
    display:initial !important;
    }
    This should fix the issue. Of course, the above is just one possible situation and this varies from store to store.

Javascript errors

If your store has certain javascript errors, then modals may not display on Wishlist page. To fix this, open the Javascript Console in your browser and see if any errors are present. You should try to fix them. In case, the errors are from app’s scripts, please inform us.

Even after applying the above techniques, the modals are not getting displayed. please contact us by raising a ticket. Our experts shall get back to you within few hours.