Magazon

Magazon

Magazon est une application web inspirée d'Amazon construite sur Ruby on Rails avec React/Redux. Magazon permet aux utilisateurs de bénéficier d'une excellente expérience d'achat. Les utilisateurs peuvent parcourir les produits dans différentes catégories. Mettez-les dans le panier. Mettez à jour l’adresse de livraison et le mode de paiement et passez enfin une commande. Les utilisateurs peuvent également modifier la quantité de produits dans le panier, consulter la liste des commandes passées et obtenir des informations détaillées sur chaque commande. Magazon propose également des listes d'articles récemment regardés par l'utilisateur ainsi que des listes d'articles fréquemment achetés ensemble.

Application en direct

Caractéristiques

• ajouter un produit au panier - crée un nouveau produit dans le panier ou augmente la quantité de produit de un si le produit est déjà conservé dans le panier

 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

• afficher le produit - si l'utilisateur connecté ajoute le produit actuel à la liste surveillée si le produit actuel diffère du dernier produit regardé.

 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

• modifier l'image principale du produit et mettre en surbrillance l'image correspondante dans la section des images alternatives

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

Page d'index

Vue par catégorie

Page produit

Panier

Commandes passées