Ajax Search Pro not working inside an Elementor Popup

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Ajax Search Pro not working inside an Elementor Popup

This topic contains 10 replies, has 2 voices, and was last updated by

 
Keymaster
4 days, 16 hours ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #23668

    Participant

    Hi there,

    Ajax Search Pro is working fine with Elementor, except if the search form is inside a popup created with Elementor Pro. In this case, there are not automatic results shown.

    In the URL there are 2 Ajax forms: One in the middle of the page, wich is working fine, and another inside an Elementor Popup that can be opened clicking in the magnifying glass icon in the header. This is not working.

    The search form is the same in both cases.

    Is there a way to solve ti?

    Thanks,

    Arnau

    #23671

    Hi Arnau,

    Thank you for all the details! Since you added temporary FTP and back-end details, I have fixed the issue by adding a small custom code snippet to the functions.php file in your theme directory.

    The problem is, that elementor always clones the pop-up contents, which basically resets the event handlers, thus it won’t work. The code checks when the icon is clicked, and tries to re-initialize the plugin, and should bypass the problem.

    For future reference, this is the custom code:

    add_action('wp_footer', 'asp_fix_fa_icon_click');
    function asp_fix_fa_icon_click() {
      ?>
      <script>
      jQuery(function($){
        $('.fa.fa-search').on('click', function(){
          setTimeout(function(){
            ASP.initialize();
          }, 500);
        });
      });
      </script>
      <?php
    } 
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #23683

    Participant

    Hi Ernest,

    Thanks a lot for this great and fast solution!

    #23684
    You cannot access this content. Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #23690

    Participant
    You cannot access this content.
    #23691

    Hi,

    Thank you!

    I am not sure if I can replicate that issue. I tried closing the pop-up with the X button, as well as by clicking on the document, but the results close as well. Is this happening in a specific way?

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #23699

    Participant

    Hi Ernest.
    I can’t replicate the issue also. It seems to work fine.

    Thanks a lot, again!

    #23700

    Participant
    You cannot access this content.
    #23710

    Hi!

    Sure, I can. I see that the structure of the menu changed, and there is a different search icon class now in effect. Try this variation of the code instead, it should cover possible changes as well:

    add_action('wp_footer', 'asp_fix_fa_icon_click');
    function asp_fix_fa_icon_click() {
      ?>
      <script>
      jQuery(function($){
        var t1, t2;
        $('.fa.fa-search, .fas.fa-search, i.fa-search').on('click', function(){
          clearTimeout(t1);
          clearTimeout(t2);
          t1 = setTimeout(function(){
            ASP.initialize();
          }, 700);
        });
      });
      </script>
      <?php
    } 
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #23712

    Participant

    Hi Ernest,

    Thanks a lot! It works great.

    I have some new questions:

    1) Is it possible to change the size of the magnifying glass icon?
    2) About the results box, is it possible to set the height to the end of the windows? Or it has to be a pixel height?

    Thanks a lot!

    Arnau

    #23728

    Hi Arnau,

    1. The magnifying glass size is sort-of hard coded to 24×24 pixels. You can however force it to the complete search bar width and height via custom CSS:

    .innericon svg {
        width: 100% !important;
        height: 100% !important;
    }

    This way, increasing the search bar height will increase the icon size as well (hopefully)

    2. Only pixel height I’m afraid.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.