- 浏览: 30231 次
- 性别:
- 来自: 苏州
最新评论
Agile Web Development with Rails 3nd Edition学习笔记-隐藏空的购物车
- 博客分类:
- Ruby and Rails
到现在位置,我们已经完成了产品列表和购物车功能。虽然看起来已经很棒了,但是,有一个细节,那就是当用户登录之后,就会有一个没有任何物品列表的购物车在那里。我们希望在这种情况下可以不显示它。因为有很多时候顾客来了只是转转,并不打算订购些什么。一个空购物车在那里不仅占了空间,而且也不是很美观。
书中其实讲了4中方法实现这个需求。前三个都不是很好,第四个其实是一个创建自定义Helper的范例,做出来的效果可以说是这4个方法中最好的一个。我们在这里一个一个的说说。
第一个方法是最简单的方法。也就是在显示购物车信息的代码段上加上一个条件判断。详细代码如下:
这个方法虽然达到了我们的要求,但是你会发现,这个方法会造成整个页面的刷新。
第二个方法是使用JavaScript的blind_down效果。为了使用这个效果,我们需要修改两个地方。
1.在depat/app/views/store/add_to_cart.js.rjs中添加JavaScript的使用代码:
2.在depot/app/models/cart.rb中添加上面代码中需要使用的total_items方法:
这个方法有一个很棒的效果就是我们的购物车信息可以以滑动的方式出现。但是不知道为什么,我这里需要刷新页面它才能出来,否则怎么添加产品都没动静。。。。。。
第三个方法是直接在<div id="cart">这个tag处添加判断,并引入一段CSS代码,使得这个div不被显示。
这个方法在我这里实验的时候和第二个方法的问题相同,就是在购物车被清空的时候能够很好的隐藏它,但是添加的时候怎么也不显示出来,只能刷新页面才行。
现在我们来看看这节的重点。也就是第四个方法。其实这个方法是从第三个方法演化而来的,同样使用了CSS的方式。只是这个CSS代码段将通过Helper的方式来填加罢了。
首先,我们需要在depot/app/helpers/store_helper.rb文件中定义一个叫做hidden_div_if的方法。
这个方法中提供了三个参数。第一个condition是传递进来的一个条件表达式,用以说明什么时候需要使用CSS代码段。第二个参数是要被隐藏的div这个tag的attribute列表。第三个block则是传递进来的要执行的代码段。
好,我们现在来使用这个helper在depot/app/views/layouts/store.html.erb添加我们的代码。
请使用下面的代码替换原来的“<%= render(:partial => "cart" ,bject => @cart) %>”一行。
最后,我们需要修改我们empty_cart方法,把之前显示的“Your cart is currently empty”内容去掉。也就是使用无参的redirect_to_index方法替换原先有参的代码行。
这样,我们的目的就达到了。
经过实验,第四个方法在清空购物车和添加商品的时候都能很好的隐藏或显示购物车。
好了,就到这里,就到这里吧!
书中其实讲了4中方法实现这个需求。前三个都不是很好,第四个其实是一个创建自定义Helper的范例,做出来的效果可以说是这4个方法中最好的一个。我们在这里一个一个的说说。
第一个方法是最简单的方法。也就是在显示购物车信息的代码段上加上一个条件判断。详细代码如下:
<% unless cart.items.empty? %> <== New <div class="cart-title" >Your Cart</div> <table> <%= render(:partial => "cart_item" , :collection => cart.items) %> <tr class="total-line" > <td colspan="2" >Total</td> <td class="total-cell" ><%= number_to_currency(cart.total_price) %></td> </tr> </table> <%= button_to "Empty cart" , :action => :empty_cart %> <% end %> <== New
这个方法虽然达到了我们的要求,但是你会发现,这个方法会造成整个页面的刷新。
第二个方法是使用JavaScript的blind_down效果。为了使用这个效果,我们需要修改两个地方。
1.在depat/app/views/store/add_to_cart.js.rjs中添加JavaScript的使用代码:
page.replace_html("cart" , :partial => "cart" , :object => @cart) page[:cart].visual_effect :blind_down if @cart.total_items == 1 <== New page[:current_item].visual_effect :highlight, :startcolor => "#88ff88" , :endcolor => "#114411"
2.在depot/app/models/cart.rb中添加上面代码中需要使用的total_items方法:
def total_items @items.sum { |item| item.quantity } end
这个方法有一个很棒的效果就是我们的购物车信息可以以滑动的方式出现。但是不知道为什么,我这里需要刷新页面它才能出来,否则怎么添加产品都没动静。。。。。。
第三个方法是直接在<div id="cart">这个tag处添加判断,并引入一段CSS代码,使得这个div不被显示。
<div id="cart" <% if @cart.items.empty? %> style="display: none" <% end %> > <%= render(:partial => "cart" , :object => @cart) %> </div>
这个方法在我这里实验的时候和第二个方法的问题相同,就是在购物车被清空的时候能够很好的隐藏它,但是添加的时候怎么也不显示出来,只能刷新页面才行。
现在我们来看看这节的重点。也就是第四个方法。其实这个方法是从第三个方法演化而来的,同样使用了CSS的方式。只是这个CSS代码段将通过Helper的方式来填加罢了。
首先,我们需要在depot/app/helpers/store_helper.rb文件中定义一个叫做hidden_div_if的方法。
module StoreHelper def hidden_div_if(condition, attributes = {}, &block) if condition attributes["style" ] = "display: none" end content_tag("div" , attributes, &block) end end
这个方法中提供了三个参数。第一个condition是传递进来的一个条件表达式,用以说明什么时候需要使用CSS代码段。第二个参数是要被隐藏的div这个tag的attribute列表。第三个block则是传递进来的要执行的代码段。
好,我们现在来使用这个helper在depot/app/views/layouts/store.html.erb添加我们的代码。
请使用下面的代码替换原来的“<%= render(:partial => "cart" ,bject => @cart) %>”一行。
<% hidden_div_if(@cart.items.empty?, :id => "cart" ) do %> <%= render(:partial => "cart" , :object => @cart) %> <% end %>
最后,我们需要修改我们empty_cart方法,把之前显示的“Your cart is currently empty”内容去掉。也就是使用无参的redirect_to_index方法替换原先有参的代码行。
这样,我们的目的就达到了。
经过实验,第四个方法在清空购物车和添加商品的时候都能很好的隐藏或显示购物车。
好了,就到这里,就到这里吧!
发表评论
-
Agile Web Development with Rails 3nd Edition学习笔记-高亮显示改变
2010-04-28 22:24 871当客户点击了“Add to Cart“按钮之后,购物车的数据改 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建一个基于Ajax的购物车
2010-04-27 22:59 944上篇笔记中,我们通过partial把购物车信息放到了index ... -
Agile Web Development with Rails 3nd Edition学习笔记-使用Ajax将购物车放入Sidebar
2010-04-27 00:38 1060之前,当用户点击了“Add to Cart“按钮之后,页面会跳 ... -
Agile Web Development with Rails 3nd Edition学习笔记-完成购物车
2010-04-26 22:41 856这一篇,我们来完成我们的购物车的制作吧。 首先,为了客户能够很 ... -
Agile Web Development with Rails 3nd Edition学习笔记-错误处理
2010-04-26 22:07 846这一部分其实东西很少,这里不做过多的描述,仅仅是记录下来,以便 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建更智能的购物车
2010-04-25 17:05 811上篇笔记我们已经让我们的网站能够保存客户选购的产品了,但是,似 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建购物车
2010-04-23 22:06 892上篇笔记中,我们为保 ... -
Agile Web Development with Rails 3nd Edition学习笔记-把Sessions放进数据库
2010-04-21 22:21 1020depot在线商店需要一个能保存用户选购的各种各样的商品的地方 ... -
Agile Web Development with Rails 3nd Edition学习笔记-格式化价格和添加购物按钮
2010-04-19 22:42 1040这篇只有很少的一点内 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建页面布局模板
2010-04-19 01:32 1009典型的网站一般都具有 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建产品目录列表
2010-04-18 19:48 791按照书上的引导,我们 ... -
Agile Web Development with Rails 3nd Edition学习笔记-美化我们的程序
2010-04-18 18:37 1029我们的程序现在显示出来的画面还是那么的原始和难看,接下来我们要 ... -
Agile Web Development with Rails 3nd Edition学习笔记-为数据增加校验处理
2010-04-18 00:23 978数据的校验是在model ... -
Agile Web Development with Rails 3nd Edition学习笔记-向数据库表追加字段
2010-04-18 00:07 927我们可以使用migration工具在存在的数据库表中追加字 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建Depot工程
2010-04-17 21:21 919开始学习ROR了,由于在开始跟着书做这个Depot工程 ...
相关推荐
Agile Web Development with Rails, 2nd Edition <br>有两份PDF文件,大小分别是7.39MB和6.55MB <br>作者: Dave Thomas , David Heinemeier Hansson , Leon Breedt , Mike Clark , James Duncan Davidson ,...
### 敏捷Web开发与Rails 3:关键知识点解析 #### 一、Rails版本与兼容性 本书《敏捷Web开发与Rails》第三版是基于Rails 2编写的。截至本书印刷时,当前可用的Rails Gem版本为2.1。书中所包含的所有代码均已在该...
文件列表中的《Agile Web Development with Rails 3nd Edition Beta.pdf》很可能是这本书的电子版,读者可以通过阅读此PDF文件获取完整的学习资料,包括详细的章节讲解、示例代码和练习题,以便在实践中不断巩固和...
在《Agile Web Development with Rails》中,读者可以学习到如何运用敏捷方法来规划项目,实施增量式开发,并通过频繁的反馈来提高产品质量。 Ruby on Rails(简称Rails)是一个基于Ruby语言的开源Web开发框架,它...
Ruby on Rails helps you produce high-quality, beautiful-looking web applications quickly. You concentrate on creating the application, and Rails takes care of the details., Tens of thousands of ...
Rails敏捷开发第三版,很不错的rails入门书,对初学rails的人很有用
《Agile Web Development with Rails-Second Edition-Beta》是一本专注于使用Ruby on Rails进行敏捷Web开发的书籍。这本书的第二版beta版提供了关于如何利用Rails框架高效构建动态、响应式网站的深入指导。作者们...
《敏捷Web开发与Rails》第四版是一本专为软件开发者设计的权威指南,全面涵盖了使用Ruby on Rails框架进行敏捷Web应用开发的知识。Rails 3是该版本的重点,它引入了许多新特性和改进,使得开发过程更为高效且灵活。...
《敏捷Web开发与Rails:程序指南 第四版》是一本深度探讨使用Ruby on Rails框架进行敏捷Web应用开发的专业书籍。本书旨在帮助开发者充分利用Rails 4的特性,提高开发效率,实现快速迭代和高质量的代码编写。 Rails是...
书中的"Pragmatic.Bookshelf.Agile.Web.Development.with.Rails.2nd.Edition.Dec.2006.eBook-BBL"可能是该书籍的电子版文件,它包含了全书的章节和内容。读者可以通过这个电子版深入学习Rails开发的各种技巧和最佳...
Agile Web Development with Rails 1-14节_ppt(老师发的修正版)
Agile Web Development with Rails, Third Edition by Sam Ruby, Dave Thomas, David Heinemeier Hansson Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including...
《敏捷Web开发与Rails 2nd Edition》源码解析 在Web开发领域,Rails框架以其高效、灵活和生产力提升的特点,成为了许多开发者首选的工具。《敏捷Web开发与Rails 2nd Edition》这本书深入浅出地介绍了如何使用Ruby ...
《敏捷Web开发与Rails》是一本深度探讨如何利用Ruby on Rails框架进行敏捷Web开发的指导书籍,由Dave Thomas、David Heinemeier Hansson等多位在Rails社区有着深厚贡献的作者共同编写。本书不仅覆盖了Rails的基本...