react-easy-cart

Shopping cart integrator

Easy integration of shopping cart into React JS applications.

NB: still at initial stages of development, You can test it out 🤓 .

Installation

 npm i react-easy-cart --save

Simple setup

import { CartButton, CartWrapper } from "react-easy-cart"

import React from "react";
import { CartButton, CartWrapper } from "react-easy-cart"

function App() {

  const products = [
    { id: 1, name: 'Stove', price: 6000, description: "Amazing product for cooking faster" },
    { id: 2, name: 'Cooker', price: 12000, description: "Amazing product for cooking faster" },
  ]

  const continueToCheckout = (continueToCheckoutData) => {
    console.log("continueToCheckoutData", continueToCheckoutData)
  }

  return (
    <CartWrapper cartShow={true} currencySign="$" continueToCheckout={continueToCheckout}>
      <div>
        {products.map((product, index) =>
          <React.Fragment key={index}>
            <div>
              <b>{product.name}</b>
              <p>{product.price}</p>
              <CartButton
                product={{
                  name: product.name,
                  id: product.id,
                  price: product.price,
                  description: product.description,
                  quantity: 1,
                  image: "https://drive.google.com/uc?id=18KkAVkGFvaGNqPy2DIvTqmUH_nk39o3z"
                }}
              />
            </div>
            <hr />
          </React.Fragment>
        )}
      </div>
    </CartWrapper>
  );
}

export default App;

More custom usage

Setup

import { CartWrapper, CartButton, CartListing } from "react-easy-cart"

Example

NB: make sure the application is wrapped up with the CartWrapper component

NB: CartWrapper cartShow prop must be set to false e.g cartShow={false}

import React from "react";
import { CartWrapper, CartButton, CartListing } from "reacteasycart"

function App() {

  const containerStyles =
  {
    display: "flex",
    justifyContent: "space-between",
    marginLeft: "50px",
    marginRight: "50px",
    marginTop: "50px"
  }

  const productButtonStyles =
  {
    width: '10%',
    marginRight: "50px"
  }

  const products = [
    { id: 1, name: 'yogurt', price: 6000, description: "amazing product for cooking faster" },
    { id: 2, name: 'milk', price: 12000, description: "amazing product for cooking faster" },
  ]

  const continueToCheckout = (checkoutDetails) => {
    console.log(checkoutDetails)
  }

  return (
    <CartWrapper cartShow={false}>

    <div style={{ ...containerStyles }}>
      <div style={{ ...productButtonStyles }}>
        {products.map((product, index) =>
          <React.Fragment key={index}>
            <div>
              <b>{product.name}</b>
              <p>{product.price}</p>
              <CartButton
                product={{
                  name: product.name,
                  id: product.id,
                  price: product.price,
                  description: product.description,
                  quantity: 1
                }}
              />
            </div>
            <hr />
          </React.Fragment>
        )}
      </div>

      <CartListing continueToCheckout={continueToCheckout} currencySign="$" />
    </div>

     </CartWrapper>
  );
}

export default App;

Imports.

Components	Details	Pros
CartButton	integrated as the product button	isIncrementAndDecrementBtn, buttonStyle, buttonClass, product
CartListing	Contains the cart content	cartDetailsBtnClass, isDescription, description, isCartLogo, continueToCheckout, currencySign,
TotalItemsInCart	Independently imports total number of items in the cart	isCartLogo

Customization

Adding custom styles and classes

1. CartButton

i) Use buttonStyle and buttonClass props and specify the target button to add custom styles and classes respectively

Example:

  <CartButton
    buttonStyle={{
      addToCart: { backgroundColor: '#00b0ff' },
      increment: { backgroundColor: 'purple' },
      decrement: { backgroundColor: 'green' }
    }}
    buttonClass={{
      addToCart: "bg__bg_Red",
      increment: "bg__bg_Red",
      decrement: "bg__bg_Red"
    }}

ii) To disable the decrement and increment buttons on the CartButton use isIncrementAndDecrementBtn prop

  <CartButton
    isIncrementAndDecrementBtn={false}

1. CartListing

i) Use cartDetailsBtnClass props and specify the target button to add custom classes

  <CartListing
      cartDetailsBtnClass={{ increment: "int_acc" 
      }}
      isCartLogo={false}

ii) Cart logo show/hide

  <CartListing
      isCartLogo={false}