脚本仅在页面刷新后才起作用？不在初始导航上？

Question

我尝试将 Squarespace 产品页面上的购买按钮从将商品添加到购物车重定向到第三方网站，在这种情况下，用户可以在亚马逊上购买商品。我无法将其更改为简单的重定向，因此我尝试替换按钮，但是现在该按钮仅在您刷新页面时显示，而不是在初始页面加载时显示。我不确定这里发生了什么。

网站页面在这里： https://www.oakhurstpublishing.com/books/mistys-tale

这是标题代码：

<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>

这是 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;
}

Answer 1

第一个问题是有问题的代码正在删除 Squarespace 自己的代码正在寻找的元素，这导致错误，从而导致 Squarespace 的 ImageLoader 失败。

不要加载 JQuery 并替换元素（根据您问题中的代码），请使用以下内容：

<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>

上面的代码所做的是显示新按钮并隐藏原始按钮而不是删除它，这应该可以防止错误。您也可以改为使用 CSS 隐藏原始按钮。

其次，您的网站正在使用启用了 AJAX 加载的模板，这可能会导致自定义代码出现问题。我编写了上面的代码来解决 AJAX 加载问题，但如果您遇到问题，您可能会发现 disabling AJAX 解决了问题。

第三，您的网站曾经包含一行导致错误的 Javascript。

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

目前还不清楚您是否还需要这条线路。但如果你这样做，请将其更改为：

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

如果按钮/类不在页面上，则此处避免运行代码。上面的代码还考虑了 Squarespace 的 AJAX 加载，以防您在某个时候启用它。

我认为这可以解决与图像加载问题相关的所有问题。