@crystallize/react-basket

React component to ease integration with Crystallize

Stats

StarsIssuesVersionUpdatedCreatedSize
@crystallize/react-basket
407.0.02 years ago4 years agoMinified + gzip package size for @crystallize/react-basket in KB

Readme

alt text

react-basket

Shopping basket compatible with the Crystallize headless ecommerce GraphQL service.

Crystallize is a GraphQL based PIM powered by (FAST APIs)[https://crystallize.com/product/graphql-commerce-api]

Usage

yarn add @crystallize/react-basket

In your app root

import { BasketProvider } from '@crystallize/react-basket';

const basketOptions = {
  validateEndpoint: "/api/basket/validate",
  freeShippingMinimumPurchaseAmount: 600,
  defaultShipping: yourDefaultShipping,
  onEmpty: () => console.log('emptied basket'),
  onAddToBasket: item => console.log('Add to basket', item),
  onRemoveFromBasket: item => console.log('Remove from basket', item),
  t: (...args) => {
    // Translator function. Same API as i18next
    return MyOwnTranslatorService.apply(null, args);
  }
};

export default () => (
  <BasketProvider {...basketOptions}>
    <YourApp />
  </BasketProvider>
);

Consume it with BasketContext (>= React 16.6)

import { BasketContext } from '@crystallize/react-basket';

export default class MyClass extends React.Component {

  static contextType = BasketContext;

  render () {
    const { state, actions } = this.context;

    return (
      <button onClick={() => actions.addItem({ sku: 'product-sku-1', price: 99, quantity: 1 })}>
        {state.totalQuantity
          ? `Your basket (${state.totalQuantity} items, ${state.totalPrice},-)`
          : 'Your basket is empty'}
      </button>
    );
  }
}

Consume it with BasketConsumer

import { BasketConsumer } from '@crystallize/react-basket';

export default () => (
  <BasketConsumer>
    {({ state, actions }) => (
      <button onClick={() => actions.addItem({ sku: 'product-sku-1', price: 99, quantity: 1 })}>
        {state.totalQuantity
          ? `Your basket (${state.totalQuantity} items, ${state.totalPrice},-)`
          : 'Your basket is empty'}
      </button>
    )}
  </BasketConsumer>
);

All exports

  • BasketProvider
  • BasketContext
  • BasketConsumer
  • TinyBasket
  • Coupon
  • parseBasketItem
  • createBasketItem

State

The state object contains:

  • items (array of the product items in the basket)
  • totalPrice (the total price of the basket items)
  • totalPriceMinusDiscount (total price minus discount (if applied))
  • totalToPay (total price - discount + shipping)
  • totalQuantity (the total items including quantity)
  • freeShipping (if free shipping has been granted)
  • remainingUntilFreeShippingApplies (the minimum amount required for free shipping)
  • metadata (additional metadata that you can set)

Actions

  • empty (empty the basket)
  • addItem (add an item)
  • setItems (set all the basket items in one go)
  • removeItem (remove an item)
  • incrementQuantityItem (increment the quantity for a given item)
  • decrementQuantityItem (decrement the quantity for a given item)
  • parseBasketItem (takes a product and a variant model and returns a valid basket item)
  • setValidating (set the validating flag (found in state))
  • setValidatingNewCoupon (set validatingNewCoupon flag (found in state))
  • setCoupon (set the coupon code)
  • setDiscount (set the discount item)
  • setShipping (set the current shipping item)
  • setMetadata (set your metadata)
  • animateItem (jiggles the item in the TinyBasket)
  • onReady (calls then given function when the basket is loaded and ready)

TinyBasket

The tiny basket accepts the following props

  • hideCoupon
  • hideRemainingUntilFreeShipping
  • ItemCmp (The component to use when rendering each basket item)
  • itemImageSizes (The sizes attr for each item image. Ex: '(min-width: 900px) 1000px, 500px')

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.