チーム開発 いいね機能実装 マイページ

実装箇所

仕様の確認
1.商品のお気に入り登録ができる（商品詳細ページ、ログイン時のみ）
2.お気に入りにした商品を閲覧できる（マイページ）
3.商品一覧に反映（TOPページ）

本日は2.の実装を行いました。
完成したページは下記です。

いいね！がある時

いいね！がない時

作業内容

1.ルートの編集

[routes.rb]
resources :accounts, only: [:index, :show] do
    collection do
      get :likes
    end
end

マイページ内にviewを作る為、accountモデルにlikesアクションを追加

2.コントローラの編集

[accounts_controller]
ーーー追加ーーー
def likes
end

3.モデルの編集

[user.rb]
ーーー追加ーーー
has_many :liked_products, through: :likes, source: :product

アソシエーションを利用してliked_productsを擬似的に持たせることで、いいね！した商品のインスタンスを引っ張ってくることができる

4.viewの作成

[view/accounts/likes.html.haml]
.wrapper
  = render "top/others/header"
  - breadcrumb :mypage
  = render "layouts/breadcrumbs"

  .user__mypage

    = render "sidebar"

    .liked-index
      .liked-index__head
        いいね！一覧

      - current_user.liked_products.first(10).each do |product|
        = link_to product_path(product), class: "liked-index__link" do
          .liked-index__products
            .liked-index__products__product
              .liked-index__products__product--left
                = image_tag asset_path(product.images[0].src), class: "liked_product-image"
              .liked-index__products__product--right
                .liked-index__products__product--right__detail
                  %p
                    = product.category.root.name
                  %p
                    = product.category.parent.name
                  %p
                    = product.category.name
                  %p
                    = product.name
                .liked-index__products__product--right__price
                  %p
                    = converting_to_jpy(product.price)
              %i.fas.fa-chevron-right.go-to-show

      - if current_user.liked_products.blank?
        .liked-index-none
          = image_tag src= "/assets/material/logo/logo.png", class: "no-display-image"
          %p
            いいね！がありません

  = render "top/introduction/introduction-lower"
  = render "top/others/footer"
  = render "top/others/exhibition-btn"

- current_user.liked_products.first(10).each do |product|
ログインしているユーザーのいいね！した商品を最新から10コ表示するようにする

• if current_user.liked_products.blank?

いいねが無い時の表示を作成

5.CSS調整

躓き

下記の記述のように、liked_productsを作らず、
has_many :liked_products, through: :likes, source: :product
コントローラー内で無理やりいいね！した商品情報を作ろうとしており、コントローラーの非常に記述が長くなっていました。
やりたい実装を思い浮かべ、参考記事を探しながらアタリをつけることで、思いもよらぬ実装方法に行き着くことができて勉強になりました。
日々精進していきます。