💭

【Rails】ECサイト注文情報入力画面作成

2023/10/19に公開

Rails

初心者

DMM WEBCAMP

tech

ECサイトの注文情報入力画面作成の復習になります。

前提

migrationファイルさくせい作成済
コントローラ作成済

コントローラ記述

public/orswrs_controller.rb

def new
  @order = Order.new
end

View記述

public/orders/new.html.erb

<div class="container mt-5">
 <div class="col-md-12">
 <div class="mb-3 text-danger font-weight-bolder">
 <h3>注文情報入力</h3>
 </div>
    <%= form_with model: @order, url: check_orders_path do |f|  %>
    
  <h4>支払い方法</h4>
  <div>
    <%= f.radio_button :payment_method, Order.payment_methods_i18n[:credit_card] %>
    <%= f.label :payment_method_credit_card,Order.payment_methods_i18n[:credit_card] %>
  </div> 
  <div class="mb-2">
    <%= f.radio_button :payment_method, Order.payment_methods_i18n[:transfer] %>
    <%= f.label :payment_method_transfer, Order.payment_methods_i18n[:transfer]%>
  </div>
  <h4>お届け先</h4>
  <%= f.radio_button :address_type, "member_address", checked: true %>
  <%= f.label :address_type, "ご自身の住所" %>
  <div class="mb-2">
  〒<%= current_customer.postal_code + "　" + current_customer.address + "　" + current_customer.last_name + current_customer.first_name %>
  </div>
  <div>
    <%= f.radio_button :address_type, [:registered_address] %>
    <%= f.label :address_type,"登録済住所から選択" %>
  </div>
  
  <div>
    <%= f.select :address_id, options_from_collection_for_select(Address.where(customer_id: current_customer.id), :id, :address_display),class: "ml-3" %>
  </div>
  
  <div class="mt-3">
    <%= f.radio_button :address_type, "new_address" %>
    <%= f.label :address_type, "新しいお届け先" %>
  </div>
  <div>
  <%= f.label :address_postal_code, "郵便番号（ハイフンなし）",class: "col-3" %>
  <%= f.text_field :address_postal_code,class: "col-3" %>
  </div>
  <div>
  <%= f.label :address, "住所",class: "col-3" %>
  <%= f.text_field :address,class: "col-6" %>
  </div>
  <div>
  <%= f.label :address_name, "宛名",class: "col-3" %>
  <%= f.text_field :address_name,class: "col-3" %>
  </div>
  <div>
  <%= f.submit "確認画面へ進む",class: "btn btn-info text-center" %>
  </div>
  
  <% end %>
 </div>   
</div>

解説

<%= form_with model: @order, url: check_orders_path do |f| %>
@orderでラジオボタンを使って情報を送るために必要となります。
支払い方法選択
下記4つの記述で2つのラジオボタンが作成されます。
- <%= f.radio_button :payment_method, Order.payment_methods_i18n[:credit_card] %>、<%= f.label :payment_method_credit_card,Order.payment_methods_i18n[:credit_card] %>
- <%= f.label :payment_method_credit_card,Order.payment_methods_i18n[:credit_card] %>、<%= f.label :payment_method_transfer, Order.payment_methods_i18n[:transfer]%>

ラジオボタンについて

ラジオボタンは下記の記述で作成されます。
<%= f.radio_button :プロパティ名, "フォームで送る値" %>

ラジオボタン作成の記述に項目を付け足すことで完成図のように作成することが可能です。
項目はフォームヘルパーのlabelを使用し、下記の記述方法に当てはめて作成。
<%= f.label :プロパティ名, "表示する値" %>

<%= f.select :address_id, options_from_collection_for_select(Address.all, :id, :address_display),class: "ml-3" %>
こちらはモデルの情報をもとにしたテキストボックスになります。

テキストボックス

テキストボックスはフォーム内の select と組み合わせて使うことで下記のような記述方法になります。
<%= f.select :プロパティ名, options_from_collection_for_select(モデル, :フォームで送る値(メソッド), :セレクトボックスに表示する値(メソッド)) %>

テキストに表示する部分にはメソッドを入れる必要があるため、これらを表示するためのメソッドを配送先(Address)モデルに作成をします。

models/address.rb

def address_display
  '〒' + postal_code + ' ' + address + ' ' + name
end

僕はそれに気づかずかなりの時間を失ってしまいました笑

カリキュラムやいろいろな方の記事を参考に作成し復習として自分なりに載せてはいますが、解釈の違いや、もっといいやり方もたくさんあると思うので、記事の中で知識の相違やアドバイス等ありましたらご指摘よろしくお願いいたします！

前提

コントローラ記述

View記述

解説

参考

Discussion