The JavaScript API

Introduction

As previously discussed, the Buyer Portal’s JavaScript API is available as the window.b2b.utils object. Let’s explore a few more of the utilities available.

User Profile and Token

The user.profile function will return information about the currently logged-in user.

Example Code:

console.log(window.b2b.utils.user.getProfile());

Example Result:

{
  b2bId: 123456,
  companyRoleName: "Admin",
  customerGroupId: 2,
  emailAddress: "johndoe@example.com",
  firstName: "John",
  id: 20,
  lastName: "Doe"
  phoneNumber: "111-222-3333",
  role: 0
}

The user.getB2BToken is an essential function that fetches the currently logged-in user’s B2B GraphQL authentication token.

Example Code:

const token = window.b2b.utils.user.getB2BToken();

This token can be used to make custom B2B GraphQL API requests from your own code.

Working with Quotes

A set of methods available from window.b2b.utils.quote allows you to manage the current “draft” quote belonging to the logged-in user.

Adding Products to the Quote

The addProducts function will add products to the current draft quote:

window.b2b.utils.quote.addProducts([
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1',
    },
    {
        quantity: 10,
        productEntityId: 2,
        sku: 'PRODUCT2',
    }
]).then(
    () => {
        // Success
    },
    () => {
        // Failure
    }
);

Each item must contain a productEntityId and either a specific sku (as seen above) or a variantEntityId.

window.b2b.utils.quote.addProducts([
    {
        quantity: 10,
        productEntityId: 1,
        variantEntityId: 10,
    },
    {
        quantity: 10,
        productEntityId: 2,
        variantEntityId: 20,
    }
]).then(
    // ...
);

The addProductFromPage function is also available for the same purpose, accepting only a single product:

window.b2b.utils.quote.addProductFromPage(
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1',
    }
).then(
    // ...
);

Adding from the Cart

You can also use the addProductsFromCart function to add the current contents of the user’s cart to the draft quote:

window.b2b.utils.quote.addProductsFromCart()
    .then(
        () => {
            // Success
        },
        () => {
            // Failure
        }
    );

Getting Quote Details

The getCurrent function is available to retrieve details of the logged-in user’s current draft quote.

Example Code:

console.log(window.b2b.utils.quote.getCurrent());

Example Result:

{
  productList: [
    {
      basePrice: 50,
      id: "abc123...",
      optionSelections: [
        {
          optionId: 100,
          optionValue: 4,
        }
      ],
      primaryImage: "https://cdn11.bigcomerce.com/...",
      productId: 2,
      productName: "Example Product",
      quantity: 10,
      taxPrice: 3.24,
      variantId: 13,
      variantSku: "PRODUCT1-LG"
    }
  ]
}

Working with Shopping Lists

The window.b2b.utils.shoppingList object is also available for working with shopping lists.

Create a Shopping List

A new shopping list can be created with createNewShoppingList, which returns the details of the new list.

Example Code:

window.b2b.utils.shoppingList.createNewShoppingList(
    'Quarterly Re-stock',
    'Standard re-stock list for per-quarter order'
).then(
    (list) => {
        console.log(list);
    },
    () => {
        // Failure
    }
);

Example Result:

{
  id: '67890',
  name: "Quarterly Re-stock",
  description: "Standard re-stock list for per-quarter order",
  customerInfo: {
    firstName: "John",
    lastName: "Doe",
    userId: 123456,
    email: "johndoe@example.com",
  },
  grandTotal: "0",
  totalDiscount: "0",
  totalTax: "0",
}

Adding Products

Using the addProductFromPage function will initiate the typical Buyer Portal modal allowing the user to choose a shopping list, then add the specified product details.

Example Code:

window.b2b.utils.shoppingList.addProductFromPage(
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1'
    }
).then(
    () => {
        // Success
    },
    () => {
        // Failure
    }
);

Like the quote functions, the items accepted by addProductFromPage can contain a variantEntityId instead of a sku.

Super Admins and Masquerade

The window.b2b.utils.user object also exposes a couple of functions that are useful when the logged-in user is a Super Admin with privileges to “masquerade” under different companies.

You can initiate a masquerade if you know the ID of a company the logged-in user has permissions for. (This list can be obtained with the superAdminCompanies GraphQL query, using the token obtained from user.getB2BToken.) Use setMasqueradeCompany to start the masquerade:

window.b2b.utils.user.setMasqueradeCompany(123456);

The Super Admin’s current masquerade session can be ended with endMasquerade:

window.b2b.utils.user.endMasquerade();

You can review all available objects and methods in the window.b2b.utils namespace in the Buyer Portal source code, linked below.

Resources

• window.b2b.utils Reference