products#index.html.erb

<!--=== 商品列表迴圈示範代碼，利用迴圈把 @products 的內容印出來 ===-->

<div class='row'>
  <!--=== 迴圈開始 ===-->
  <% @products.each_with_index do |product, index| %>
    <!-- 每一個產品 Grid 佔比：xs 尺寸 12/12，sm 尺寸 4/12，md 尺寸 3/12 -->
    <div class='col-xs-12 col-sm-4 col-md-3 product-content'>
      <!-- 點圖片，連結到該產品 -->
      <%= link_to product_path(product) do %>
        <!-- 商品圖片 -->
        <% if product.product_images.present? %>
          <%= image_tag(product.product_images[0].image.other.url, class: 'thumbnail')%>
        <% else %>
          <%= image_tag('http://placehold.it/200x200&text=No Pic', class: 'thumbnail') %>
        <% end %>
      <% end %>
      <!-- 資訊：產品名稱、價錢 -->
      <div class="product-info">
        <p><%= link_to(product.name , product_path(product)) %></p>
        <p><%= render_product_price(product) %></p>
      </div>
    </div>
  <% end %>
  <!--=== 迴圈結束 ===-->
</div>