👩

【ECサイト実装】会員ページ実装（会員側）

2023/07/15に公開

Rails

実装内容

会員詳細画面（マイページ）
会員編集画面
※Deviseが実装されている前提

Routing設定

ルーティングを記載する。

config/routes_rb

Rails.application.routes.draw do

 scope module: :public do
   get "customers/mypage" => "customers#show"
   get "customers/information/edit" => "customers#edit"
   patch "customers/information" => "customers#update"
 end

scope module: :public
今回は、URLにcustomerを含めずに、コントローラとビューのパスをpublic内に変更したいので、scope moduleメソッドを使う。
詳細は以下を参照のこと。

Controller作成

publicフォルダ内にcustomersコントローラを作成。

ターミナル

rails g controller public/customers

以下を追記。

app/controllers/public/customers_controller.rb

class Public::CustomersController < ApplicationController

  def show
    @customer = current_customer
  end
  
  def edit
    @customer = current_customer
  end
  
  def update
    customer = current_customer
    customer.update(customer_params)
    redirect_to customers_mypage_path
  end
  
  private
  
  def customer_params
    params.require(:customer).permit(:last_name,
                                     :first_name,
                                     :last_name_kana,
                                     :first_name_kana,
                                     :postcode,
                                     :address,
                                     :phone_number,
                                     :email
                                     )
  end
end

Viewページ作成

会員マイページ

app/views/public/customers/show.html.erb

<div class="container">
  <div class="row">
    <div class="col">
      <h4 class="my-5">マイページ</h4>
        <div class="d-flex align-items-center">
          <h3><b>登録情報</b></h3>
          <%= link_to "編集する", customers_information_edit_path, class:"btn btn-success ml-3" %>
        </div>
          <table class="table table-bordered">
            <tr>
              <td class="bg-light">氏名</td>
              <td><%= @customer.full_name %></td>
            </tr>

            <tr>
              <td class="bg-light">カナ</td>
              <td><%= @customer.full_name_kana %></td>
            </tr>

            <tr>
              <td class="bg-light">郵便番号</td>
              <td><%= @customer.postcode %></td>
            </tr>

            <tr>
              <td class="bg-light">住所</td>
              <td><%= @customer.address %></td>
            </tr>

            <tr>
              <td class="bg-light">電話番号</td>
              <td><%= @customer.phone_number %></td>
            </tr>

            <tr>
              <td class="bg-light">メールアドレス</td>
              <td><%= @customer.email %></td>
            </tr>
          </table>
            <div class="d-flex align-items-center">
              <h3><b>配送先</b></h3>
              <%= link_to "一覧を見る", "#", class:"btn btn-primary ml-3" %>
            </div>
            <div class="d-flex align-items-center">
              <h3><b>注文履歴</b></h3>
              <%= link_to "一覧を見る", "#", class:"btn btn-primary ml-3" %>
           </div>
    </div>
  </div>
</div>

イメージ
会員情報編集ページ

app/views/public/customers/edit.html.erb

<div class="container">
  <div class="row">
    <div class="col">
      <h4 class="my-5">会員情報編集</h4>
      <table class="table table-borderless">
        <%= form_with model: @customer, url: customers_information_path, method: :patch do |f| %>
        <tr>
          <td>氏名</td>
          <td><%= f.text_field :last_name %></td>
          <td><%= f.text_field :first_name %></td>
        </tr>

        <tr>
          <td>フリガナ</td>
          <td><%= f.text_field :last_name_kana %></td>
          <td><%= f.text_field :first_name_kana %></td>
        </tr>

        <tr>
          <td>郵便番号</td>
          <td><%= f.text_field :postcode %></td>
          <td></td>
        </tr>

        <tr>
          <td>住所</td>
          <td><%= f.text_field :address %></td>
          <td></td>
        </tr>

        <tr>
          <td>電話番号</td>
          <td><%= f.text_field :phone_number %></td>
          <td></td>
        </tr>

        <tr>
          <td>メールアドレス</td>
          <td><%= f.text_field :email %></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td><%= f.submit "編集内容を保存", class:"btn btn-success" %></td>
          <td><%= link_to "退会する", customers_unsubscribe_path, class:"btn btn-danger" %></td>
        </tr>
        <% end %>
      </table>
    </div>
  </div>
</div>

イメージ

ワイヤーフレームに近づけているだけです。
デザインを決めるフェーズが楽しみ。