Magazon

マガジン

Magazon は、Amazon からインスピレーションを得た Web アプリケーションで、React/Redux を使用した Ruby on Rails 上に構築されています。マガジンはユーザーに素晴らしいショッピング体験を提供します。ユーザーはさまざまなカテゴリの製品を閲覧できます。買い物かごに入れてください。配送先住所と支払い方法を更新し、最後に注文します。ユーザーは、カート内の製品の数量を変更したり、発注済みの注文のリストを確認したり、各注文の詳細情報を取得したりすることもできます。 Magazon には、ユーザーが最近見たアイテムや、よく一緒に購入されているアイテムのリストもあります。

ライブアプリ

特徴

• 製品をショッピング カートに追加 - ショッピング カートに新しい製品を作成するか、製品がすでにショッピング カートに残っている場合は製品数量を 1 つ増やします。

 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

• show product - ユーザーがログインしている場合、現在の製品が最後に監視した製品と異なる場合は、現在の製品を監視リストに追加します。

 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 >
...

インデックスページ

カテゴリビュー

商品ページ

ショッピングカート

発注済み