Script only works once the page is refreshed? Not on initial navigation?

Question

I have tried redirect the purchase button on a Squarespace product page from adding items to a cart to third party site, in this case so that users can purchase an item on Amazon. I was not able to change this as a simple redirect so I tried to replace the button, however now the button only shows up when you refresh the page, and not on the initial page load. I am not sure what is going on here.

The site page is here: https://www.oakhurstpublishing.com/books/mistys-tale

Here is tthe header code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

   <script>
      $(function() {
        $(".sqs-add-to-cart-button").replaceWith("<div class='amazoncheckoutbuttonwrapper'><a class='amazoncheckoutbutton' target='_blank' href='https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/'>SHOP NOW</a></div>");        
      });
      </script>

Here is the CSS:

.amazoncheckoutbuttonwrapper{
     margin-top: 45px;
     margin-bottom: 45px;
   }
.amazoncheckoutbutton {
    display: inline-block;
    visibility: visible !important;
    font-family: "proxima-nova";
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: normal;
    font-family: proxima-nova;
    padding: 21px 34px;
    background-color: rgba(92,183,204, 1);
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.amazoncheckoutbutton:hover {
    color: #fff;
    background-color: rgba(92,183,204, 0.5) !important;
    cursor: pointer;
}

It worked fine for me on Chrome, Firefox, and IE. The button was there and when clicked I was redirected to https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/ just fine. Not sure what to tell you. — mepley, May 13 '19 at 18:12
Possible duplicate of [JavaScript only being called once in Squarespace](https://stackoverflow.com/questions/54492245/javascript-only-being-called-once-in-squarespace) — Brandon, May 13 '19 at 18:22
There's a syntax issue at `.amazoncheckoutbutton, {`, remove the comma `,`. — hungerstar, May 13 '19 at 18:28
It is still not working for me. And for ehatever reason now the button is trying to load at the top of the block when refreshed. @Brandon I do not believe this is the same issue after reading that thread. — ThisGuy, May 13 '19 at 19:10
@mepley I am testing in Firfox and it is not working at all. — ThisGuy, May 13 '19 at 19:10
Thanks for the cleanup @hungerstar, I made the change, but that is only on the styling and doesn't effect the js. — ThisGuy, May 13 '19 at 19:13
Is there a better code to just redirect button rather than replacing it? — ThisGuy, May 13 '19 at 19:14

Brandon · Answer 1 · 2019-06-17T14:30:36.930

0

The first problem is that the code in question is removing an element that Squarespace's own code is then looking for, which is causing an error, which causes Squarespace's ImageLoader to fail.

Instead of loading JQuery and replacing the element (per the code in your question), use the following:

<script>
  window.Squarespace.onInitialize(Y, function() {
    var parent = document.getElementsByClassName("sqs-add-to-cart-button-wrapper")[0];
    var oldBtn;
    var newBtn;

    oldBtn = document.getElementsByClassName("sqs-add-to-cart-button")[0];
    if (oldBtn) {
      oldBtn.style="display: none;"
    }

    if (parent) {
      newBtn = document.createElement("div");
      newBtn.className = "amazoncheckoutbuttonwrapper";
      newBtn.innerHTML = "<a class='amazoncheckoutbutton' target='_blank' href='https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/'>SHOP NOW</a>";
      parent.appendChild(newBtn);
    }
  });
</script>

What the above code does is show the new button and hide the original button instead of removing it, which should prevent the error. You may also hide the original button with CSS instead.

Secondly, your site is making use of a template with AJAX loading enabled, which may cause issues with custom code. I've written the above code to account for AJAX loading, but if you have issues, you may find that disabling AJAX resolves the issue.

Thirdly, your site at one point contained a line of Javascript that was causing an error.

document.querySelector('.ProductItem-details .sqs-add-to-cart-button').classList.remove('sqs-editable-button');

It's unclear whether you'll still need this line or not. But if you do, change it to:

window.Squarespace.onInitialize(Y, function() {
  var pid = document.querySelector('.ProductItem-details .sqs-add-to-cart-button');
  if (pid) {
    pid.classList.remove('sqs-editable-button');
  }
});

What's being avoided here is running the code if the button/class is not on the page. The above code also takes into account Squarespace's AJAX loading, in case you have it enabled at some point.

I think that gets at all the issues related to the image loading problem.

edited Jun 17 '19 at 14:30

answered May 13 '19 at 18:34

Brandon

3,572
2
12
27

But @Brandon if I remove the script calling the Ajax in the header it is not working at all, even on refresh. – ThisGuy May 13 '19 at 19:11
@ThisGuy: Disabling AJAX does not require "removing the script". It is a setting in Squarespace. Please see the updated answer and review the links provided. This does not require editing your code. – Brandon May 13 '19 at 21:15
@ThisGuy, I see that you have disabled AJAX per this answer and that your code appears to be working as desired now. Please consider marking the correct answer when it indeed answers your question/problem. – Brandon May 15 '19 at 13:06
Okay @Brandon now that it is disabled though the image of the book not loaded until the page is reloaded. I am guessing this is due to the ajax being disabled. Now I am not sure how to fix this without re-enableing the Squarespace ajax and then causing the button issue again. – ThisGuy May 17 '19 at 21:09
@ThisGuy: The image failing to load doesn't really have to do with Squarepace's AJAX setting; Squarespace templates will of course load images with or without the AJAX setting enabled. However, you have a line of javascript which is causing an error, which is then causing Squarespace's own "ImageLoader" to fail as well. See the updated answer. – Brandon May 20 '19 at 22:09
Hey @Brandon I am still having problems with the image of the book not showing. I tried to put in the script you suggested. Am I missing something? – ThisGuy Jun 13 '19 at 22:01
@ThisGuy : Ok, I see the problem. Your code is removing the .sqs-add-to-cart-button class. Because it is missing when Squarespace's own code runs (and because their code expects the class to be present), it's causing the Squarespace code to error, which then causes their Javascript ImageLoader to fail as well. A new answer could be written, but it'd require you to remove the code you've added so far (the code in the original question) and restore the default Squarespace cart button. If you can do that, and post back, then new code can be written without causing the error. – Brandon Jun 14 '19 at 13:52
I removed the coding back to the original. – ThisGuy Jun 16 '19 at 12:21
Alright, @ThisGuy, I've updated the answer to an entirely new one, hopefully addressing all components. – Brandon Jun 17 '19 at 14:31

Script only works once the page is refreshed? Not on initial navigation?

1 Answers1