Salesforce B2B Commerce Product Grid on Product Detail Page

An elegant solution for grid-based ordering in B2B Commerce

One of the main ways B2B Commerce differentiates itself from B2C commerce is by the volume and complexity of orders. On average, a single consumer may order a handful of items from a B2C webstore, while a business may order hundreds of items at a time in various colors, sizes, and other configurations from a B2B webstore to stock their store shelves or for manufacturing. A challenge we have as B2B developers is the creation of online user interfaces that allow businesses to create these large and complex orders while maintaining a simple and friendly user experience.

Line Sheets and Product Grids

Many businesses use line sheets like the one shown here to take orders from customers. There are some clear advantages to digitizing this process:

• Elimination of unreadable handwriting
• No Printing, writing, and faxing
• Saved and backed up in the cloud
• Fields (like Billing Address) can be saved and auto-populated based on your online account
• Integration to check shipping details, inventory, tax, discounts, etc.

A lot of companies have already completed this process and taken their line sheets online. At this point they should be called online sheets! (Please excuse the pun). However, many businesses are not satisfied with their online ordering solution for any number of reasons:

• Outdated style
• Not secure or compliant with latest regulations
• Slow performance, long wait times
• Confusing interface, poor user experience
• Not all integrations are implemented or optimized

Salesforce B2B Commerce for Lightning Experience

The new Salesforce B2B Commerce for Lightning Experience (B2B LE) is a great option to consider for companies who have any amount of their customer or product data in Salesforce. B2B LE supplies some great components for ordering complex products and it is fully customizable because it runs on the Salesforce Community Cloud platform and supports custom Lightning Web Components. This means developers can build you just about any kind of user interface you want (Call us!).

What Comes with B2B LE?

Let us imagine that we have a company which sells clothing to retail stores. Many of our clothes come in multiple colors and multiple sizes. We would set up product variations and attributes using the B2B LE guided setup:

https://help.salesforce.com/articleView?id=sf.b2b_comm_lex_var_att_intro.htm&type=5

After we set up these variations, what we see on the front end is a series of dropdowns. For example, we would have one dropdown for color, and a second dropdown for size.

Building a Custom Grid Interface

We can take this concept a step further by building a grid (kind of like an Excel spreadsheet) to display all the color / size options on the screen at once, instead of making users click through dropdown lists. This is also desirable because we can have users input quantities for all colors and sizes, then add all of them to the cart in a single click, instead of making the users click ‘add to cart’ for each color/size combo. This results in a user interface which more closely resembles the traditional paper line sheets.

I will show you an example of how you could implement this idea in the view of a custom lightning web component.

The idea is to generate a list of objects in the JS controller to then pass into the view (like our example html file below) to be rendered. Note that the JS creates an object for each color, and each color object will have a list of size objects. You will also notice that our grid will show a disabled input box for color + size combinations which do not exist (a handy feature!).

> ```

Here is the result of implementing a grid with this HTML template:

Conclusion

Lightning web components give Salesforce B2B Commerce for Lightning Experience the flexibility for us to create more advanced and intuitive interfaces for ordering products. A two-dimensional product grid is one of the more frequently requested items, and fortunately, Salesforce gives us the power to make it happen. If you are considering a B2B eCommerce project, reach out to us, we would love to hear about your vision and see what we can do to help bring it to life.