Adding Ajax to our Shopping cart

1. Add a Dash of Ajax Jason Noble http://jasonnoble.org

2. Partial Templates Methods for views Move a portion of your view to a separate file Invoke a given partial from multiple locations Another view Controller

3. app/views/carts/show.html.erb

4. Rails render method takes a collection as an argument renders a partial view for each item Partials filenames start with with _ _line_item.html.erb Inside the partial we will have a variable available the same name as the partial _line_item partial has variable line_item

5. app/views/line_items/_line_item.html.erb

6. app/views/carts/_cart.html.erb

7. app/views/layouts/application.html.erb

8. app/controllers/store_controller.rb

9. public/stylesheets/depot.css

10. app/controllers/line_items_controller.rb

11. app/views/store/index.html.erb Modify the Add to Cart to use Ajax

12. app/controllers/line_items_controller.rb Modify create to respond to JavaScript

13. app/views/line_items/create.js.rjs Render JavaScript page is a JavaScript generator Replaces HTML content of the id cart with the rendered HTML Now clicking Add to Cart doesn’t refresh the page, just the cart div

14. Highlight Changes Product owner wants a visual cue that the cart has been updated We’ll use the script.aculo.us’ provided yellow fade technique See other effects at http://madrobby.github.com/scriptaculous/demos/

15. app/controllers/line_items_controller.rb We need to know what item is being updated

16. app/views/line_items/_line_item.html.erb

17. app/views/line_items/create.js.rjs Current Item will be tagged with id=“current_item” Add Visual Effect via JavaScript

18. Hide Empty Carts Customer would like to hide the cart if it is empty We’ll do this first via not rendering the HTML if the cart is empty Then we’ll make it smoother by adding another JavaScript effect

19. app/views/carts/_cart.html.erb

20. app/views/line_items/create.js.rjs

21. app/models/cart.rb app/views/layout/application.html.erb

22. app/helpers/application_helper.rb

23. app/views/layouts/application.html.erb Use hidden_div_if helper

24. app/controllers/carts_controller.rb Don’t display “Your cart is empty” flash

25. Run tests rake test 1 failure, 9 errors You can see errors as well http://localhost:3000/products @cart is not being set in the products controller Let’s make it optional

26. app/views/layouts/application.html.erb

27. Run tests rake test 1 failure, 0 errors We changed a redirect in the line items controller, we need to update the test

28. test/functional/line_items_controller_test.rb

29. Testing ajax test/functional/line_items_controller_test.rb

30. What we did Moved shopping cart into sidebar Used :remote => true to Ajaxify our buttons Used RJS template to update page Added highlight effect to show changes Wrote helper to hide cart when it’s empty Wrote tests to verify Ajax actions

31. Homework Make clicking the image of the book add the item to the cart via Ajax Change Empty Cart action to use Ajax and blind_up effect Experiment with other visual effects available Add a link in the cart next to each item. Clicking the item should decrement the quantity of that item. Write a view test to verify the empty cart is not viewable