Agile Web Development with Rails 3nd Edition学习笔记-高亮显示改变

购物车添加高亮效果

最新推荐文章于 2013-06-06 11:01:07 发布

最新推荐文章于 2013-06-06 11:01:07 发布 · 148 阅读

文章标签：

#Web #Rails #Ruby #JavaScript #ActiveRecord #ViewUI

Ruby and Rails 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在用户将商品加入购物车时，利用JavaScript的YellowFadeTechnique效果为所添加的商品提供短暂的高亮显示，增强用户体验。具体步骤包括：在模型中记录添加的产品信息；控制器中保存当前添加的商品对象；视图中根据该对象高亮对应的商品条目。

当客户点击了“Add to Cart“按钮之后，购物车的数据改变了。我们希望能够让用户清楚的看到是那个是哪个发生了改变。那么，我们让当前被改变（个数变化，或者添加了）的那个产品被高亮一段时间。
之前我们通过“javascript_include_tag”引入了一些JavaScript的库文件。其中有一个是effects.js的库文件。这个库文件为我们提供了很多视觉效果的实现，其中有一个叫做“Yellow Fade Technique”的效果，正式我们这次所需要的。这个效果是使用指定的开始颜色高亮指定的对象，然后渐渐消退，直到到达终了颜色结束。并使得指定对象的背景色恢复到高亮前的状态。
要实现这个效果，我们必须让程序知道我们要高亮的对象是哪个。而我们现在的程序是不知道的。所以在使用这个效果之前，我们需要做一些准备工作。
首先，我们需要修改depot/app/models/cart.rb文件，让Cart类记录下来当前添加的是哪个产品。

def add_product(product)
  current_item = @items.find {|item| item.product == product}
  if current_item
    current_item.increment_quantity
  else
    current_item = CartItem.new(product)    <= New
    @items << current_item                  <= Modified
  end
  current_item                              <= New
end

接下来我们需要修改depot/app/controllers/store_controller.rb文件的add_to_cart方法，把Cart的add_product方法返回的对象保存到一个属性中。

def add_to_cart
  product = Product.find(params[:id])
  @cart = find_cart
  @current_item = @cart.add_product(product)    <= Modified
  respond_to do |format|
    format.js
  end
rescue ActiveRecord::RecordNotFound
  logger.error("Attempt to access invalid product #{params[:id]}")
  redirect_to_index("Invalid product")
end

然后修改depot/app/views/store/_cart_item.html.erb文件来使用这个属性。

<% if cart_item == @current_item %>  <= New
  <tr id="current_item">             <= New
<% else %>                           <= New
  <tr>
<% end %>                            <= New
  <td><%=h cart_item.title %></td>
  <td>×<%= cart_item.quantity %></td>
  <td class="item-price"><%= number_to_currency(cart_item.price) %></td>
</tr>

最后，在depot/app/views/store/add_to_cart.js.rjs文件最后添加如下代码来使用我们需要的高亮效果。

page[:current_item].visual_effect :highlight,
                                  :startcolor => "#88ff88",
                                  :endcolor => "#114411"

好了，我们需要的效果就做好了。