smolcart.js
Version:
a teeny tiny wrapper for Shopify's Ajax API
62 lines (48 loc) • 2.23 kB
Markdown
<h1 align="center">
<img src="https://res.cloudinary.com/tinbyox/image/upload/v1606434862/Smolcart.js/sc_logo_lightbg_withtext_kullbm.png" width="164px" alt="smolcart.js logo: a dog in a shopping cart" /><br />
</h1>
<p align="center">A 5.5kb, 0-dependency cart management library for Shopify Themes.</p>
<p align="center">
<a href="https://www.npmjs.com/package/smolcart.js">
<img alt="npm" src="https://img.shields.io/npm/v/smolcart.js?color=%23ECD838&style=for-the-badge" />
</a>
<a href="https://www.npmjs.com/package/smolcart.js">
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/smolcart.js?color=%23ECD838&style=for-the-badge" />
</a>
</p>
## Features
1. ⚡ extremely lightweight (~5.5kb)
2. 🛒 a simple, promise-based API for interfacing with the cart
3. 🔮 automatic polyfill loading where needed thanks to [pollyfill.io](pollyfill.io)
## Getting started
smolcart.js can be used with NPM or through a CDN; whichever best fits your workflow.
### Install using NPM
1. open your project and run
```bash
npm install --save smolcart.js
```
2. in the file where you'd like to use smolcart:
```js
import { init } from 'smolcart.js'
// initialize smolcart.js, this will load polyfills if they're needed.
const cart = init();
// now you can dynamically interact with your cart!
await cart.addItems([{id: '1234', quantity: 1]);
const cartdata = await cart.getCart();
```
3. you're good to go! more docs coming soon
### Install using a CDN
1. open the template you'd like to add smolcart.js to
2. create a script tag that has `src` attribute pointing to the newest version of smolcart.js on a CDN (we recommend unpkg)
```html
<script src="https://unpkg.com/smolcart.js@latest/dist/smolcart.umd.min.js" defer></script>
```
3. after the script has loaded, you should be able to initialize smolcart.js:
```js
// initialize smolcart.js, this will load polyfills if they're needed.
const cart = window.smolcart.init();
// now you can dynamically interact with your cart!
await cart.addItems([{id: '1234', quantity: 1]);
const cartdata = await cart.getCart();
```
4. you're good to go! more docs coming soon