npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@humblejs/shopping-cart

v1.9.6

Published

Utilities specifically for adding shopping cart to your website.

Downloads

7

Readme

Shopping Cart

Utilities specifically for adding shopping cart to your website.

Demo

Install

yarn add @humblejs/shopping-cart

Usage

import { withShoppingCart, ShoppingCartProvider } from '@humblejs/shopping-cart';
...

const AddToCartButton = withShoppingCart(props => (
  <button onClick={() => { props.shoppingCart.add(props.product); }}>Add</button>
));

...

<ShoppingCartProvider>
  <AddToCartButton />
</ShoppingCartProvider>

Context Props

All the functions are available via global context under shoppingCart object. Following are the list of functions available:

| Key | Description | |----------|-------------| | list() | Return all the items in the cart in RAW format | | add(item, quantity) | Add item to the cart with specified quantity | | changeQuantity(item, newQuantity) | Change number of items to specified quantity. 0 quantity will remove item from the cart. | | remove({ id }) | Remove item with specified ID | | has({ id }) | Determine whether item with specified ID is in the cart or not | | get({ id }) | Get item with specified ID from the cart if available. Otherwise NULL | | getQuantity() | Count quantity of items with specified ID in the cart | | total() | Calculate total cost for the items in the cart based on their unit prices |

Wishlist

Shopping cart component also comes with wishlist provider, the provider points to same base component which helps in maintaining the code but some functions may be unnecessary and some are unavailable (e.g, getQuantity does not apply to wishlist), so usage of it is to be done with care.

import { withShoppingCart, withWishlist, ShoppingCartProvider, WishlistProvider } from '@humblejs/shopping-cart';

// ....

const PageWrapper = flow(
  withShoppingCart,
  withWishlist,
)(Page);

// ....

<ShoppingCartProvider {...props.cart}>
  <WishlistProvider {...props.wishlist}>
    <PageWrapper />
  </WishlistProvider>
</ShoppingCartProvider>

where props.cart is props specific to shopping cart and props.wishlist is specific to wishlist.

Item

All the functions take item as first parameter. Each item must at least contain id field.

General Item model must have following properties for it to properly work

  • id
  • unitPrice

All the rest of the fields are considered product

The shopping cart uses localStorage for client side. Validations on the server side are done separately.