react-easy-cart

1.1.6 • Public • Published

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}

Readme

Keywords

Package Sidebar

Install

npm i react-easy-cart

Weekly Downloads

14

Version

1.1.6

License

ISC

Unpacked Size

36.7 kB

Total Files

11

Last publish

Collaborators

  • okumujustine