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.
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: '[email protected]' }
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()
Last updated
Was this helpful?