anndoko

<!-- Radio Button UI (Bootstrap) -->
<div class="btn-group" data-toggle="buttons">
  <% Event::STATUS.each do |status| %>
    <label class="btn btn-default <%= (status == f.object.status)? 'active' : '' %>">
      <%= f.radio_button :status, status %>
      <%= t(status, :scope => "event.status") %>
    </label>
  <% end %>
</div>

anndoko

<div class="product-index">
  <div class="container">
      <!-- 左側：產品列表，佔 8/12 -->
      <section class="col-md-8 main">
        <% @prodcuts.products.each_with_index do |product, index| %>
          <!-- 把產品的內容印出來 -->
          <div class="row">

          </div>
        <% end %>

anndoko

# app/models/product.rb

# scope，隨機選 3 項商品
scope :random3, -> { limit(3).order('RANDOM()') }

anndoko

<!--=== 商品列表迴圈示範代碼，利用迴圈把 @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 %>
        <!-- 商品圖片 -->

anndoko

<!-- 商品圖片 -->
<div class="row">
  <% if @product_images.present? %>
  <!-- 第一張圖為 medium 尺寸大圖 -->
  <div class="col-md-12">
    <%= image_tag(@product_images.first.image.thumb.url, class: 'main-image') %>
  </div>
    <% @product_images.each_with_index do |p| %>
      <!-- 顯示所有商品圖片 - other 尺寸小圖 -->
      <div class="col-md-2 col-sm-4 col-xs-6 image-box">

anndoko

$(document).on('scroll', function () {
  /*===== Welcome#index - 首頁導航列變化 =====*/
	if ($(this).scrollTop() > 125) {
		$('#navbar').addClass('show_bgcolor')
	} else {
		$('#navbar').removeClass('show_bgcolor')
	}

  /*===== Welcome#index - 回到頁面頂端 =====*/
  if ($(this).scrollTop() > 2500) {