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
BN.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="BN.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
BN.cart_to_quote();
Example
<!-- cart to quote button -->
<button id="qn-cart-to-quote" onclick="BN.cart_to_quote()">
  Cart To Quote
</button>

Show Quote Dialog

This function is used to open the Quote Dialog

OpenQuoteDialog
BN.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="BN.show_quote('quote-view')">
  View Quote
</button>
OpenSubmittedQuotes
<button id="qn-cart-to-quote" onclick="BN.show_quote('submitted-quotes')">
  My Past Quotes
</button>

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

AddProductsToQuote
BN.add_products_to_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
);
Example-AddProductsWithOptions
BN.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
);

Update Customer Information

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

PrefillCustomer
BN.prefill_customer(
  customer_data
  /** 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
            }
  **/
);
Example-PrefillCustomer
BN.prefill_customer({
  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

SubmitQuote
BN.submit_quote()
  .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.

Example-UpdateQuoteItemCounter
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();
  }
});

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

On this page