Magazon

雜誌

Magazon 是一款受 Amazon 啟發的 Web 應用程序，基於 Ruby on Rails 和 React/Redux 構建。 Magazon讓使用者獲得良好的購物體驗。使用者可以根據不同的類別來查看產品。將它們放入購物車。更新送貨地址和付款方式，最後下訂單。用戶還可以更改購物車中的產品數量、查看已下訂單清單並獲取每個訂單的詳細資訊。 Magazon 還具有用戶最近觀看的商品以及商品經常一起購買的商品清單。

直播應用程式

特徵

• 將產品加入購物車 - 在購物車中建立新產品，或者如果產品已存在於購物車中，則將產品數量增加一

 def create
  cart_product = current_user . cart . cart_products . where ( "product_id = ?" , cart_products_params [ :product_id ] ) . first
  if cart_product . nil?
    cart_product = current_user . cart . cart_products . new ( cart_products_params )
      if cart_product . save
        @cart = CartProduct . where ( cart_id : current_user . cart_id ) . order ( created_at : :desc )
        render 'api/carts/show'
      else
        render cart_product . errors . full_messages , status : 422
      end
  else
    cart_product . quantity += cart_products_params [ :quantity ] . to_i
      if cart_product . save
        @cart = CartProduct . where ( cart_id : current_user . cart_id ) . order ( created_at : :desc )
        render 'api/carts/show'
      else
        render cart_product . errors . full_messages , status : 422
      end
  end
end

• 顯示產品 - 如果使用者登錄，則將目前產品新增至觀看清單（如果目前產品與上次觀看的產品不同）。

 def show
  @product = Product . find ( params [ :id ] . to_i )
  if current_user
  last_watched_product = current_user . watched_products . order ( created_at : :desc ) . limit ( 1 ) . first
    if last_watched_product
      unless last_watched_product . product_id == @product . id
        watched_product = current_user . watched_list . watched_products . new ( product_id : @product . id )
        watched_product . save
      end
    else
      watched_product = current_user . watched_list . watched_products . new ( product_id : @product . id )
      watched_product . save
    end
  end
end

• 更改產品主圖像並在替代圖像部分突出顯示相應圖像

 changeMainPicture ( e , idx ) {
  e . preventDefault ( ) ;
  this . setState ( { main_picture : this . state . product . product_pictures [ idx ] } )
}

getSmallImageClass ( pic ) {
  if ( pic . image_url === this . state . main_picture . image_url ) {
    return "small-main-image" ;
  } else {
    return "alt-product-image" ;
  }
}

render ( ) {
  if ( this . state . product . title ) {
  return (
    < div className = "product-page" >
      < div className = "product-container" >
        < div >
          < ul className = "alt-images" >
            { this . state . product . product_pictures . map ( ( picture , i ) => {
              return (
                < li key = { i } className = { this . getSmallImageClass ( picture ) } >
                  < a onMouseOver = { ( e ) => this . changeMainPicture ( e , i ) } >
                    < img src = { picture . image_url } />
                  </ a >
                </ li >
              )
            } ) }
          </ ul >
        </ div >
...

索引頁

分類查看

產品頁面

購物車

已下訂單