本指南介绍如何使用 Liquid 片段、CSS 和 JavaScript 为 Shopify 商店构建免费送货进度条。该功能旨在通过视觉展示客户距离免费送货门槛的进度来激励客户。它确保进度条在初始页面加载时由 Liquid 正确渲染，并在购物车项目添加、更改或删除时实时更新。此实现还优先考虑了屏幕朗读器的无障碍性，并照顾有减少运动偏好的用户。第一步是创建名为 'free-shipping-bar.liquid' 的 Liquid 片段，该片段根据购物车总额和设定的门槛计算剩余金额和百分比。此片段随后在服务器上渲染进度条的初始状态及其消息，从而避免任何视觉延迟。随后添加自定义 CSS 来样式化进度条，包括填充动画的平滑过渡效果。接着创建名为 'free-shipping-bar.js' 的 JavaScript 文件以处理实时更新。此 JavaScript 代码从 '/cart.js' 获取当前购物车总额，并据此刷新进度条和消息。其实现方式是封装浏览器的原生 'fetch' 函数，使得进度条能在任何更改购物车的请求后自动更新。该指南强调了无障碍性的重要性，解释了 'role="progressbar"' 和 'aria-valuenow' 属性如何向屏幕阅读器暴露进度，而 'aria-live="polite"' 则优雅地宣布变更。该指南还涉及性能问题，指出对于偏好减少运动的用户将禁用填充动画。指南概述了若干限制和注意事项，例如与可能使用 XHR 而非 'fetch' 的旧版主题的兼容性、处理多种货币，以及对货币小数位数的假设。它强调免费送货规则必须在 Shopify 的送货设置中单独配置，以匹配进度条上显示的目标。最后，建议选择一个对客户而言感觉可实现的免费送货门槛。该指南最后建议在开发商店中进行彻底测试，以确保进度条在各种场景下（包括添加、删除以及达到门槛）均能正常工作。对于不愿维护自定义代码的用户，指南推荐 Brix 作为替代方案，它提供多层奖励进度条等其他功能。