Add a Dash of Ajax<br />Jason Noble<br />http://jasonnoble.org<br />
Partial Templates<br />Methods for views<br />Move a portion of your view to a separate file<br />Invoke a given partial f...
app/views/carts/show.html.erb<br />
Rails render method<br />takes a collection as an argument<br />renders a partial view for each item<br />Partials filenam...
app/views/line_items/_line_item.html.erb<br />
app/views/carts/_cart.html.erb<br />
app/views/layouts/application.html.erb<br />
app/controllers/store_controller.rb<br />
public/stylesheets/depot.css<br />
app/controllers/line_items_controller.rb<br />
app/views/store/index.html.erb<br />Modify the Add to Cart to use Ajax<br />
app/controllers/line_items_controller.rb<br />Modify create to respond to JavaScript<br />
app/views/line_items/create.js.rjs<br />Render JavaScript<br />page is a JavaScript generator<br />Replaces HTML content o...
Highlight Changes<br />Product owner wants a visual cue that the cart has been updated<br />We’ll use the script.aculo.us’...
app/controllers/line_items_controller.rb<br />We need to know what item is being updated<br />
app/views/line_items/_line_item.html.erb<br />
app/views/line_items/create.js.rjs<br />Current Item will be tagged with id=“current_item”<br />Add Visual Effect via Java...
Hide Empty Carts<br />Customer would like to hide the cart if it is empty<br />We’ll do this first via not rendering the H...
app/views/carts/_cart.html.erb<br />
app/views/line_items/create.js.rjs<br />
app/models/cart.rb<br />app/views/layout/application.html.erb<br />
app/helpers/application_helper.rb<br />
app/views/layouts/application.html.erb<br />Use hidden_div_if helper<br />
app/controllers/carts_controller.rb<br />Don’t display “Your cart is empty” flash<br />
Run tests<br />rake test<br />1 failure, 9 errors<br />You can see errors as well<br />http://localhost:3000/products<br /...
app/views/layouts/application.html.erb<br />
Run tests<br />rake test<br />1 failure, 0 errors<br />We changed a redirect in the line items controller, we need to upda...
test/functional/line_items_controller_test.rb<br />
Testing ajax<br />test/functional/line_items_controller_test.rb<br />
What we did<br />Moved shopping cart into sidebar<br />Used :remote => true to Ajaxify our buttons<br />Used RJS template ...
Homework<br />Make clicking the image of the book add the item to the cart via Ajax<br />Change Empty Cart action to use A...
Upcoming SlideShare
Loading in …5
×

Dash of ajax

1,367 views
1,301 views

Published on

Adding Ajax to our Shopping cart

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,367
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dash of ajax

  1. 1. Add a Dash of Ajax<br />Jason Noble<br />http://jasonnoble.org<br />
  2. 2. Partial Templates<br />Methods for views<br />Move a portion of your view to a separate file<br />Invoke a given partial from multiple locations<br />Another view<br />Controller<br />
  3. 3. app/views/carts/show.html.erb<br />
  4. 4. Rails render method<br />takes a collection as an argument<br />renders a partial view for each item<br />Partials filenames start with with _<br />_line_item.html.erb<br />Inside the partial we will have a variable available the same name as the partial<br />_line_item partial has variable line_item<br />
  5. 5. app/views/line_items/_line_item.html.erb<br />
  6. 6. app/views/carts/_cart.html.erb<br />
  7. 7. app/views/layouts/application.html.erb<br />
  8. 8. app/controllers/store_controller.rb<br />
  9. 9. public/stylesheets/depot.css<br />
  10. 10. app/controllers/line_items_controller.rb<br />
  11. 11. app/views/store/index.html.erb<br />Modify the Add to Cart to use Ajax<br />
  12. 12. app/controllers/line_items_controller.rb<br />Modify create to respond to JavaScript<br />
  13. 13. app/views/line_items/create.js.rjs<br />Render JavaScript<br />page is a JavaScript generator<br />Replaces HTML content of the id cart with the rendered HTML<br />Now clicking Add to Cart doesn’t refresh the page, just the cart div<br />
  14. 14. Highlight Changes<br />Product owner wants a visual cue that the cart has been updated<br />We’ll use the script.aculo.us’ provided yellow fade technique<br />See other effects at http://madrobby.github.com/scriptaculous/demos/<br />
  15. 15. app/controllers/line_items_controller.rb<br />We need to know what item is being updated<br />
  16. 16. app/views/line_items/_line_item.html.erb<br />
  17. 17. app/views/line_items/create.js.rjs<br />Current Item will be tagged with id=“current_item”<br />Add Visual Effect via JavaScript<br />
  18. 18. Hide Empty Carts<br />Customer would like to hide the cart if it is empty<br />We’ll do this first via not rendering the HTML if the cart is empty<br />Then we’ll make it smoother by adding another JavaScript effect<br />
  19. 19. app/views/carts/_cart.html.erb<br />
  20. 20. app/views/line_items/create.js.rjs<br />
  21. 21. app/models/cart.rb<br />app/views/layout/application.html.erb<br />
  22. 22. app/helpers/application_helper.rb<br />
  23. 23. app/views/layouts/application.html.erb<br />Use hidden_div_if helper<br />
  24. 24. app/controllers/carts_controller.rb<br />Don’t display “Your cart is empty” flash<br />
  25. 25. Run tests<br />rake test<br />1 failure, 9 errors<br />You can see errors as well<br />http://localhost:3000/products<br />@cart is not being set in the products controller<br />Let’s make it optional<br />
  26. 26. app/views/layouts/application.html.erb<br />
  27. 27. Run tests<br />rake test<br />1 failure, 0 errors<br />We changed a redirect in the line items controller, we need to update the test<br />
  28. 28. test/functional/line_items_controller_test.rb<br />
  29. 29. Testing ajax<br />test/functional/line_items_controller_test.rb<br />
  30. 30. What we did<br />Moved shopping cart into sidebar<br />Used :remote => true to Ajaxify our buttons<br />Used RJS template to update page<br />Added highlight effect to show changes<br />Wrote helper to hide cart when it’s empty<br />Wrote tests to verify Ajax actions<br />
  31. 31. Homework<br />Make clicking the image of the book add the item to the cart via Ajax<br />Change Empty Cart action to use Ajax and blind_up effect<br />Experiment with other visual effects available<br />Add a link in the cart next to each item. Clicking the item should decrement the quantity of that item.<br />Write a view test to verify the empty cart is not viewable<br />

×