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

Question

底部有问题页面的链接。

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

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

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

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

https://willryan.co/shop/gulfshores

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

编辑:转到“设计”>“样式编辑器”> 并取消选中“启用 Ajax 加载”似乎已解决此问题。不确定禁用此功能是否有缺点...

---

代码注入(inject)(还包括我实现的返回顶部按钮的代码)

<!-- 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 有关。 ，正如您所确定的:

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

你是对的 disabling AJAX for your template通常会解决问题(尽管它也会禁用 AJAX 加载)。另一种解决方案是将您的自定义 Javascript 包装在此:

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

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