Storefront SDK

You can use ShopBase Storefront SDK to access shop data, listen to shop events like add to cart, update cart quantity, etc.

This is list of exposed events and actions for 3rd party apps. It provides the ability to interact with shop data, functions. For example, retrieving products, collections, carts, etc.

ShopBase Storefront leverage latest technology to provide a fast shopping experience for buyers, we uses single page app stack (VueJS, VueX) on ShopBase Storefront so make sure you listen to page change events and update your apps accordingly.

Ready

Specify a function to execute when the SDK is fully loaded.

window.sbsdk.ready(function() {
    console.log('ready');
});

Get content

Get page context

window.sbsdk.page.getContext() // { type: 'product', payload: { id: 1 }}

Get current product

window.sbsdk.product.current() // { id: 1000000003239458, title: "T-shirt" }

Get cart

window.sbsdk.cart.get() // { token: '', items: [], subtotal_price: 0, total_price: 0 }

Get user

window.sbsdk.user.get() // { id: 1 }

Get order

window.sbsdk.checkout.getOrder() // { id: 1, items: [{ product_id: 1, product_title: 'T-shirt', variant_id: 1, variant_title: 'Black/M' }], email: '[e-mail]' }

Events

Listen page load

This event will be fired when the current page is starting to load

window.sbsdk.page.onLoad(function() {
  console.log('Page loaded')
})

Listen page context update

window.sbsdk.page.onContextUpdate(function(context) {
  console.log(context)
})

Listen add to cart

window.sbsdk.cart.onAdd(function(payload) {
  console.log('Add item', payload) // { variant_id: 1, qty: 1 }
})

Listen cart update

// Update an item
window.sbsdk.cart.onAdd(function(payload) {
  console.log('Update item', payload) // { variant_id: 1, qty: 1 }
})

// Update multiple items
window.sbsdk.cart.onUpdate(function(payload) {
  console.log('Update items', payload) // [ { variant_id: 1, qty: 1 }, { variant_id: 2, qty: 5 } ]
})

Listen remove cart item

window.sbsdk.cart.onRemove(function(payload) {
  console.log('Remove item', payload) // { variant_id: 1 }
})

Listen an user authorized

window.sbsdk.user.onAuthorized(function(user) {
  console.log('User', user) // { id: 1 }
})

Listen an user unauthorized

window.sbsdk.user.onUnauthorized(function() {
  // Do something
})

Listen order completed

This event is fired when the current order has been completed

window.sbsdk.checkout.onCompleteOrder(function(payload) {
	// do something
})

Actions

Add to cart

Add a product with variant id 123456 into cart.

window.sbsdk.cart.add(123456, 1).then(function(response) {
  console.log('Added', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Update cart item

Update quantity of an existing product with variant id 123456 in cart.

window.sbsdk.cart.update(123456, 2).then(function(response) {
  console.log('Updated', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Update cart items

window.sbsdk.cart.updateMultiple({ 123456: 1, 123457: 2}).then(function(response) {
  console.log('Updated', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Remove cart item

window.sbsdk.cart.remove(123456).then(function(response) {
  console.log('Removed', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Clear all items in cart

window.sbsdk.cart.clear().then(function(response) {
  console.log('Cleared', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Add a discount code

window.sbsdk.checkout.addDiscount('10OFF').then(function(response) {
  console.log('Added', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Remove a discount code

window.sbsdk.checkout.removeDiscount('10OFF').then(function(response) {
  console.log('Removed', response) // { success: true }
}).catch(function(e) {
  console.log('Error', e)
})

Navigate to sign in

window.sbsdk.user.navigateSignIn()

Navigate to sign up

window.sbsdk.user.navigateSignUp()

Navigate to checkout

window.sbsdk.checkout.navigateCheckout()