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

Cannot change the href of element in Javascript – Shopify

I’m trying to change the “continue shopping” link on Shopify’s “thank you” page but it doesn’t work.

I’ve included the following code to the additional scripts section on checkout page settings.

<script>
    (function() {
         document.getElementsByClassName("step__footer__continue-btn")[0].href = "https://example.com/newlink";
    })();
</script>

Unfortunately, the node collection returned by the line below is always empty.

document.getElementsByClassName("step__footer__continue-btn")

The HTML part on the thank you page looks like this:

<a href="https://example.com/" data-trekkie-id="continue_shopping_button" class="step__footer__continue-btn btn">
 <span class="btn__content">Continue shopping</span>
 <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>
</a>
Tags:

2

Answers


  1. 0

    It is working for me

    <html>

<head>
<script language='javascript'>
function msg(){
         var href = document.getElementsByClassName("step__footer__continue-btn");
         alert(href[0].href);
         document.getElementsByClassName("step__footer__continue-btn")[0].href = "https://example.com/newlink";
         alert(href[0].href);
}
</script> 

</head>
<body>
<input type="button" value="Click me" onclick="msg()"/>
<a href="https://example.com/" data-trekkie-id="continue_shopping_button" class="step__footer__continue-btn btn">
 <span class="btn__content">Continue shopping</span>
 <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>
</a>
</body>
</html>
    Login or Signup to reply.
  2. 0

    This is most likely because your JavaScript is loading before your HTML. There are two simple ways to fix this:

    1: Place your <script> tags immediately before your closing </body> tag like so:

    <script>
    //Your code
</script>
</body>

    2: Place all your JavaScript code within a window.onload block:

    window.onload = function() {
    //Your code here
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search