14、电商应用开发：从Ajax优化到订单处理的全流程实践

电商应用开发：从Ajax优化到订单处理的全流程实践

1. 为购物车添加Ajax支持

在为购物车添加了一系列Ajax功能后，我们可以清空购物车并添加商品来进行测试。其实，实现这些功能主要有两个关键步骤：
- 第一步，根据购物车中的商品数量，通过CSS的显示样式来控制购物车的隐藏和显示。
- 第二步，使用JavaScript指令，当购物车从空变为有商品时，实现一个隐藏效果。

目前，这些更改主要是视觉上的优化，还未涉及功能上的改变。接下来，我们将改变页面的行为，让点击商品图片就能将商品添加到购物车，使用jQuery可以轻松实现这一功能。

1.1 让图片可点击

之前我们的操作主要是针对按钮和链接的点击事件，现在我们要处理图片的点击事件，并执行自定义的行为。具体来说，我们需要一个在页面加载时执行的脚本，该脚本会找到所有图片，并将点击事件的处理逻辑关联到对应的“添加到购物车”按钮上。

首先，我们来看一下页面的结构：

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% @products.each do |product| %>
<div class="entry">
  <%= image_tag(product.image_url) %>
  <h3><%= product.titl