管理者 商品詳細ページ

管理者の商品詳細ページの作成

bootstrap導入済　
namespases使用

---

コントローラー作成

アイテムを一つ取得して@item に格納

admin/items_controller.rb

ef show
   @item = Item.find(params[:id])
 end

views 詳細ページ作成

abmin/items/show.html.erb

<div class="container">
  <h2 class="text-center my-5">商品詳細</h2>
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div style="padding-left:20%;">
        <%= image_tag url_for(@item.image), class: 'img-fluid', style: 'width: 65%;' %>
      </div>
    </div>
    <div class="col-md-6">
      <p class="my-4"><strong>商品名 </strong><span style="margin-left:150px;"><%= @item.name %></span></p>
      <p class="my-4"><strong>商品説明 </strong><span style="margin-left:135px;"><%= @item.description %></span></p>
      <p class="my-4"><strong>税込価格（税抜価格） </strong><span style="margin-left:40px;"><%= number_with_delimiter((@item.price * 1.1).round) %>円 ( <%= number_with_delimiter(@item.price) %>円 )</span></p>
      <p class="my-4"><strong>販売ステータス </strong><span style="margin-left:90px; color:green;"><%= @item.on_sale? ? '販売中' : '販売停止中' %></span></p>
      <%= link_to '編集する', edit_admin_item_path(@item), class: 'btn btn-success' %>
    </div>
  </div>
</div>

div class="container
ページ全体を包むコンテナで、Bootstrapのクラスを利用しています。
class="text-center my-5"
見出しのテキスト（"商品詳細"）を中央に配置し（text-center）、上下のマージンを設定（my-5）しています。

商品の画像と詳細情報（名前、説明、価格、ステータス）は２つのカラム（col-md-6）に分けて表示されます。このカラムはBootstrapのグリッドシステムを利用しています。

<%= image_tag url_for(@item.image), class: 'img-fluid', style: 'width: 65%;' %>
商品画像を表示します。画像は65%の幅で表示し、img-fluid クラスによってレスポンシブ対応になります。

商品詳細情報（名前、説明、価格、ステータス）は p タグ内に表示されます。<%= @item.name %> のように、@item オブジェクトの属性をERBタグを使用して表示しています。これにより、対応する商品の情報が動的に表示されます。

価格については、number_with_delimiter メソッドを用いて3桁ごとにカンマを挿入し、見やすくしています。

販売ステータス は @item.on_sale? メソッドで状態を確認し、結果に応じて '販売中' または '販売停止中' を表示しています。

---

補足

ステータスの'販売中' を選択をしているのに '販売停止中'の表示になってしまう
（@item.on_sale?）を指定しているにもかかわらず判定されていない

現在のCreateItemsマイグレーションでは、itemsテーブルにname, description, price, is_active, そしてtimestampsの5つのカラムが存在するように作られています。しかし、これにはstatusというカラムが含まれていません。

ですので、以下のようにstatusカラムを作成します。

 create_table "items", force: :cascade do |t|
    t.string "name", null: false
    t.text "description", null: false
    t.integer "price", null: false
    t.boolean "is_active", default: true, null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
+   t.integer "status", default: 0
  end

一方、Itemモデルではstatusという名前のenumが定義されています。enumは一連のシンボル（今回の場合はon_saleとoff_sale）を整数にマッピングします。Railsはこれらのシンボルを使用して便利なメソッド（on_sale?, off_sale?など）を生成します。ただし、これらのenumはstatusという名前のカラムに依存しているため、そのカラムがテーブルに存在していなければ、正しく機能しません。

ですから、まずはitemsテーブルにstatusというカラムを追加する必要があります。これを行うために新しいマイグレーションファイルを作成します。

rails generate migration AddStatusToItems status:integer

マイグレーションファイルは以下のようになります。

class AddStatusToItems < ActiveRecord::Migration[6.1]
  def change
    add_column :items, :status, :integer, default: 0
  end
end

これはitemsテーブルにstatusという名前のinteger型のカラムを追加し、そのデフォルト値を0に設定するというマイグレーションです。

rails db:migrate

　完成イメージ