Magazon

مجلة

Magazon هو تطبيق ويب مستوحى من Amazon ومبني على Ruby on Rails مع React/Redux. يتيح موقع Magazon للمستخدمين الحصول على تجربة تسوق رائعة. يمكن للمستخدمين الاطلاع على المنتجات في فئات مختلفة. ضعهم في عربة التسوق. قم بتحديث عنوان الشحن وطريقة الدفع وأخيرًا قم بتقديم الطلب. يمكن للمستخدمين أيضًا تغيير كمية المنتج في عربة التسوق، والتحقق من قائمة الطلبات المقدمة والحصول على معلومات مفصلة عن كل طلب. تحتوي Magazon أيضًا على العناصر التي تمت مشاهدتها مؤخرًا بواسطة المستخدم بالإضافة إلى قوائم العناصر التي تم شراؤها معًا بشكل متكرر.

التطبيق المباشر

سمات

• إضافة منتج إلى عربة التسوق - إنشاء منتج جديد في عربة التسوق أو زيادة كمية المنتج بمقدار منتج واحد إذا كان المنتج موجودًا بالفعل في عربة التسوق

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

صفحة الفهرس

عرض الفئة

صفحة المنتج

عربة التسوق

الطلبات الموضوعة