尝试在 Squarespace 产品页面上添加第二个按钮

Question

链接到底部有问题的页面。

Squarespace 在产品页面上默认有一个“添加到购物车”按钮，但我想在它旁边添加一个“查看购物车”按钮。

我已成功添加它，但由于某种原因，它仅在刷新页面后才显示。如果我导航到不同的页面然后返回到我刚刚访问的产品页面，它又消失了。如果我刷新，它会显示。

这发生在 Safari、Chrome 和 Firefox、常规和隐身/隐私浏览以及移动设备 (iOS) 上。所以我假设这不仅仅是一个缓存问题，并且该按钮仅在页面刷新后显示。

我必须在“代码注入”字段中添加一些额外的代码才能显示按钮以及一些 CSS。我将在下面粘贴所有内容。

https://willryan.co/shop/gulfshores

（要查看我的问题，请刷新页面。然后导航到“商店”下的其他产品并再次刷新。请注意灰色的“查看购物车”按钮仅在刷新后显示）

编辑：转到设计 > 样式编辑器 > 并取消选中“启用 Ajax 加载”似乎已修复它。不确定禁用此功能是否有不利之处...

---

代码注入（还包括我实现的返回顶部按钮的代码）

<!-- Add Checkout Button after every Add to Cart button -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function() {
    $("<a class='checkoutbutton' href='/commerce/show-cart'>VIEW CART</a>").insertAfter(".sqs-add-to-cart-button");        
});
</script>

<!-- Icon for Back to Top --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<!--- For Back to Top Button ---->
<script>
   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 100) {
               $('.scrollup').fadeIn();
           } else {
               $('.scrollup').fadeOut();
           }
       });
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;
       });
   });
</script>

---

自定义 CSS

/* Add checkout buton after add to cart */
 .checkoutbutton {
   font-family: oswald;
   font-size: 16px;
   color: rgba(170,170,170,1);
   font-weight: 400;
   font-style: normal;
   text-align: center;
   width: 250px;
   text-decoration: none;
   padding: 13px 30px;
   margin: 10px;
   border: 2px;
   border-style: solid;
 }

 .checkoutbutton:hover {
   color: #fff;
   background-color: rgba(170,170,170,1);
   text-decoration: none;
   border: 2px;
   border-style: solid;
   border-color: rgba(170,170,170,1); 
 }

.scrollup {
   width: 50px;
   height: 50px;
   opacity: 0.4;
   position: fixed;
   bottom: 2%;
   right: 2%;
   display: none;
   /* text-indent: -9999px; */
   color: #aaaaaa;
 }

#site {
     max-width: 1400px; /*Adjust as desired.*/
     margin-right: auto;
     margin-left: auto;
 }



 /*Prevent header growing in height infinitely.*/
 #header {
     margin-top: 5%;
 }

Answer 1

在 Squarespace 中，当您的自定义 Javascript 仅在页面刷新后才有效时，它很可能与 Squarespace's AJAX loading 有关，正如您所确定的：

有时，Ajax 可能会与嵌入的自定义代码或锚点发生冲突 链接。 Ajax 还可以干扰站点分析，记录点击 仅限第一页。

disabling AJAX for your template 经常解决问题是正确的（尽管它也禁用了 AJAX 加载）。另一种解决方案是将您的自定义 Javascript 包装在此：

window.addEventListener("mercury:load", function(){
   // do stuff
});

注意：一些用户报告了使用此方法的混合结果。它最近对我个人有用，但其他因素可能会影响。