B2B Ninja Docs

JavaScript API

JavaScript API

Buttons

Add To Quote Button

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

AddProductFromAddToCartForm
QN.add_product(
event // MouseEvent, optional: MouseEvent object that we will cancel so form wont be submitted
);
ExampleProductPageForm
<div>
<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="QN.add_product(event)">
Add To Quote
</button>
</div>
</form>
</div>

Cart To Quote Button

This function is used to trigger the Cart to Quote flow

CartToQuote
QN.cart_to_quote();
Example
<!-- cart to quote button -->
<button id="qn-cart-to-quote" onclick="QN.cart_to_quote()">
Cart To Quote
</button>

Show Quote Dialog

This function is used to open the Quote Dialog

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

Add Product(s) To Quote

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

AddProductsToQuote
QN.add_products_to_quote(
products, // product[], required: array of objects describing the products
merge // boolean, optional: indicates whether items should be merged with existing quote
);
AddProductsWithOptions
QN.add_products_to_quote(
[
{
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
);

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.

ExampleUpdateQuoteItemCounter
QN.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();
}
});

Headless

Script Installation

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

HeadlessInstall
<!-- 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.

LogInCustomer
QN.log_in_customer(
customer
// 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
LogOutCustomer
QN.log_out_customer();
// returns a promise that resolves with true if successful or resolves false if the data passed in is incorrect