カートの設置

Ruby on Rails Academy #8

カートの設置

前回で、カートにアイテムを追加してからの一連の流れができました。
しかしながら、カートは現在、scaffoldに基づいた showで表示しているかと思います。
お察しの通りこれは親切とはいえません。ストアページのどこかに出すのが自然でしょう。

scaffoldをした時に _form.html.erb というファイルが生成されたかと思います。
これはrailsがそのモデルに基づいたフォームを自動生成しているものですが、同様にして、レイアウトでないものもパーシャルとしてrenderすることができます。

carts/_cart.html.erb を作成します。
showの中身をそちらに移動します。

そして、carts/show.html.erbを

<%= render @cart %>

にします。
ブラウザで開いて確認してみましょう。
次に、実際にストアページにも表示させるのですが、store#index ではまだカートの情報がないので

include CurrentCart
before_action :set_cart

def index

....

としましょう。

exercise 1

・ストアページに実際に配置しましょう
・line_itemもパーシャル化しましょう

exercise 2

・追加ボタンを押した時にストアページにとどまるようにしましょう。
・カートが空時は表示されないようにしましょう。

AJAX

現在はカートに追加を押す度にページが更新されています。
AJAXという非同期通信を用いてこの更新をなくすことができます。
追加ボタンのパラメータに

remote: true

line_items_controller.rbのcreateのレスポンスに

format.js

を追加し、

views/line_items/ に create.js.erb を作成し、

$('#cart').html("<%=j render(@cart) %>");

と、します。
こうすることで、rubyが出力した@cartの結果を含んだjavascriptレスポンスが渡され、画面に表示されます。

exercise 3

・jQuery UIを用いて、追加時になんらかのエフェクトが出るようにしましょう。
・Ajaxで送信されていることをテストしましょう。