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 | | ------------- |----------------| | | |

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] )
• cart.init( [Object] )
• cart.get()
• cart.clear()
• cart.add( [Array] )
• cart.update( [Array] )
• cart.remove( [Array|String] )
• cart.applyDiscount( [Array|String] )
• cart.clearDiscount()
• cart.setAttributes( [Array] )
• cart.getAttributes( [Array|String] )
• cart.clearAttributes()
• cart.setNote( [String] )
• cart.getNote()
• cart.clearNote()

Getting Started

Setup Cart

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

Init Cart

await cart.init()

Get Cart

let response = await cart.get()

console.log( 'cart.get() ', response )

Clear Cart

let clear = await cart.clear()

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

Add item to Cart

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

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' )

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' )

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

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

Clear discount codes from Cart

let clearDiscount = await cart.clearDiscount()

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

Set Cart attributes

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' )

let getAttributes = await cart.getAttributes( 'sample' )

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

Clear Cart attributes

let clearAttributes = await cart.clearAttributes()

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

Set Cart note

let setNote = await cart.setNote( 'Coba cart note baru' )

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

Get Cart note

let getNote = await cart.getNote()

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

Clear Cart note

let clearNote = await cart.clearNote()

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