【Rails】furimaアプリ 商品一覧表示機能 #1

実装概要

• 商品一覧表示機能を実装する

ルーティングの設定

config/routes.rb

# 中略
resources :items, only: [:index, :new, :create]
# 中略

コントローラー内にindexアクションを記述

app/controllers/items_controller.rb

def index
    @items = Item.all
end

eachメソッドを使って、商品情報を表示する

app/views/items/index.html.erb

# 中略
    <ul class='item-lists'>
      <% @items.each do |item| %>
        <li class='list'>
          <div class='item-img-content'>
            <%= image_tag item.image, class: "item-img" %>

            <%# 商品が売れていればsold outを表示しましょう %>
              <div class='sold-out'>
                <span>Sold Out!!</span>
              </div>
            <%# //商品が売れていればsold outを表示しましょう %>

          </div>
          <div class='item-info'>
            <h3 class='item-name'>
              <%= item.name %>
            </h3>
            <div class='item-price'>
              <span><%= item.price %>円<br><%= item.shipping_fee.name %></span>
              <div class='star-btn'>
                <%= image_tag "star.png", class:"star-icon" %>
                <span class='star-count'>0</span>
              </div>
            </div>
          </div>
        </li>
      <% end %>

      <% if @items.empty? %>
        <li class='list'>
          <%= link_to '#' do %>
            <%= image_tag "https://tech-master.s3.amazonaws.com/uploads/curriculums/images/Rails1-4/sample.jpg", class: "item-img" %>
            <div class='item-info'>
              <h3 class='item-name'>
                商品を出品してね！
              </h3>
              <div class='item-price'>
                <span>99999999円<br>(税込み)</span>
                <div class='star-btn'>
                  <%= image_tag "star.png", class:"star-icon" %>
                  <span class='star-count'>0</span>
                </div>
              </div>
            </div>
          <% end %>
        </li>
      <% end %>
    </ul>

<% if @items.empty? %>でitemsテーブルが空のときにダミーの商品情報が表示されるようにしている。

左上から、出品された日時が新しい順に表示されるようにindexアクション内を修正

app/controllers/items_controller.rb

# 中略
  def index
    @items = Item.order(created_at: :desc) # created_atの降順でソート
  end
end
# 中略

上記実装が確認できので、コードレビュー依頼！
1点修正あり。
誤ってコードを削除してしまっていた部分を復活させてLGTM
次の商品詳細表示機能実装に取り組んでいきます！！