Question

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

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

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

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

我不得不在“代码注入”字段中添加一些额外的代码，以显示按钮以及一些CSS。我会粘贴下面的所有内容。

https://willryan.co/shop/gulfshores

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

编辑：去设计＆gt;样式编辑器＆gt;并取消选中“启用Ajax加载”似乎已修复它。不确定是否有缺点要禁用此功能......

CODE INJECTION（还包括我实施的返回顶部按钮的代码）

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

CUSTOM 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
});

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

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

1 个答案: