B2B Ninja Docs

JavaScript API

JavaScript API


Add To Quote Button

This function is used when adding a button inside an existing add to cart form

event // MouseEvent, optional: MouseEvent object that we will cancel so form wont be submitted
<form method="post" action="/cart.php">
<input type="hidden" name="action" value="add" />
<input type="hidden" name="product_id" value="..." />
<!-- ...other inputs like options and quantity... -->
<div class="form-action" role="status" aria-live="polite">
<!-- add to cart button -->
<input type="submit" value="Add to Cart" />
<!-- add to quote button -->
<button id="qn-add-to-quote" onclick="BN.add_product(event)">
Add To Quote

Cart To Quote Button

This function is used to trigger the Cart to Quote flow

<!-- cart to quote button -->
<button id="qn-cart-to-quote" onclick="BN.cart_to_quote()">
Cart To Quote

Show Quote Dialog

This function is used to open the Quote Dialog

activeTab // enum, optional, default='quote-view':
// 'quote-view': opens the current quote view
// 'submitted-quotes': opens the submitted quotes view
<button id="qn-cart-to-quote" onclick="BN.show_quote('quote-view')">
View Quote
<button id="qn-cart-to-quote" onclick="BN.show_quote('submitted-quotes')">
My Past Quotes

Data and Control

Add Product(s) To Quote

This function can be used to add multiple products with options, and merge or start a new quote

products, // product[], required: array of objects describing the products to add to the quote
merge, // boolean, optional (default=false): control if items should be merged with existing quote or if a new quote should be created
showQuoteDialogAfter // boolean, optional (default=true): whether the quote dialog should be opened automatically
id: 3156, // BigCommerce Product ID
qty: 2, // Quantity to add to quote, if existing quote has this item and merge is true, it'll add to the existing amount
options: [
product_option_id: 28643, // This product's option id
selected_value: 3074, // If multi select option, the value id, or if text option the actual string value
// pass all the options, or just the required ones, if no required options the option array can be null/undefined
true // will merge the products into existing quote

Update Customer Information

This function can be used to update the customer information on the quote

/** BigCommerce address format or the following format {
name: string
email: string
phone: string
company: string
country: string
address: string
'address-2': string
city: string
state: string
zipcode: string
notes: string
name: "John Doe",
email: "john.doe@example.com",
phone: "111-111-1111",
company: "ACME Corp",
country: "US",
address: "1111 Main St",
"address-2": "",
city: "New York",
state: "NY",
zipcode: "00100",
notes: "",

Submit Quote

This function can be used to trigger a quote submission, and returns a promise that will resolve or throw error

.then(function (success) {
// success.msg contains the form response for a successful quote submission
.catch(function (error) {
// error.error will be true if the quote fields were invalid
// error.fields will contain the list of invalid fields

Event Listeners

Get the list of products

This event will be triggered on any update to the quote products. This can be used to update a counter shown to the user that indicates number of items on their quote.

BN.addEventListener("quote-products", function (event) {
var counterSpan = document.querySelector("span.quote-counter");
if (counterSpan) {
var products = event.data;
var count = 0;
for (var i = 0; i < products.length; i++) {
count += products[i].qty;
counterSpan.innerHTML = count.toString();


Script Installation

On headless installs you have to manually insert the script as we cannot automatically inject or update your storefront code.

<!-- Remember to substitute {{BC_STORE_ID}} with your BigCommerce store id -->
<script src="https://cdn.quoteninja.com/storefront/quoteninja-headless.js?storeID={{BC_STORE_ID}}"></script>

How do I pass the customer info to B2B Ninja?

On headless installs the BigCommerce jwt endpoint that gives us the current logged in customer's token is no longer available. So this makes it challenging for us to authenticate and show the current user's info on quote page, and show their past quotes.

// The entire customer object from BigCommerce V2 get customer API
// entire object is required so we can verify details including date created and modified
// returns a promise that resolves with true if successful or resolves false if the data passed in is incorrect
// returns a promise that resolves with true if successful or resolves false if the data passed in is incorrect