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

链接到底部有问题的页面。试图在Squarespace产品页面上添加第二个按钮

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%; 
}

来源

2017-07-15 Will Ryan

在Squarespace，当你的自定义JavaScript页面刷新后才能正常运行，它最有可能有做Squarespace's AJAX loading，你确定：

偶尔，阿贾克斯可以嵌入自定义代码或锚链接冲突。 Ajax也会干扰网站分析，仅在第一页上记录点击量。

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

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

注：有些用户报告用这种方法混合的结果。它最近亲自为我工作，但其他因素可能是一种影响。

来源

2017-07-15 22:30:38 Brandon

嘿布兰登，谢谢你的回应。实际上，您在另一个关于此问题的线索中回复了我的另一个评论。停用Ajax确实可行，但现在我很好奇，如果我可以解决这个问题而不禁用它。关于汞负载代码，也许我错误地使用它？我将这个块粘贴在一个中，并在标签内添加了我的按钮代码，但我没有任何运气。是否需要按页面注入？还有什么我可能会失踪？感谢您的帮助！ –

在这种情况下，我会开始简单。查看是否可以使用'mercury：load'事件获得基本的'console.log（）'语句，以便在初始加载和每个后续页面加载时始终如一地工作。如果可以，然后慢慢地将其他代码集成到其中，直到找到问题。但是如果简单的东西无法正常工作，那么有些模板可能会带来额外的因素。 – Brandon

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

回答

相关问题