Rails/Bootstrap : link_to メソッドでCard全体をリンクにしたい（ブロックを渡したい）が、リンクにならない

Question

ネット記事なども参考にしながら書いていますが、Card（写真＋文書）全体をリンクにしたいのですが、うまくいきません。（参考にしたサイト： http://papagram.com/link-to-method、http://prozium.hatenablog.com/entry/2015/06/22/145556）

どなたかご教示頂けますと有難いです。CSSが悪さをしているとは思いませんが、念の為、記載します。Rubyのerb内コードは２パターン記載してますが、どちらもうまくいきませんでした。

<div class="container">
  <div class="row">
    <% @products.each do |p| %>
    <div class="col-md-3 col-sm-4 col-xs-6">
      <%= link_to [:user, p ] do %>
      <div class= 'card' %>
        <div class= 'wwrapper' >
          <%= link_to image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %>
          <div class="card-img-overlay brandimage">
            <h4 class="card-title brandtitle"><%= p.brand %>イヤリング</h4>
          </div>
        </div>
        <div class="card-block">
          <h5 class="card-text"><%= p.memo %></h5>
          <h5 class="p-price "><%= p.price %>円</h5>
          <%= link_to "購入", "#", class: "btn bg-buy" %>
        </div><!--card-block-->
      </div><!--card-->
      <% end %>
    </div><!--col-->
    <% end %>
  </div><!--row-->
</div><!--container-->

<div class="container">
  <div class="row">
    <% @products.each do |p| %>
    <div class="col-md-3 col-sm-4 col-xs-6">
      <%= link_to [:user, p], class: 'card' do %>
        <div class= 'wwrapper' >
          <%= link_to image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %>
          <div class="card-img-overlay brandimage">
            <h4 class="card-title brandtitle"><%= p.brand %>イヤリング</h4>
          </div>
        </div>
        <div class="card-block">
          <h5 class="card-text"><%= p.memo %></h5>
          <h5 class="p-price "><%= p.price %>円</h5>
          <%= link_to "購入", "#", class: "btn bg-buy" %>
        </div><!--card-block-->
      <% end %>
    </div><!--col-->
    <% end %>
  </div><!--row-->
</div><!--container-->

コード

.card {
   max-width: 15rem;
 }
.card-img-top {
   width: 100%;
 }
.wwrapper{
  position: relative;
}
.brandtitle{
  background-color:rgba(0, 0, 0, 0.5);
  bottom: 0rem;
  color: $white;
  position: absolute;
  width: 100%;
  margin-bottom: 0;
}
.brandimage {
  padding: 0;
}
.card-block{
  position: relative;
}
.p-price{
  bottom: 0;
  left: 0.2rem;
  position: absolute;
  margin-bottom: 0;
}
.bg-buy{
  background-color: $black;
  bottom: 0;
  color: $white;
  right: 0.2rem;
  position: absolute;
  margin-bottom: 0;
}

Comments

[退会済みユーザー]

提示されたURL二つ目にあるとおり、「<%= link_to %>がネストしていることが原因」なのでは？

[innjera]

いつも有難う御座います。自分で書いておりお恥ずかしい限りですが、imageタグをリンクにしていたことに気付いていませんでした。。。

Answer 1

コメント欄に記載されているように<%= link_to [:user, p ] do %>から<% end %>の間にもう一つlink_toがあることが原因と思います。

上下どちらのerbでも良いですが

<%= link_to image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %>

を

<%= image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %>

にすると解決するのではないでしょうか？

Comments

[innjera]

有難う御座います。自分で書いておりお恥ずかしい限りですが、imageタグをリンクにしていたことに気付いていませんでした。。。無事解決致しました。