Magazon 다운로드 - Magazon 존 소스코드 다운로드

Magazon

기타 카테고리

1.0.0

다운로드

마가존

Magazon은 Amazon에서 영감을 받아 React/Redux를 사용하여 Ruby on Rails를 기반으로 구축된 웹 애플리케이션입니다. Magazon을 통해 사용자는 훌륭한 쇼핑 경험을 얻을 수 있습니다. 사용자는 다양한 카테고리의 제품을 살펴볼 수 있습니다. 장바구니에 담으세요. 배송지 주소와 결제 수단을 업데이트하고 최종 주문을 하세요. 사용자는 장바구니에 있는 제품 금액을 변경하고 주문 목록을 확인하며 각 주문에 대한 자세한 정보를 얻을 수도 있습니다. 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

제품 표시 - 사용자가 로그인한 경우 현재 제품이 마지막으로 본 제품과 다른 경우 현재 제품을 본 목록에 추가합니다.

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