q3-ui-cart

Shopping cart plugin for q3-components

Installation

yarn add q3-ui-cart

Usage

Quick setup

The example below may render strangely, but it would setup the state enough to use the cart. Of course, you'll want to nest these components elsewhere to accommodate for custom layouts. So long as the hierarchy remains in place, you can move the internal cart components anywhere.

Cart.jsx

import React from 'react';
import Provider, {
  AddToCart,
  Drawer,
  Launcher,
  LineItem,
} from 'q3-ui-cart';

export default (providerProps) => (
  <Provider {...providerProps}>
    <Launcher>
      {(close, isOpen) => (
        <Drawer
          checkoutPath="/checkout"
          close={close}
          isOpen={isOpen}
          shopPath="/shop"
          titleKey="title"                  
        >
          <LineItem />
        </Drawer>
      )}
    </Launcher>
    <AddToCart
      product="abc"
      size="small"
      variant="spread"          
    />
  </Provider>
);

The state magic happens in the provider props. This provider accepts several resolver functions for managing new, updated and removed items in the cart. Note that each gets re-assigned internally: if you're making modifications to the source code, check the context file for such mapping.

Prop	Description	Type
addItemToOrder	A promise for adding an item to the order state.	function
clear	A promise for deleting the active order. Successful calls drop the order ID from local storage.	function
pollOrder	A promise for refreshing the state after an item call.	function
removeItemInOrder	A promise for removing an item from the order.	function
updateItemInOrder	A promise for updating an item's quantity in the order.	function
updateOrder	A promise for patching the order, namely the title (see Drawer API for more information).	function