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 3th party app. It provides the ability to interact with shop data, functions. For example, retrieving products, collections, carts, etc.

Get content

Get page context

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

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: 'john.doe@gmail.com' }

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

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