Magazon

Magazin

Magazon ist eine von Amazon inspirierte Webanwendung, die auf Ruby on Rails mit React/Redux basiert. Magazon ermöglicht Benutzern ein großartiges Einkaufserlebnis. Benutzer können die Produkte in verschiedenen Kategorien durchsuchen. Legen Sie diese in den Warenkorb. Lieferadresse und Zahlungsart aktualisieren und abschließend eine Bestellung aufgeben. Benutzer können auch die Produktmenge im Warenkorb ändern, die Liste der aufgegebenen Bestellungen einsehen und detaillierte Informationen zu jeder Bestellung erhalten. Magazon verfügt außerdem über Listen mit den zuletzt angesehenen Artikeln des Benutzers sowie mit den häufig zusammengekauften Artikeln.

Live-App

Merkmale

• Produkt zum Warenkorb hinzufügen – erstellt ein neues Produkt im Warenkorb oder erhöht die Produktmenge um eins, wenn das Produkt bereits im Warenkorb vorhanden ist

 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

• Produkt anzeigen – wenn der angemeldete Benutzer das aktuelle Produkt zur Beobachtungsliste hinzufügt, wenn das aktuelle Produkt vom zuletzt beobachteten Produkt abweicht.

 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

• Ändern Sie das Hauptbild des Produkts und markieren Sie das entsprechende Bild im Abschnitt mit alternativen Bildern

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

Indexseite

Kategorieansicht

Produktseite

Warenkorb

Bestellungen aufgegeben