Magazon

Revista

Magazon es una aplicación web inspirada en Amazon construida sobre Ruby on Rails con React/Redux. Magazon permite a los usuarios obtener una excelente experiencia de compra. Los usuarios pueden ver los productos en diferentes categorías. Mételos en el carrito de compras. Actualice la dirección de envío y el método de pago y finalmente realice un pedido. Los usuarios también pueden cambiar la cantidad del producto en el carrito, consultar la lista de pedidos realizados y obtener información detallada sobre cada pedido. Magazon también tiene listas de artículos vistos recientemente por el usuario, así como listas de artículos comprados juntos con frecuencia.

Aplicación en vivo

Características

• agregar producto al carrito de compras: crea un nuevo producto en el carrito de compras o incrementa la cantidad del producto en uno si el producto ya persiste en el carrito de compras.

 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

• mostrar producto: si el usuario inició sesión, agrega el producto actual a la lista de seguimiento si el producto actual difiere del último producto observado.

 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

• cambie la imagen principal del producto y resalte la imagen correspondiente en la sección de imágenes alternativas

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

página de índice

Vista de categoría

Página del producto

Carro de la compra

Pedidos realizados