Ostaa
Ostaa is a lightweight JavaScript SDK for Kauppa. It allows you to build ecommerce into any web application. It's based on Kauppa's API and provides the ability to retrieve products and collections from your shop, add products to a cart, and perform checkout tasks checkout.
Installation
With Yarn:
$ yarn add ostaa
With NPM:
$ npm install ostaa
Builds
Ostaa has four build versions: ES, CommonJS, AMD, and UMD.
ES, CommonJS:
import Client from 'ostaa';
AMD:
import Client from 'ostaa/index.amd';
UMD:
import Client from 'ostaa/index.umd';
Examples
Initializing the Client
import Client from 'ostaa';
const client = Client.buildClient({
domain: 'your-shop-name.kauppa.naamio.cloud',
storefrontAccessToken: 'your-storefront-access-token'
});
Fetching Products
// Fetch all products in your shop
client.product.fetchAll().then((products) => {
// Do something with the products
console.log(products);
});
// Fetch a single product by ID
const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';
client.product.fetch(productId).then((product) => {
// Do something with the product
console.log(product);
});
Fetching Collections
// Fetch all collections, including their products
client.collection.fetchAllWithProducts().then((collections) => {
// Do something with the collections
console.log(collections);
console.log(collections[0].products);
});
// Fetch a single collection by ID, including its products
const collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA==';
client.collection.fetchWithProducts(collectionId).then((collection) => {
// Do something with the collection
console.log(collection);
console.log(collection.products);
});
Creating a Checkout
// Create an empty checkout
client.checkout.create().then((checkout) => {
// Do something with the checkout
console.log(checkout);
});
Adding Line Items
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemsToAdd = [
{variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yOTEwNjAyMjc5Mg==', quantity: 5}
];
// Add an item to the checkout
client.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) => {
// Do something with the updated checkout
console.log(checkout.lineItems); // Array with one additional line item
});
Updating Line Items
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemsToUpdate = [
{id: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=', quantity: 2}
];
// Update the line item on the checkout (change the quantity or variant)
client.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then((checkout) => {
// Do something with the updated checkout
console.log(checkout.lineItems); // Quantity of line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' updated to 2
});
Removing Line Items
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemIdsToRemove = [
'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='
];
// Remove an item from the checkout
client.checkout.removeLineItems(checkoutId, lineItemIdsToRemove).then((checkout) => {
// Do something with the updated checkout
console.log(checkout.lineItems); // Checkout with line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' removed
});
Fetching a Checkout
const checkoutId = '2U4NWNkYzI4ZWEyOTdlOD9rZXk9MDVjMzY3Zjk3YWM0YWJjNGRhMTkwMDgwYTUzOGJmYmI='
client.checkout.fetch(checkoutId).then((checkout) => {
// Do something with the checkout
console.log(checkout);
});
License
MIT, see LICENSE for details.