Agile Web Development with Rails 3nd Edition学习笔记-格式化价格和添加购物按钮

这篇只有很少的一点内容,只是说说如何格式化价格数据成为货币的格式,以及在价格后面添加一个“添加到购物车”的按钮。
1. 格式化价格数据:
一般,我们在格式化数据的时候,首先想到的总是sprintf之类的具有格式化字串能力的方法。例如,当我们要格式化12.34为$12.34,而格式化13成$13.00时可以这样写:
<%= sprintf("$%0.02f" , product.price) %>

但当我们想做到全球化时,这个方法就不是那么好用了。因为每个国家表示货币的字符都不尽一致。对于这个问题,Rails为我们提供了一个更好的途径来完成这件事,那就是Helper方法number_to_currency。
让我们修改app/views/store/index.html.erb文件中的第9行来看看实际的效果。
修改前:
<span class="price" ><%= product.price %></span>

修改后:
<span class="price" ><%= number_to_currency(product.price) %></span>

好,现在刷新一下页面,就可以看到格式化后的价格了。

2. 添加一个“添加到购物车”按钮:
书中在这里讲了2个链接方法的一些区别,记述如下:
a、link_to:
这个Helper会生成一个<a href=...>的tag。当你点击这个链接是,浏览器会生成一个HTTP GET请求给服务器。HTTP GET请求不应该改变服务器端的任何状态。而只应该用来取得信息。
b、button_to:
这个Helper会生成一个只包含一个按钮的Form。当用户点击它的时候,其产生一个HTTP POST请求给服务器。Post请求仅仅是向服务器发送了一个要做某事的通知。
从这两中链接方法的区别我们可以看到,我们这里用来实现“添加到购物车”按钮最适合的就是button_to了。所以,我们在app/views/store/index.html.erb文件的第9行之后添加如下代码:
<%= button_to "Add to Cart" %>

刷新我们的页面,我们会发现这个按钮被添加到了价格的下面。如过我们希望这个按钮跟在价格的后面该怎么做呢?我们可以通过CSS来完成这件事。
在public/stylesheets/depot.css中加入如下代码:
#store .entry form, #store .entry form div {
display: inline;
}

这时再刷新页面,按钮就跑到价格的后面去了。

下图就是今天修改后的效果了。那个按钮的长相其实还不错啦!哈哈! :D
[img]http://dl.iteye.com/upload/attachment/236887/3c78a09d-e49f-307f-87ad-90ac128753b0.jpg[/img]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值