Shopify Question posted in
The Shopify help center can be found here.

Shopify "mailto:" tag issue

I am having issue of external link in shopify store.

I am injecting script through my app for displaying a bubble with anchor tag for redirecting user to given link. But shopify is changing the anchor tag to the following link as mentioned below:-

 <a href="/cdn-cgi/l/email-protection#076e69616847736274732964686a"><span style="color:#999999;">??Click here </span></a>

And this link cause to 404 error and page not found.

This is my js code 

if (typeof jQuery == 'undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
    headTag.appendChild(jqTag)
} else {
    var $ = jQuery.noConflict()
}
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = '//cdn.jsdelivr.net/emojione/1.5.2/lib/js/emojione.min.js';
headTag.appendChild(jqTag)

$(document).ready(function(){
    var shop_name = Shopify.shop;
    $.ajax({
        url:'https://deepak.com/client/ajax_response.php',
        type:'post',
        data:{store_name:shop_name},
        success:function(data){
            if(data != '0'){
                $('body').append(data);
            }
        },
        error:function(){
            console.log('Network error');
        }
    })
});

and response returned is 

<div id="bubbleChatBox"><a href="/cdn-cgi/l/email-protection#c5acaba3aa85b1a0b6b1eba6aaa8"><span style="color:#999999;">Click here </span></a>
</div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

And I have not added email-decode.min.js but it is being added automatically to my response.

The link should display correctly like this (Desired Result):- 

<a href="mailto:[email protected]"><span style="color:#999999;">Click here </span></a>

Please help me.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I didn't get how to resolve the issue with Shopify. But a trick made my code working.

    I just change the "mailto" to "@mailto" while saving in database and After injecting script on shopify store. I changed the "@mailto" to "mailto" and it worked.

    I used the following code to make it working.

    <script>
    $("#bubbleChatBox a").each(function() {
        var text = $(this).attr("href");
        $(this).attr("href",text.replace("@mailto", "mailto"));
    });
</script>

  2. 0

    I don’t use Shopify so unfortunately I cannot test this, but it seems that this is something that is handled by the server. A workaround may be to do the following:

    1. In your success: function, after $('body').append(data); add the following:

      document.getElementById('bubbleChatBox').childNodes[0].setAttribute("href", "mailto:[email protected]");

    This uses Javascript to load your desired HTML into the document AFTER it is processed by the server and received by the client. Please let me know if it works!

    Login or Signup to reply.
  3. 0

    It looks like the store is behind Cloudflare and using their Email Address Obfuscation feature. This can be disabled in the Cloudflare control panel, or on a case-by-case basis using these tags:

    <!--email_off--><a href="mailto:[email protected]"></a><!--/email_off-->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search