15、购物车与结账功能开发指南

购物车与结账功能开发指南

1. 处理闪屏消息

在购物车操作中，有时会出现闪屏消息显示异常的问题。例如，添加商品到购物车，清空购物车，再添加商品，仍会看到“购物车为空”的消息。这是因为使用 Ajax 将购物车插入页面时，只重绘了部分屏幕，闪屏消息依然存在。虽然重新加载页面可使消息消失，但我们可以使用 JavaScript 来隐藏它。

在 app/views/line_items/create.js.erb 文件中，当添加商品时会执行其中的代码，我们可以在此处添加隐藏闪屏消息的代码。闪屏消息渲染在一个带有 ID 为 notice 的 <p> 标签中，通过 getElementById() 方法定位该元素，若元素存在，将其 style 的 display 属性设置为 "none" 。

cart = document.getElementById("cart")
cart.innerHTML = "<%= j render(@cart) %>"
notice = document.getElementById("notice")
if (notice) notice.style.display = "none"

2. 使用 Action Cable 广播更新

以往用户的浏览器通过直接访问 URL 或