All Collections
Installation & Setup
Advanced Customizations
Using Quote Ninja's JavaScript API for Custom Development
Using Quote Ninja's JavaScript API for Custom Development

Explains how you can use our front-end API to add products to quote, open the quote modals, etc

Micah Thomas avatar
Written by Micah Thomas
Updated over a week ago

This document assumes that you have some development experience/skills using JavaScript in the browser. For more details about our APIs, click the button below:

The following code will work on any storefront page when B2B ninja is installed on your store. The B2B Ninja JavaScript API is not available in certain areas: Checkout, Account Pages, Order Confirmation Page.

Add product(s)

If you want to add products to the current quote, you have a couple of options.

  1. QN.add_product(event?: Event | null, autoAdd: boolean, container: string) Takes the product option form container and we will parse the options and qty element and add the product to the quote if the options are valid.

  2. QN.add_products_to_quote(products: {id: number, qty: number, options?: {product_option_id: number, selected_value?: number, selected_valuetext?: string}[]}, mergeWithCurrentQuote?: boolean) Pass in an array of object(s), that contain product id, quantity, and product options (optional) that we will then use to add the product(s)

Option #1 is useful for adding individual "Add to Quote" buttons, for example on category pages with simple products, or if you have a custom page that lists multiple products each with their own option table & qty selector.

Option #2 is useful for building fully custom product pages with complex options that may not be shown to the user, or are not standardized product forms. This allows you to fully customize how the product is added to the quote. You don't even have to show the customer anything related to the product on the page.

If you run into issues with complex options, please reach out to us so we can get those fixed. The only option type that is currently not supported via add_products_to_quote is file upload.

Did this answer your question?