试图在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%;
}
在Squarespace,当你的自定义JavaScript页面刷新后才能正常运行,它最有可能有做Squarespace's AJAX loading,你确定:
偶尔,阿贾克斯可以嵌入自定义代码或锚 链接冲突。 Ajax也会干扰网站分析,仅在第一页上记录点击量。
你是正确的,disabling AJAX for your template经常解决这个问题(尽管它也禁用了AJAX加载)。另一种解决方案是包装你的自定义JavaScript在此:
window.addEventListener("mercury:load", function(){
// do stuff
});
注:有些用户报告用这种方法混合的结果。它最近亲自为我工作,但其他因素可能是一种影响。
嘿布兰登,谢谢你的回应。 实际上,您在另一个关于此问题的线索中回复了我的另一个评论。 停用Ajax确实可行,但现在我很好奇,如果我可以解决这个问题而不禁用它。 关于汞负载代码,也许我错误地使用它?我将这个块粘贴在一个中,并在标签内添加了我的按钮代码,但我没有任何运气。是否需要按页面注入?还有什么我可能会失踪? 感谢您的帮助! –
在这种情况下,我会开始简单。查看是否可以使用'mercury:load'事件获得基本的'console.log()'语句,以便在初始加载和每个后续页面加载时始终如一地工作。如果可以,然后慢慢地将其他代码集成到其中,直到找到问题。但是如果简单的东西无法正常工作,那么有些模板可能会带来额外的因素。 – Brandon