前回はカタログアプリケーションの作成に着手しました。
今回も引き続き作成していきます。
・ヘルパーを使った価格のフォーマット
データベース内にある価格を12.34なら$12.34、13なら$13.00と表示するようにします。
方法の一つとしてビュー内で表示をrubyのコードを使って書くという技もあるのですが、あまりスマートでなく保守的でもありません。
そこで、ヘルパーメソッドのnumber_to_currencyを使って書いてみましょう。
rubyのコードでは、
<span class="price"><%= sprintf("$%0.02f", product.price) %></span>と書かなければいけないのを、ヘルパーメソッドを用いれば、
<span class="price"><%= number_to_currency(product.price) %></span>
となります。
ちなみにどちらも<%= product.price %>の１文を改造したものです。
そして、ブラウザ上で実行する前に.00を確認するためマイグレーションをいじります。
前にソースをダウンロードしてきた○○_add_test_data.rbを覚えているでしょうか？
あのファイルの中のpriceの項を好きなように変更してみてください。
その後テーブルの値の変更を適用するため以下のコマンドを実行してみてください。
>rake db:migrate:redo
こうすることにより、再度マイグレーションを実行し直すことが出来ます。
これらを実装すれば以下のように＄と.00が表示されるはずです。
実際、.00の部分は前にdb/schema.rbのところで.00にするようにしているため今回の変更ではあまり恩恵はないことに留意してください。
・カートへのリンク
このカタログに「カートへ入れる」という風なリンクをつけていきます。
今回はbutton_toメソッドを使ってカートへ入れるボタンを作成しましょう。
<h1>Pragmaticカタログ</h1> <% for product in @products -%> <div class="entry"> <%= image_tag(product.image_url) %> <h3><%=h product.title %></h3> <%= product.description %> <div class="price-line"> <span class="price"><%= number_to_currency(product.price) %></span> <%= button_to "カートに入れる" %> </div> </div> <% end %>
これを実装すると価格の下にボタンが設置されるのですがそれではイマイチ見た目が良くありません。
クライアントからの要望が価格の横にというものだったらという仮定でしたら次はCSSファイルをいじります。
#store .entry form,#store .entry form div{
display: inline;
}この３行を加えるだけで価格の横にボタンが設置されました。
尚、ボタンのアクションはまだ設定されていないので押しても何も起こりません。
これはまたカートが完成した際に改良しましょう。
さて、カタログの作成はこのような感じで完成です。
今回はここまで。
次回は、カートアプリケーションの作成に入ります。
