2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

条件分岐 present?

Posted at

今回はフリマアプリで
①1つも商品が出品されていない場合はダミー画像が表示されること
②商品が1つでも出品されていればダミー画像は表示されていないこと
こちらの条件を実装した。

最初に記述したのは下記の通り。

<% if @items.length == 0 %>
      <% @items.each do |item|%>
      <li class='list'>
        <%= link_to item_path(item.id) do %>
          <div class='item-img-content'>
          <%= image_tag item.image,class:  "item-img" %>

          <%# 商品が売れていればsold outを表示しましょう %>
          <% if @items.present? %>
            <div class='sold-out'>
              <span>Sold Out!!</span>
            </div>
          <% end %>
          <%# //商品が売れていればsold outを表示しましょう %>

          </div>
        <div class='item-info'>
          <h3 class='item-name'>
              <%= item.product_name %>
          </h3>
          <div class='item-price'>
              <span><%= item.price %>円<br><%= item.shipping_charge.name %></span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
    <% end %>
      </li>
      <% end %>
      <%# //商品のインスタンス変数になにか入っている場合、中身のすべてを展開できるようにしましょう %>

      <%# 商品がない場合は以下のダミー商品が表示されるようにしましょう %>
      <% else %>
      <%# 商品がある場合は表示されないようにしましょう %>
      <li class='list'>
        <%= link_to '#' do %>
        <%= image_tag "https://tech-master.s3.amazonaws.com/uploads/curriculums/images/Rails1-4/sample.jpg", class: "item-img" %>
        <div class='item-info'>
          <h3 class='item-name'>
            商品を出品してね!
          </h3>
          <div class='item-price'>
            <span>99999999円<br>(税込み)</span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
        <% end %>
      </li>

こちらだと何も投稿していない時はダミー画像が表示されるようになったが
代わりに今まで表示されていた出品した画像が表示されなくなってしまった。
データーベースには出品した情報は保存されているのに。。。

原因を深堀してみると

```ruby
<% if @items.length == 0 %>

こちらだと空の場合なのでeach文の上に記述するとあべこべになっており表示されなくなってしまったようだ。
なので使用するメソッドを変えてみた。

<% if @items.present? %>
      <% @items.each do |item|%>
      <li class='list'>
        <%= link_to item_path(item.id) do %>
          <div class='item-img-content'>
          <%= image_tag item.image,class:  "item-img" %>

          <%# 商品が売れていればsold outを表示しましょう %>
          <% if @items.present? %>
            <div class='sold-out'>
              <span>Sold Out!!</span>
            </div>
          <% end %>
          <%# //商品が売れていればsold outを表示しましょう %>

          </div>
        <div class='item-info'>
          <h3 class='item-name'>
              <%= item.product_name %>
          </h3>
          <div class='item-price'>
              <span><%= item.price %>円<br><%= item.shipping_charge.name %></span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
    <% end %>
      </li>
      <% end %>
      <%# //商品のインスタンス変数になにか入っている場合、中身のすべてを展開できるようにしましょう %>

      <%# 商品がない場合は以下のダミー商品が表示されるようにしましょう %>
      <% else %>
      <%# 商品がある場合は表示されないようにしましょう %>
      <li class='list'>
        <%= link_to '#' do %>
        <%= image_tag "https://tech-master.s3.amazonaws.com/uploads/curriculums/images/Rails1-4/sample.jpg", class: "item-img" %>
        <div class='item-info'>
          <h3 class='item-name'>
            商品を出品してね!
          </h3>
          <div class='item-price'>
            <span>99999999円<br>(税込み)</span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
        <% end %>
      </li>
  <% end %>
  <% if @items.present? %>

このpresent?を使うことにより指定したインスタンスが存在する時になったので
無事出品した商品は表示されダミーの画像は表示されなくなった。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?