Rails導入編 | カート機能の実装 | 20 | Helper

↓↓クリックして頂けると励みになります。

【19 | Ajaxリクエスト送信】 << 【ホーム】 >> 【21 | アクションケーブル（ActionCable）】

空のカートを隠す方法を考えます。
今回はヘルパーメソッドを使用します。
ヘルパーメソッドを作成すると、ビューで使用できます。
作成するヘルパーメソッドは「helpers」フォルダに保存します。
デフォルトで作成されている「application_helper.rb」ファイルの編集を行います。


「SampleCart/app/helpers」フォルダにある「application_helper.rb」ファイルを以下のように編集します。
このメソッドはifを使用して条件をチェックし、あてはまる場合はrender()を呼び出します。


記述編集　【SampleCart/app/helpers/application_helper.rb】

module ApplicationHelper
    def render_if(condition, record)
        if condition
            render record
        end
    end
end

ビューを編集します。
「SampleCart/app/views/markets/index.html.erb」ファイルを以下のように編集します。
変更するのは「<%= render_if @cart && @cart.line_items.any?, @cart %>」の記述です。


記述編集　【SampleCart/app/views/markets/index.html.erb】6行目

<div class="container mt-4">
    <div class="row">
        <!-- 右側(カート)-->
        <div class="col-md-4">
            <div id="cart" class="carts">
                <%= render_if @cart && @cart.line_items.any?, @cart %>
            </div>
        </div>
        <!-- 左側(商品リスト) -->
        <div class="col-md-8">
            <div class="row">
                <% @goods.each do |good| %>
                    <div class="col-md-4">
                        <div class="card">
                            <img src="<%= good.image_url %>" class="card-img-top">
                            <div class="card-body">
                                <h6 class="card-title"><strong><%= good.title %></strong></h6>

                                <div class="badge bg-danger fs-6">
                                    <%= good.price %>円
                                </div>
                                <br/>
                                <div class="badge bg-secondary">
                                    <%= good.maker %>
                                </div>
                                <div class="badge bg-primary">
                                    <%= good.category %>
                                </div>
                                <div class="mt-4">
                                    <%= link_to "この商品の詳細", good, class: "btn btn-success" %>
                                </div>
                                <div class="mt-4">
                                    <%= button_to 'カートに入れる', line_items_path(good_id: good ), class: "btn btn-warning", remote: true %>
                                </div>
                            </div>
                        </div>
                    </div>

                <% end %>
            </div>
        </div>        
    </div>
</div>

ブラウザの表示を確認します。
カートが空になると、カートが表示されなくなりました。

カート表示確認

フラッシュメッセージについても対処する必要があります。
Ajaxを使って商品をカートに追加するようになったため、ユーザーが買い物をしているときにトップページがリロードされなくなりました。
そのためカートが表示されているにもかかわらず、カートが空だというメッセージが残り続けてしまいます。
これを修正するために「SampleCart/app/views/line_items/create.js.erb」ファイルを以下のように編集します。


記述追加　【SampleCart/app/views/line_items/create.js.erb】4行目

cart = document.getElementById("cart")
cart.innerHTML = "<%= j render(@cart) %>"

notice = document.getElementById("notice")
if (notice) notice.style.display = "none"

これでフラッシュメッセージが残り続けるということがなくなりました。

【19 | Ajaxリクエスト送信】 << 【ホーム】 >> 【21 | アクションケーブル（ActionCable）】

↓↓クリックして頂けると励みになります。