Enabling, Using, and Scripting the Cart - Part 1

Most everyone loves the shopping cart experience. Anyone who's purchased from Amazon, Target, Wal-Mart or other online stores has experienced that. User's in ServiceNow can have the same experience within the Service Catalog. Whether on the platform or the portal, users may want to submit multiple requests or orders at the same time. Perhaps a manager has a large hiring class their trying to onboard. Perhaps an employee is needing to order multiple devices with different specs to outfit a new lab. The use cases are many and the user experience can be greatly improved using the cart, where users simply fill out a catalog item form and click 'add to cart' for all the items they need at that time.

The first step to doing this is to make sure the catalog item is allowed to go through a cart experience. This is done on the catalog item definition record by setting the 'Show Add to Cart Button' option to true. Simple enough. On the platform, this just works, no further action needed, but for the Service Portal, enabling the cart requires one more step.

In the Service Portal Header Menu, we need to add some JSON within the "additional options" section in order have the cart display. It's simple and spelled out on the ServiceNow doc site.

1 2 3 4 5 6	{ "enable_cart": { "displayValue": "true", "value": true } }

Similarly, if you have a user who has not completely filled out the form, including mandatory fields, you can allow them to save an item for later by enabling the wish list. This uses the same method in the same section of the portal header definition.

1 2 3 4 5 6	{ "enable_wishlist": { "displayValue": "true", "value": true } }

Now your users can use the cart! They'll be able to add multiple catalog items, then checkout, and have only one request number that covers all of the requested items.

When it comes to scripting the cart, there are 2 major methods we can use: Cart and CartJS.

Cart allows us to build a shopping cart, add items to it, and submit. With CartJS, we can perform the same functions, but we also have the option to NOT checkout the cart, but leave it for a user to finish. In the second part of this article, I'll provide scripting examples of how each of these may work for sample use cases.