Question

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

站点页面在这里： 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

您的网站正在使用启用了AJAX加载的模板。您可以disable AJAX，或使用此处提到的替代方法之一重写JavaScript：JavaScript only being called once in Squarespace

启用或禁用Ajax ：
  •在主菜单中，单击设计，然后单击网站样式。
  •向下滚动至站点：正在加载。
  •取消选中启用Ajax加载。

您还有一行JavaScript会导致错误，这可能会导致Squarespace自己的javascript随之出错（并导致图像无法加载或其他不良行为）。

的入侵

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

使用：

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

脚本仅在刷新页面后有效吗？不在初始导航上吗？

1 个答案: