Spinner when clicking link in map marker

New home Forums Pro Add-on Troubleshooting Spinner when clicking link in map marker

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #57371
    boatsRus
    Member

    The performance of clicking on a link in the description field in a marker window seems pretty bad to users, in particular a mobile because there is no obvious “working” mark. Is there some CSS or similar that would fire up a spinner when a link (any link) is clicked in a marker window to give the user a bit of a hint that eventually something will happen?

    #57378
    AbelC
    Moderator

    Hi There,

    Thank you so much for getting in touch with us, and our sincere apologies for the inconvenience.

    Would it perhaps be possible to please provide us with a link to your map page?

    Could I also kindly ask if you could please confirm the marker ID and the link so that we can take a closer look at what is causing this issue?

    This will be a tremendous help, and we look forward to hearing back from you.

    Kind Regards,
    Abel

    #57385
    boatsRus
    Member
    This reply has been marked as private.
    #57410
    AbelC
    Moderator

    Hi There,

    Thank you so much for getting back to me.

    I have run a couple of tests and it appears that this is a connection issue for the slight delay as it loaded instantly for our lead developer (Perry) on a fibre connection.

    Unfortunately, the loading speed and the pre-loader you would like to add is not under our control. This image comes from your WooCommerce widget, so this is not something we could compensate for in our plugins code.

    However we do suggest to optimize the images.

    Alternatively, you can reach out to the developers of this WooCommerce widget and ask them to add a pre-loader.

    I hope this helps clarify, and we look forward to hearing back from you.

    Kind Regards,
    Abel

    • This reply was modified 2 months, 2 weeks ago by AbelC.
    • This reply was modified 2 months, 2 weeks ago by AbelC.
    #57414
    boatsRus
    Member

    Uh, from the sound of it, I think you misunderstood, the problem is NOT how fast the marker itself loads, but what happens when a user clicks the links in the marker description. When a user clicks on the link (which is located in the marker description), the page which is opened loads a lot slower compared to when the same page is accessed from a link placed somewhere else. Also,on mobile (chrome), when a user clicks on a link, there is the progress bar shown, when a link in the marker description is clicked, there is no progress bar shown so the user has no idea whether or not something is happening.

    #57416
    AbelC
    Moderator

    Hi There,

    My sincere apologies for the confusion on my behalf.

    I will add the pre-loader to our Feature Request items for our development team to have a look at.

    If approved they will add it to our plugin in the future. Thank you for your suggestion.

    In the meantime, you can add text to show that the page is loading when the user clicks on the link with custom JS and CSS.

    Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Please paste the following code below:

    Custom CSS

    .wpgmza-loading-txt {
        position: fixed;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        background-color: yellow;
    }
    
    .wpgmza-loading-text-p {
        padding: 40%;
    }
    

    Custom JS

    
    jQuery(function($) {
    jQuery('body').on('click', '[data-custom-field-id="5"] a', function(){
        $('<div class=wpgmza-loading-txt><p class="wpgmza-loading-text-p">loading...</p></div>').appendTo('.wpgmza-infowindow'); 
    });
    
    });
    

    This should now display “loading” once the client clicks on the link.

    I hope this helps clarify, and please do let me know if this is working for you.

    Kind Regards,
    Abel

    #57430
    boatsRus
    Member

    Almost there!

    With the exception of the terrible styling 🙂 (the yellow definitely was noticeable), this was the effect I was looking for! However, there are many more links in the marker windows (see screenshot, marked with nr 2). It would be great if ANY link, anywhere in the marker Description field (see other screen shot) would also generate the same result.

    Metacode would be something like this:

    When any <a..> element in

    is clicked
    activate spinner.

    —-

    Minor additional detail on the styling: when this is working, it would be nice if the spinner would be the “prancing 3 dots” that I use to indicate the map is loading. I assume this css is generating the “dots” that appear when the map is loading (unless in recent versions you have added this into the baseline code). See css:

    .wpgmza-preloader {
    top: 50%;
    left: 50%;
    }
    .wpgmza-preloader + #wpgmza-preloader-background {
    display: block;
    position: absolute;
    background: #333;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .3;
    display: none;
    transition: all .12s ease-in-out;
    }
    
    .wpgmza-preloader[style*="block"] ~ #wpgmza-preloader-background {
    display: block !important;
    }
    
    .wpgmza-preloader:not([style*="none"]) + #wpgmza-preloader-background {
      display: block !important;
    }
    
    Attachments:
    You must be logged in to view attached files.
    #57453
    AbelC
    Moderator

    Hi There,

    Thank you so much for letting me know, and that is great to hear.

    Could I kindly ask if you could please replace the previous provided Custom JS with the following code below:

    jQuery(function($) {
    jQuery('body').on('click', '.wpgmza_infowindow_description a', function(){
        $('<div class=wpgmza-loading-txt><p class="wpgmza-loading-text-p">loading...</p></div>').appendTo('.wpgmza-infowindow'); 
    });
    
    });

    This should now display loading once you have clicked on any link inside the description field.

    Please do let me know if this is working for you?

    Please also note that I have added this request to display the spinner to our feature request items.

    I look forward to hearing back from you.

    Kind Regards,
    Abel

    #57457
    boatsRus
    Member

    Yes, exactly what I was looking for.
    A couple of additional clarifications:

    1) Now I have both your two code snippets, is this the good setup or should the two somehow be combined into one (the current setup with 2 snippets definitely seems to work)

    2) From where is the word “loading” picked up? I would have liked to translate it but did not find it in the .po file?

    In my humble opinion, this should be a standard feature except together with a spinner (preferably the one used when the map loads) that would make it not language-dependent.

    Thanks, I’m good for now, waiting for the updated product with this built in 🙂

    #57469
    AbelC
    Moderator

    Hi There,

    Thank you for letting me know, and that is great to hear.

    Please find my response below:

    1. You can remove the first code snippet as this will only target the custom field ID = 5.

    The second code snippet provided in my previous response should target all links inside the description field.

    2. You can change the word “loading” in the second provided code snippet by replacing the word loading… in the provided code snippet.

    We will add our spinner to the InfoWindow in the future.

    Unfortunately, we do not have an ETA for this at the moment. We do apologize for the inconvenience.

    I hope this helps clarify, and please do let me know if this is working for you.

    Kind Regards,
    Abel

    • This reply was modified 2 months, 1 week ago by AbelC.
    • This reply was modified 2 months, 1 week ago by AbelC.
    #57477
    boatsRus
    Member

    Seems that the Custom field is not a child of the Description, taking away the snippet for the custom field disabled the function so I guess I just keep both now that I understand how they work.

    #57503
    AbelC
    Moderator

    Hi There,

    Thank you for letting me know, and my sincere apologies for the mistake on my behalf.

    That is great to hear and please do let me know if there is ever anything else that we can assist you with?

    We will gladly assist with any questions or issues you may be having.

    Have a great day further!

    Kind Regards,
    Abel

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