@books = Book.visible.all
@musics = Music.visible.all # 追加 render layout: 'front'
end
app/views/products/index.html.erb
<div class="row marketing">
<h2>BOOK</h2> <%# 追加 %>
<div class="col-lg-12">
<% @books.each do |book| %>
<h3><%= book.title %></h3>
<p><%= book.author %></p>
<p><%= book.published_on %></p>
<p><%= number_to_currency(book.try(:price), precision: 0, unit: "円") %></p>
<% end %>
</div>
<%# 以下を追加 %>
<div class="row marketing">
<h2>MUSIC</h2>
<div class="col-lg-12">
<% @musics.each do |music| %>
<h3><%= music.title %></h3>
<p><%= music.author %></p>
<p><%= music.published_on %></p>
<p><%= music.play_time %> 分</p>
<p><%= number_to_currency(music.try(:price), precision: 0, unit: "円") %></p>
<% end %>
</div>
</div>
3. 注文画面の作成
前項までで本と音楽の商品一覧が完成しました。
次は実際に商品を購入できるようにしていきます。今回は1注文1商品ずつ購入するように していきます。
(1) . 商品のオーダー情報モデル
まずは注文を管理するテーブル（ordersテーブル・order_detailsテーブル）を作成します。
ordersテーブルとorder_detailsテーブルは下記の図の通りです。
ordersテーブルに、購入者の情報(user_id)と商品の送付先(shipping_address)を持っ ています。order_detailsテーブルは、order_idと商品情報(product_id)を持っ ています。
① Orderモデルの作成
username:~/workspace/ (master) $ rails generate scaffold order shipping_address:string user:references
Running via Spring preloader in process 11657
Expected string default value for '--jbuilder'; got true (boolean) invoke active_record
create db/migrate/20161221055428_create_orders.rb create app/models/order.rb
invoke rspec
create spec/models/order_spec.rb invoke resource_route
route resources :orders invoke scaffold_controller
create app/controllers/orders_controller.rb invoke erb
create app/views/orders
create app/views/orders/index.html.erb create app/views/orders/edit.html.erb create app/views/orders/show.html.erb create app/views/orders/new.html.erb create app/views/orders/_form.html.erb invoke rspec
create spec/controllers/orders_controller_spec.rb create spec/views/orders/edit.html.erb_spec.rb create spec/views/orders/index.html.erb_spec.rb create spec/views/orders/new.html.erb_spec.rb create spec/views/orders/show.html.erb_spec.rb create spec/routing/orders_routing_spec.rb invoke rspec
create spec/requests/orders_spec.rb invoke helper
create app/helpers/orders_helper.rb invoke rspec
create spec/helpers/orders_helper_spec.rb invoke jbuilder
create app/views/orders/index.json.jbuilder create app/views/orders/show.json.jbuilder create app/views/orders/_order.json.jbuilder invoke assets
create app/assets/javascripts/orders.coffee invoke scss
create app/assets/stylesheets/orders.scss invoke scss
create app/assets/stylesheets/scaffolds.scss
app/assets/stylesheets/scaffolds.scssが作成されるので削除しておきましょう。
② OrderDetailモデルの作成
username:~/workspace/ (master) $ rails generate model order_detail order:references product:references Running via Spring preloader in process 11673
Expected string default value for '--jbuilder'; got true (boolean) invoke active_record
create db/migrate/20161221060004_create_order_details.rb create app/models/order_detail.rb
invoke rspec
create spec/models/order_detail_spec.rb
ordersテーブルとorder_details作成するためにマイグレーションを実行しましょう。
username:~/workspace/ (master) $ rails db:migrate
== 20161221055428 CreateOrders: migrating =====================================
-- create_table(:orders) -> 0.0151s
== 20161221055428 CreateOrders: migrated (0.0152s) ============================
== 20161221060004 CreateOrderDetails: migrating ===============================
-- create_table(:order_details) -> 0.0054s
== 20161221060004 CreateOrderDetails: migrated (0.0055s) ======================
各モデルの関係を設定するために、以下の内容を追記してください。
app/models/user.rb
class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :trackable, :validatable has_many :orders # 追加
ROLE = %w(admin general) end
app/models/order.rb
class Order < ApplicationRecord belongs_to :user
has_one :order_detail # 追加 end
app/models/product.rb
class Product < ApplicationRecord
scope :visible, ->(){ where(showing: true) } has_many :order_details # 追加
end
(2) . オーダー画面の作成
必要なテーブルが作成できたので、実際に画面を作成していきます。
上記画像のように、商品ごとに購入ボタンを追加します。
購入ボタンをクリックすると商品購入ページへ移動し、配送先を入力して購入確定するよう にします。購入確定後は商品一覧へ戻るようにします。
① routes.rbの変更