The official JavaScript + TypeScript client library for Boundless Commerce
npm install boundless-api-clientJavaScript client for Boundless Commerce API.
API’s First Headless E-commerce CMS: We Provide An Admin-Side For Store Management, Powerful API, And Ready-To-Use
Checkout Area.
Self-Hosted solution:
There is an option for Running Boundless-Commerce on your own server. Read more at Open-Source Headless eCommerce Platform
Ready to use online-shops (NextJS examples):
Just clone and go!
- Next.js E-commerce Starter kit (v14 version: The new App router)
- All E-commerce templates
Ready to use checkout area:
WIX version:
yarn add boundless-api-client or npm install boundless-api-client --save
Generate access token in the control panel.
#### Setting up with a permanent token
``js
import {BoundlessClient} from 'boundless-api-client';
const apiClient = new BoundlessClient('
apiClient.setInstanceId('
//fetch products:
apiClient.catalog.getProducts().then(data => console.log(data));
`
#### Generate token and make a request
Generate a token yourself is more secure way. Use the following approach to issue an access-token:
`js
import {BoundlessClient} from 'boundless-api-client';
import {generateBoundlessToken} from 'boundless-api-client/token';
const token = generateBoundlessToken('
const apiClient = new BoundlessClient(token);
apiClient.setInstanceId('
//fetch products:
apiClient.catalog.getProducts().then(data => console.log(data));
`
`js`
import {BoundlessClient} from 'boundless-api-client';
const apiClient = new BoundlessClient('
apiClient.setInstanceId('
The client splits into these parts:
#### Catalog
Consists methods for working with the catalog (products, categories, etc.):
`js`
const {products, pagiantion} = await apiClient.catalog.getProducts();
const categories = await apiClient.catalog.getCategoryTree();
//...
For a full list of methods please visit the official documentation.
#### Cart
Consists methods for working with the cart.
`js
//creates a cart:
const cart = await apiClient.cart.retrieveCart();
//fetch cart info (e.g. cartId is stored in cookie):
const cart = await apiClient.cart.getCartInfo('
//fetch cart items
const data = await apiClient.cart.getCartItems('
//add to cart
const data = await apiClient.cart.addItemToCart('
//...
`
For a full list of methods please visit the official documentation.
#### Checkout
Consists methods for working with the checkout.
`js`
const checkoutData = await apiClient.checkout.init('
const {customer} = await apiClient.checkout.saveContactsData({order_id: '
//...
For a full list of methods please visit the official documentation.
#### Customer
Consists methods for working with the customer.
`js`
const {customer, authToken} = await apiClient.customer.login('
const {customer, authToken} = await apiClient.customer.register({...customerData});
If there is a customer auth token, you need to specify it in the client:
`js
apiClient.setCustomerAuthToken(authToken);
//reset token:
apiClient.setCustomerAuthToken(null);
//get token:
apiClient.getCustomerAuthToken();
`
For a full list of methods please visit the official documentation.
#### Public order's methods
Consists methods for working with customer's orders:
`js`
const order = await apiClient.customerOrder.getOrder('
await apiClient.customerOrder.setCustomAttrs({order_id, attrs});
//...
For a full list of methods please visit the official documentation.
#### Private order's methods
Access is available only for tokens with the management rights.
`js`
const {orders, pagination} = await apiClient.adminOrder.getOrders();
For a full list of methods please visit the official documentation.
To generate a thumbnail by a local path:
`js`
const thumb = apiClient.makeThumb({imgLocalPath, maxSize});
thumb.getSrc(); //returns URL to the media server
To get thumbnail attributes (width and height) pass original width/height:
`js`
const thumb = apiClient.makeThumb({imgLocalPath, maxSize, originalWidth, originalHeight});
thumb.getAttrs(); //returns {src, width, height}
#### Thumbnail transformations:
`js
const thumb = apiClient.makeThumb({imgLocalPath, maxSize});
//Set quality:
thumb.setQuality('
//set ratio:
thumb.setRatio('<1-1 | 2-3 | 3-2 | 4-5 | 5-4 | 3-4 | 4-3 | 16-9 | 9-16>');
//set pad: boolean
thumb.setPad(value);
//blur image, blur - number: 0-15
thumb.setBlur(blur);
//background: hex, e.g. 'ffffff'
thumb.setBackground(hex);
//grayscale: boolean
thumb.setGrayscale(value);
//get resulting SRC:
thumb.getSrc();
`
There are methods in the API which aren't covered by the interface access, so you need to execute requests manually:
`js
//setup the client in the same way:
import {BoundlessClient} from 'boundless-api-client';
const apiClient = new BoundlessClient('
//executing GET request
const {data, headers} = await apiClient.createRequest().get('/catalog/attributes');
//POST
await apiClient.createRequest().post('/catalog/products', {
title: 'My new product',
slug: '...'
});
//PUT
await apiClient.createRequest().put('/catalog/products/1', {title: 'my new title'});
`
apiClient.createRequest() returns instance of Axios Fetch Adapter fetch
(Axios was replaced to ) - pre-configured instance for API requests.
Example of files uploader (where file is instance of File):
`js
const formData = new FormData();
formData.append('file_name', file.name);
formData.append('file', file);
formData.append('for_product_id', 1);
const {data} = await apiClient.createRequest().post('/files/images/upload', formData);
`
```
yarn build
---
NextJS eCommerce templates - Free. Ready to use. Just clone & deploy!