Okay
  Public Ticket #2348577
Step by step wizard not working with elementor pro pop ups
Closed

Comments

  • Therese Jordan started the conversation

    Hi

    Im building a site for a client using the elementor pro builder with the "hello" theme. I have purchased your plug in, and the shortcode works fine on regular pages. I thought it would be nice to have the step by step wizard in a pop up form, so I tried implementing that with elementor pop-ups. That however does not work. I have tried using the shortcode widget, the text widget and the HTML widget, none of them works. 

    Do you have a fix for this? 

    Thank you

  • [deleted] replied

    Hello Theres Jordan, 

    Thank you for your purchase. 

    Unfortunately, there is this conflict with the Elementor Popup and we have some fix for it. Some customization is needed for it to work. First, you need to add some CSS and JS to the back-end, so my advice would be to install some plugin for adding admin CSS and JS to WordPress back-end.

    This is the code you need to add:

    CSS:

    .el-select-dropdown, .el-popper {
    z-index: 9999 !important}
    .am-modal {
    z-index: 9999 !important}

    JS

    if (!('ameliaBooking' in window)) {
    window.ameliaBooking = {};
    }
    if (!('disableAutomaticLoading' in window['ameliaBooking'])) {
    window.ameliaBooking.disableAutomaticLoading = true;
    }
    document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('ameliaPopUpButton').onclick = function() {
    setTimeout(function () {
    var ameliaPopUpForms = document.getElementsByClassName('amelia-elementor-popup');
    for (var i = 0; i < ameliaPopUpForms.length; i++) {
    window.ameliaBooking.load(ameliaPopUpForms[i], null, {});
    }
    }, 500);
    };
    var ameliaForms = document.getElementsByClassName('amelia-elementor-form');
    for (var i = 0; i < ameliaForms.length; i++) {
    window.ameliaBooking.load(ameliaForms[i], null, {});
    }
    });


    Then, you need to add an ID to the Edit button "ameliaPopUpButton":

    5478581827.png

    You should enable "Prevent Closing on Overlay":

    4035329291.png


    When you're adding the shortcode in the pop-up, you need to add the class 'amelia-elementor-popup':

    4559165604.png

    If you're adding a shortcode which is not in a pop-up, you need to add the class 'amelia-elementor-form'.

    Let me know if this helped and if you have any further questions.