Support » Plugin: Popups for Divi » Trigger popup from anchor tag in URL

  • Baddie

    (@baddiedev)


    On my site, there is a popup section in the footer with the CSS id ‘contact’. That section has a contact form and a code module with my javascript. The popup can be viewed on the site I’m building at the moment at badd.ie. If you click “Contact” in the footer menu, you can see that the section is revealed as expected.

    What I’m trying to do is automatically launch that popup if someone clicks an external link to the site that includes #contact in the URL eg badd.ie/#contact. Something similar to the effect produced by this post but using a page anchor instead of a URL parameter.

    The Javascript I’m using is…

    jQuery(document).ready(function() {
        DiviArea.addAction( 'ready', function() {
            if ($(location).attr('hash') == "#contact") {
                DiviArea.show('contact');
            }
        });
    });
    

    From what I understand, it registers a function to execute when DiviArea initialises. That function then checks to see if #contact exists in the URL and then if it does it shows the popup. To be on the safe side, I also put that code inside a jQuery document.ready function but I still get that error in my console. The fact I get the error means the function was registered successfully, executed, and the page anchor was found in the URL.

    Whatever I do, it seems to be trying to execute DiviArea.show('contact'); before the section is available in the DOM. But… it must be in the DOM because the javascript is located within that section. Its all very confusing.

    • This topic was modified 5 months ago by Baddie.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • ausyed

    (@ausyed)

    Hello Baddie,

    I am sorry for the trouble you have with our plugin. The script you pasted above runs before the contact popup is set up. Try replacing the code with the following:

    // Run code as soon as all Areas/Popups are initialized.

    DiviArea.addAction(‘ready’, function() {
    // Find an Area that matches the current URLs #hash.
    var area = DiviArea.getArea(window.location.hash);
    // When an Area with that name exists, show it instantly.
    if (area) DiviArea.show(area);
    });

    That’s a general solution that takes any #hash value from the URL and opens the Popup, when there’s a Popup with that name. Feel free to get back to me, in case of any question.

    Regards,
    Syed

    Thread Starter Baddie

    (@baddiedev)

    Ok, I’ve done what you suggested. However, var area = DiviArea.getArea(window.location.hash); returns false and the popup does not launch.

    I also removed the ‘#’ part from the window.location.hash value since the other Popups for Divi functions don’t use the ‘#’ part in the identifier

    var id = window.location.hash.substr(1);
    var area = DiviArea.getArea(id);

    But this also returns false and the popup does not launch.

    I also tried it explicitly…

    if (window.location.hash == '#contact') {
      var area = DiviArea.getArea('contact');

    But this also returns false and the popup does not launch.

    • This reply was modified 5 months ago by Baddie.
    • This reply was modified 5 months ago by Baddie.
    Plugin Author Philipp Stracker

    (@strackerphil-1)

    Hi @baddiedev

    Thanks for the additional details! You say that DiviArea.getArea("contact") returns false. That means, that there is no initialized Popup with the ID “#contact” on that page (yet).

    You can double-check to see a list of valid Popup IDs by running DiviArea.listAreas() on the page. That command returns an array with all Popup IDs that are present on that page and.

    Here’s a slightly modified version of the JS snippet that outputs console logs with additional details for you:

    <script>
    // Run code as soon as all Areas/Popups are initialized.
    DiviArea.addAction('ready', function() {
      console.log('Popups for Divi is ready!');
    
      if (!window.location.hash) {
        console.log('URL does not contain a hash, do nothing');
        return;
      }
    
      console.log('Try to open the Popup', window.location.hash);
    
      // Find an Area that matches the current URLs #hash.
      var area = DiviArea.getArea(window.location.hash);
    
      // When an Area with that name exists, show it instantly.
      if (area) {
        console.log('Found a Popup, display it now');
        DiviArea.show(area);
      } else {
        console.log('Did not find a Popup with the ID', window.location.hash);
        console.log('Available Popups:', DiviArea.listAreas());
      }
    }, 20); // ← The "20" parameter was missing in our the last reply! 
    </script>

    Please note the last line in the script, which contains the parameter , 20 – when this parameter is missing, the script will not work (and I think that’s the reason for the problem in your last attempt; we forgot to tell you about that param…)

    The “20” is the priority of the action (same as WordPress, higher priority means later execution). When running the function without the priority param, then the script assumes priority “10”, which is too early. Setting this param to “20” will call your initialization function a little bit later, which possibly solves the issue.

    Let us know how that worked, I’m looking forward to your feedback!

    Thanks, Philipp πŸ™‚

    Thread Starter Baddie

    (@baddiedev)

    Excellent! Thanks very much! The 20 parameter made all the difference. The code I’m now using is

    DiviArea.addAction('ready', function() {
      if (!window.location.hash) return;
      var area = DiviArea.getArea(window.location.hash);
      if (area) DiviArea.show(area);
    }, 20);

    Note for others: This code will in fact autolaunch any popup on the page whose ID appears in the URL as the hash. For a more targetted approach, allowing only specific popups to auto launch you can use something like

    DiviArea.addAction('ready', function() {
      var ids = ["#foo", "#bar", "#baz"]; // Array of popup IDs that are allowed to autolaunch
      var hash = window.location.hash; 
      if (!hash || !ids.includes(hash)) return;
      var area = DiviArea.getArea(hash);
      if (area) DiviArea.show(area);
    }, 20);

    [Deleted comment due to Power Of Posting]

    • This reply was modified 4 months, 3 weeks ago by tracian.
    Plugin Author Philipp Stracker

    (@strackerphil-1)

    @tracian I guess that you could solve your issue (that’s why you deleted the comment). For anyone else who arrives here and needs help to build some custom JS:

    Yay πŸ˜€ We love JS-API-power-users like you! That’s why we have created a script generator to help you create working snippets. You can find it here – it’s fully compatible with Popups for Divi
    https://divimode.com/knowledge-base/divi-areas-script-generator/

    In case you have any questions, please get in touch via this forum, or request support via https://divimode.com/get-support/

    Happy Popup-ing πŸ™‚ Philipp

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.