Rails6.0 | 27 | Webアプリケーション開発 | 空のカートを隠す - 学生向けプログラミング入門

<<前　 [TOP] 　次>>

空のカートが商品の入っているカートに変わる時に再描写されずに表示させる方法を考えます。
また、アプリケーションのレイアウトに必要なときにのみカートを表示してそれ自体をレンダリングし続けます。
これはヘルパーメソッドを使用します。
ヘルパーメソッドはビューで使用できる関数です。
作成するヘルパーメソッドは「helpers」フォルダに保存します。
最初にアプリケーションを作成した時に生成された「application_helper.rb」ファイルがすでにあります。
今回のメソッドはアプリケーションのレイアウトで使うことになるのでこの「application_helper.rb」ファイルの編集を行います。

まずはレイアウトの編集です。
「C:\Rails6\work\shop\app\views\layouts」フォルダにある「application.html.erb」ファイルを以下のように編集します。
変更するのは「<%= render_if @cart && @cart.line_items.any?, @cart %>」の記述です。

【C:\Rails6\work\shop\app\views\layouts\application.html.erb】

<!DOCTYPE html>
<html>
  <head>
    <title>Railsはじめてマート　オンラインストア</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
	<header class="main">
		<%= image_tag 'logo.png', alt: 'Railsはじめてマート',  width: 80 %>
	</header>
	<section class="content">
		<nav class="side_nav">
			<div id="cart" class="carts">
				<%= render_if @cart && @cart.line_items.any?, @cart %>
			</div>
			<ul>
				<li><a href="/">ホーム</a></li>
				<li><a href="/questions">質問</a></li>
				<li><a href="/news">ニュース</a></li>
				<li><a href="/contact">問い合わせ</a></li>
			</ul>
		</nav>
		<main class='<%= controller.controller_name %>'>
		    <%= yield %>
		</main>

	</section>
  </body>
</html>

ヘルパーをコントローラから使えるように「application_helper.rb」に追加します。
「C:\Rails6\work\shop\app\helpers」フォルダにある「application_helper.rb」ファイルを以下のように編集します。
このコードはifを使用して条件をチェックし、あてはまる場合はrender()を呼び出します。

【C:\Rails6\work\shop\app\helpers\application_helper.rb】

module ApplicationHelper

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

ブラウザの表示を確認します。

フラッシュメッセージについても対処する必要があります。
Ajaxを使って商品をカートに追加するようになったため、ユーザーが買い物をしているときリクエストとリクエストの間にメインのページが再描画されなくなりました。
そのためサイドバーにカートが表示されているにもかかわらずカートが空だというメッセージが表示され続けてしまいます。
これを修正するために「C:\Rails6\work\shop\app\views\line_items」フォルダにある「create.js.erb」ファイルを以下のように編集します。

【C:\Rails6\work\shop\app\views\line_items\create.js.erb】

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

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

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

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

ランキング参加中

プログラミング

<<前　 [TOP] 　次>>