Drawer

Pull-out order drawer with automated line-item rendering

Example

The example below uses the Launcher component to pass in drawer state. You can replace this with your own custom button/action if you'd like.

Drawer.jsx

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

export default () => (
  <Launcher>
    {(close, isOpen) => (
      <Drawer
        checkoutPath="/checkout"
        close={close}
        isOpen={isOpen}
        shopPath="/shop"
        titleKey="title"                  
      >
        <LineItem />
      </Drawer>
    )}
  </Launcher>
);

API

Prop	Description	Type
checkoutPath	Relative link for the checkout button.	string*
children	Nodes to render inside the Drawer's body container.	node*
close	The callback function that executes when a user clicks the Drawer's back button.	function*
isOpen	Controls the open state of the drawer.	boolean*
shopPath	Relative link for the products button.	string*
titleKey	The path (dot notation) to the title within the cart's state. This will default to "Shopping cart" if either titleKey or the updateOrder resolver is missing.	string