Shopping Cart Widget, how to view added items.

[tylerniknam]

I have my catalog item in the Service Portal that has the built-in add to cart button(see screenshot1) I want to make it so that there is a widget that displays items that have been added to the cart similar to "Shopping Cart" widget as seen in screenshot2. Let me know what needs to be done in detail please. Thank you I will kindly upvote if you are helpful

[Amit Gujarathi]

HI @tylerniknam ,
I trust you are doing great.

To display the items that have been added to the cart in the ServiceNow Service Portal, you can follow these steps:

1. Create a new widget:

   • Go to the ServiceNow Studio.
   • Create a new widget by navigating to "Widgets" and clicking on "New."
   • Give the widget a name, such as "CartItemsWidget," and specify the widget options as per your requirements.

2. Define the HTML and server script for the widget:

   • In the widget editor, define the HTML structure for the widget. You can use HTML, CSS, and JavaScript to create the desired layout.
   • Use server-side script to retrieve the items added to the cart.
   • You can use GlideAjax or Service Portal API to query the cart items. Here's an example using GlideAjax:

// HTML structure for the widget
<div class="cart-items-widget">
   <h3>Shopping Cart</h3>
   <ul id="cart-items-list"></ul>
</div>

// Server script to retrieve cart items using GlideAjax
var CartItemsWidget = Class.create();
CartItemsWidget.prototype = {
   initialize: function () {},
   getCartItems: function () {
      var cartItems = [];
      var ga = new GlideAjax('CartItemsAjaxProcessor');
      ga.addParam('sysparm_name', 'getCartItems');
      ga.getXMLAnswer(function (response) {
         cartItems = JSON.parse(response);
         this.renderCartItems(cartItems);
      }.bind(this));
   },
   renderCartItems: function (items) {
      var cartItemsList = document.getElementById('cart-items-list');
      cartItemsList.innerHTML = '';

      for (var i = 0; i < items.length; i++) {
         var listItem = document.createElement('li');
         listItem.innerHTML = items[i].name;
         cartItemsList.appendChild(listItem);
      }
   },
   type: 'CartItemsWidget'
};

1. Create a Script Include:
   • Go to the ServiceNow Studio.
   • Create a new Script Include named "CartItemsAjaxProcessor."
   • In the Script Include, define a method named "getCartItems" that queries the cart items and returns the results as a JSON object.

// Script Include: CartItemsAjaxProcessor
var CartItemsAjaxProcessor = Class.create();
CartItemsAjaxProcessor.prototype = Object.extendsObject(AbstractAjaxProcessor, {
   getCartItems: function () {
      var cartItems = []; // Query the cart items and populate the array
      // Implement your logic here to retrieve the cart items
      return JSON.stringify(cartItems);
   },
   type: 'CartItemsAjaxProcessor'
});

1. Add the widget to the Service Portal page:
   • Go to the ServiceNow Service Portal.
   • Edit the page where you want to display the cart items.
   • Drag and drop the "CartItemsWidget" widget onto the desired section of the page.
   • Configure any additional properties or options for the widget as needed.