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.
Specify a function to execute when the SDK is fully loaded.
window.sbsdk.ready(function() {
console.log('ready');
});
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]' }
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
})
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)
})
window.sbsdk.user.navigateSignIn()
window.sbsdk.user.navigateSignUp()
window.sbsdk.checkout.navigateCheckout()