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.
1
window.sbsdk.ready(function() {
2
console.log('ready');
3
});
Copied!

Get content

Get page context
1
window.sbsdk.page.getContext() // { type: 'product', payload: { id: 1 }}
Copied!
Get current product
1
window.sbsdk.product.current() // { id: 1000000003239458, title: "T-shirt" }
Copied!
Get cart
1
window.sbsdk.cart.get() // { token: '', items: [], subtotal_price: 0, total_price: 0 }
Copied!
Get user
1
window.sbsdk.user.get() // { id: 1 }
Copied!
Get order
1
window.sbsdk.checkout.getOrder() // { id: 1, items: [{ product_id: 1, product_title: 'T-shirt', variant_id: 1, variant_title: 'Black/M' }], email: '[email protected]' }
Copied!

Events

Listen page load
This event will be fired when the current page is starting to load
1
window.sbsdk.page.onLoad(function() {
2
console.log('Page loaded')
3
})
Copied!
Listen page context update
1
window.sbsdk.page.onContextUpdate(function(context) {
2
console.log(context)
3
})
Copied!
Listen add to cart
1
window.sbsdk.cart.onAdd(function(payload) {
2
console.log('Add item', payload) // { variant_id: 1, qty: 1 }
3
})
Copied!
Listen cart update
1
// Update an item
2
window.sbsdk.cart.onAdd(function(payload) {
3
console.log('Update item', payload) // { variant_id: 1, qty: 1 }
4
})
5
6
// Update multiple items
7
window.sbsdk.cart.onUpdate(function(payload) {
8
console.log('Update items', payload) // [ { variant_id: 1, qty: 1 }, { variant_id: 2, qty: 5 } ]
9
})
Copied!
Listen remove cart item
1
window.sbsdk.cart.onRemove(function(payload) {
2
console.log('Remove item', payload) // { variant_id: 1 }
3
})
Copied!
Listen an user authorized
1
window.sbsdk.user.onAuthorized(function(user) {
2
console.log('User', user) // { id: 1 }
3
})
Copied!
Listen an user unauthorized
1
window.sbsdk.user.onUnauthorized(function() {
2
// Do something
3
})
Copied!
Listen order completed
This event is fired when the current order has been completed
1
window.sbsdk.checkout.onCompleteOrder(function(payload) {
2
// do something
3
})
Copied!

Actions

Add to cart
Add a product with variant id 123456 into cart.
1
window.sbsdk.cart.add(123456, 1).then(function(response) {
2
console.log('Added', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Update cart item
Update quantity of an existing product with variant id 123456 in cart.
1
window.sbsdk.cart.update(123456, 2).then(function(response) {
2
console.log('Updated', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Update cart items
1
window.sbsdk.cart.updateMultiple({ 123456: 1, 123457: 2}).then(function(response) {
2
console.log('Updated', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Remove cart item
1
window.sbsdk.cart.remove(123456).then(function(response) {
2
console.log('Removed', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Clear all items in cart
1
window.sbsdk.cart.clear().then(function(response) {
2
console.log('Cleared', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Add a discount code
1
window.sbsdk.checkout.addDiscount('10OFF').then(function(response) {
2
console.log('Added', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!
Remove a discount code
1
window.sbsdk.checkout.removeDiscount('10OFF').then(function(response) {
2
console.log('Removed', response) // { success: true }
3
}).catch(function(e) {
4
console.log('Error', e)
5
})
Copied!

Navigate to sign in

1
window.sbsdk.user.navigateSignIn()
Copied!

Navigate to sign up

1
window.sbsdk.user.navigateSignUp()
Copied!

Navigate to checkout

1
window.sbsdk.checkout.navigateCheckout()
Copied!
Last modified 10mo ago
Copy link