npm package: @sledge-app/kubinashi
Description: JavaScript Library to work with Shopify Headless Cart
Latest version: 0.0.1

# Kubinashi
A JavaScript library to work with Shopify Headless Cart. Work with Shopify Storefront in any platform (Webflow, Framer, etc.).

Kubinashi (Kubi Nashi) is a latin version of Japanese 首なし which mean headless.

#### Demo Screenshots :

| Main Page     | Flyout Cart    |
| ------------- |----------------|
|    ![Main](https://files.height.app/be5d0a18-ce7e-469a-82aa-37421bf8710c/V0jl0m6nJqC7edra5EfC2/image.png) |  ![Flyout](https://files.height.app/be5d0a18-ce7e-469a-82aa-37421bf8710c/iyfRWbTWNu-GU2ZTsLr5w/image.png) |



## Development
1. `npm install`
2. `npm run dev`

## Installation (Still WIP not usable)
```
npm install @sledge-app/kubinashi
``` 

OR using dist

```
<script src="https://cdn.jsdelivr.net/npm/@sledge-app/kubinashi@latest/dist/kubinashi.min.js" />
```

## API
- [new Cart( [Object] )](#setup-cart)
- [cart.init( [Object] )](#init-cart)
- [cart.get()](#get-cart)
- [cart.clear()](#clear-cart)
- [cart.add( [Array] )](#add-item-to-cart)
- [cart.update( [Array] )](#update-item-from-cart)
- [cart.remove( [Array|String] )](#remove-item-from-cart)
- [cart.applyDiscount( [Array|String] )](#apply-discount-codes-to-cart)
- [cart.clearDiscount()](#clear-discount-codes-from-cart)
- [cart.setAttributes( [Array] )](#set-cart-attributes)
- [cart.getAttributes( [Array|String] )](#get-cart-attributes)
- [cart.clearAttributes()](#clear-cart-attributes)
- [cart.setNote( [String] )](#set-cart-note)
- [cart.getNote()](#get-cart-note)
- [cart.clearNote()](#clear-note)


## Getting Started

#### Setup Cart
```javascript
const cart = new Cart({
  'storeUrl' : 'https://URL.myshopify.com', 
  'storefrontPublicToken' : 'STOREFRONT_PUBLIC_TOKEN',
  'apiVersion' : '2023-07'
})
```

#### Init Cart
```javascript
await cart.init()
```

#### Get Cart
```javascript
let response = await cart.get()

console.log( 'cart.get() ', response )
```
 
#### Clear Cart
```javascript
let clear = await cart.clear()

console.log( 'cart.clear()', clear )
```

---

#### Add item to Cart
```javascript
let add = await cart.add([
  { 
    id : VARIANT_ID, 
    quantity: 3,
    attributes: [
      { key: 'engrave_front', value: 'Your Name' },
      { key: 'engrave_back', value: 'Your Initial' }
    ]
  },
  { id : VARIANT_ID, quantity: 1 }
])

console.log( 'cart.add()', add )
```

---

#### Update item from Cart
```javascript
let update = await cart.update([
  { 
    id : 'LINE_ITEM_ID', 
    quantity: 3,
    attributes: [
      { key: 'engrave', value: 'Your Name' }
    ]
  },
  { id : 'LINE_ITEM_ID', quantity: 1 }
])

console.log( 'cart.update()', update )
```

---

#### Remove item from Cart

Remove Multiple items : `cart.remove( [ 'LINE_ITEM_ID', 'LINE_ITEM_ID' ] )`

Remove Single item : `cart.remove( 'LINE_ITEM_ID' )`

```javascript
let remove = await cart.remove( 'LINE_ITEM_ID' )

console.log( 'cart.remove()', remove )
```

---

#### Apply discount codes to Cart

Set Multiple discount codes : `cart.applyDiscount( [ 'DISCOUNT_CODE_1', 'DISCOUNT_CODE_2' ] )`

Set Single discount code : `cart.applyDiscount( 'DISCOUNT_CODE_1' )`

```javascript
let applyDiscount = await cart.applyDiscount( [ 'DISCOUNT_CODE_1', 'DISCOUNT_CODE_2' ] )

console.log( 'cart.applyDiscount()', applyDiscount )
```

#### Clear discount codes from Cart
```javascript
let clearDiscount = await cart.clearDiscount()

console.log( 'cart.clearDiscount()', clearDiscount )
```

---

#### Set Cart attributes
```javascript
let setAttributes = await cart.setAttributes([
  { key: 'sample', value: 'sample juga' }, 
  { key: 'sample3', value: '3sample juga' }
])

console.log( 'cart.setAttributes()', setAttributes )
```

#### Get Cart attributes

Get Multiple attributes : `cart.getAttributes( [ 'key1', 'key2' ] )`

Get Single attribute : `cart.getAttributes( 'key1' )`
```javascript
let getAttributes = await cart.getAttributes( 'sample' )

console.log( 'cart.getAttributes()', getAttributes )
```

#### Clear Cart attributes
```javascript
let clearAttributes = await cart.clearAttributes()

console.log( 'cart.clearAttributes()', clearAttributes )
```

---

#### Set Cart note
```javascript
let setNote = await cart.setNote( 'Coba cart note baru' )

console.log( 'cart.setNote()', setNote )
```

#### Get Cart note
```javascript
let getNote = await cart.getNote()

console.log( 'cart.getNote()', getNote )
```

#### Clear Cart note
```javascript
let clearNote = await cart.clearNote()

console.log( 'cart.clearNote()', clearNote )
```