当购物车的总价低于$10时,我可以隐藏结帐按钮并显示提醒文本。但是…当购物车总价超过$10时,购物车抽屉如何自动更新而不刷新页面?
下面是我的代码:{% if cart.total_price < 1000 %}
Over $10 to checkout!
{% else %}
<div class="button">
<a class="btn-checkout" href="/cart">checkout</a>
</div>
{% endif %}
Shopify是按分来处理钱的,所以你应该改变它,以便一切工作:
{% if cart.total_price < 1000 %}
Over $10 to checkout!
{% else %}
<div class="button">
<a class="btn-checkout" href="/cart">checkout</a>
</div>
{% endif %}
使用Shopify网站时要记住的第一件事是Liquid是一种模板语言,而不是脚本语言。当一个访问者在你的商店请求一个页面时,Shopify的服务器会解释Liquid命令来组装一个最终文档,该文档通过互联网发送到客户的浏览器,其中没有任何模板标记-最终结果只是一个普通的HTML, Javascript或CSS页面。
用if…因此,else在Liquid中可以很好地用于静态站点,其中任何购物车操作都会导致页面重新加载-但不能用于动态站点,因为页面只能在服务器将其放在一起的那一刻准确。
对于已经加载的页面的动态更改,您将需要脚本语言-特别是Javascript。要进行所需的编辑,需要找到负责呈现主题的抽屉推车的Javascript代码,并进行代码更新,以便在那里切换结帐按钮。不幸的是,由于主题可以(并且确实)以主题开发人员当时感觉的任何方式进行此操作,因此我无法与您分享在不看到相关代码的情况下进行此更新的唯一正确方法。
如果你很幸运,你有一个主题,你需要的JS文件很好地布局,很容易在assets
文件夹中找到,通常有一个像theme.js
或shop.js
这样的名字。如果找不到正确的文件,但熟悉浏览器的开发工具,可以使用以下方法跟踪更新购物车的Javascript函数(我以前使用过很多次):
- 打开你的开发工具到"网络";标签
- 导航到产品页面
- 在页面完全加载后清除网络日志以减少混乱
- 将商品添加到购物车中。你应该会看到一堆网络调用发生。
- 一旦项目被添加并且抽屉推车被可视化地更新,在网络流量中查找对
/cart.js
的调用-这将被您的主题用于获取购物车的最新状态的任何代码调用,以便项目,小计等可以更新。(如果你不能在列表中找到/cart.js
,寻找/cart/add.js
作为第二好的选择) - 你的网络选项卡应该有一个名为"启动器"的列。将鼠标光标悬停在这一行的条目上,可以看到"调用堆栈"。导致网络请求的函数的列表,最上面是最近的。单击任何函数名都会将您带到相关javascript文件中的那一行。
- 如果你降落在某个看起来像胡言乱语,你可能碰到了某个helper库在您想要查找的代码和实际请求之间-返回到调用堆栈并向下尝试下一个函数,直到找到一些看起来应该被真正的人类阅读的东西。
- 我们希望找到一个具有描述性名称的函数与购物车更新相关的,例如
drawCart
,doCartUpdate
,onProductAdded
等
一旦你有找到有问题的函数,你如何进行更新,以实际呈现你想要的变化将在很大程度上取决于主题如何更新侧车。对于某些主题,其中所有Javascript文件(而不仅仅是helper库)都被简化为难以辨认的名称并压缩到一行中,您可能会在不真正了解代码的具体细节的情况下尽可能地做到这一点。其他主题可能会使用Javascript的模板库(如Handlebars)来呈现更新,因此您的更改将更容易更新到隐藏在主题文件中的某个模板文件。当然,你的主题可以在两者之间做任何事情-但如果你至少可以找到你的主题在哪里以及如何生成购物车抽屉,你就可以自定义它了!如果你设法做到了这一点,但你需要做的改变对你来说并不明显,这当然需要在这里提出一个后续问题。