Adding Price Field to Catalog Items and Cart in Employee Center

[tharun24]

Add a new price field and ensure it appears on the catalog item form and in the cart within the Employee Center.

Introduction

In ServiceNow's Employee Center, the shopping cart widget is a vital tool for managing orders. However, it doesn't provide the flexibility to display additional details like postage costs by default. By customizing the widget, we can enhance the user experience by dynamically fetching and displaying information such as postage costs or other order-related details. This ensures greater transparency, improves efficiency, and provides users with a more comprehensive view of their orders.

In this article, I'll guide you through the process of adding such details to the shopping cart widget, making it more versatile and user-friendly.

Solution Implementation

Step 1: Creation of Postage field in the catalog item

1. Create a new field (Postage) of data type price

           

Step 2: Cloning the existing widget and fetching data

1. Navigate to Service Portal > Widgets. Search for the HRM Catalog Item
2. Clone the widget by selecting the "Clone" option. Name the new widget appropriately (e.g., CP - HRM Catalog Item V4)
3. Navigate to Service Portal > Widgets. Search for the SC Catalog Item
4. Clone the widget by selecting the "Clone" option. Name the new widget appropriately (e.g., CP - SC Catalog Item V1).
5. Open the cloned widget "CP - HRM Catalog Item V4". In the Server Script section, call the cloned "CP - SC Catalog Item V1" widget with the id and update it.

          

1. Add the following code in the Server script section of "CP - SC Catalog Item V1" to fetch postage data dynamically.

          

1.  Add the following code in the Client side section of CP - SC Catalog Item V1 to validate the catalog item’s postage.

          

1. Add the following code in the Body HTML template section of CP - SC Catalog Item V1 and update it. It ensures to display if and only if the postage cost is not empty.

        

1. Add the updated widget CP - HRM Catalog Item V4 using the page in designer.
2. Postage will be displayed as shown in the below image.

       

Step 3: Displaying the highest postage if multiple items are added to the cart.

1. Navigate to Service Portal > Widgets. Search for the SC Shopping Cart.
2. Clone the widget by selecting the "Clone" option. Name the new widget appropriately (e.g., CP SC Shopping Cart)
3. Add the following code in the Server side section of the CP SC Shopping Cart to fetch highest postage of catalog item.

           

1. Add the following code in the Client Side section of CP - SC Catalog Item V1 to validate the catalog item’s postage.

         

1. Open the SC Shopping Cart widget's Related Lists section.

          

1. Locate and open the Angular ng-templates related list.
2. Open the template named large_shopping_cart_v2.html.
3. Modify the widget field value to point to your cloned widget's name.

          

1. In the large_shopping_cart_v2.html, add the following code to display postage.
2. Among items in the cart, the highest postage cost will be displayed.

Step 4: Adding postage to the price field on Request / Requested Item.

1. Create a New Field: Add a new field named Postage of data type Price to the Request Item table.
2. Create a Business Rule on the Request Table:
1. When to Run: Set the business rule to run Before Insert.
2. Advanced: In the script section of the business rule, it includes the following logic:
   1. Fetches the postage value from the catalog item and populates it in the Postage field on the Request Item table.
   2. If only one Request Item is associated with the Request, it adds the postage value directly to the Request Item.
   3. If multiple Request Items are associated with the Request, it determines the highest postage value among them and adds it to the Price field on the Request
      
3. The code for the business rule is provided below.

(function executeRule(current, previous /*null when async*/ ) {

    // Initialize variables to track total price and postage costs

    var totalPrice = 0;

    var postage = 0;

    // Query all requested items (RITMs) linked to the current request

    var reqItem = new GlideRecord("sc_req_item");

    reqItem.addQuery('request', current.sys_id);

    reqItem.query();

    // Check if the request has only one request item

    if (reqItem.getRowCount() == 1) {

        while (reqItem.next()) {

            // Convert the values from catalog item fields to numeric data types, defaulting to 0 if empty

            var itemPostage = parseFloat(reqItem.cat_item.u_postage || 0);

            var itemPrice = parseFloat(reqItem.cat_item.price || 0);

            // Update the RITM's postage value, assuming this is a requirement

            reqItem.setValue("u_postage", itemPostage); // Assuming you want to set it here

            reqItem.update();

            // Calculate the total price for the request

            totalPrice = itemPostage + itemPrice;

            current.price = totalPrice; // Update the total price field on the request record

        }

    }

    // If the request contains multiple items

    else if (reqItem.getRowCount() > 1) {

        var postage2 = 0;

        while (reqItem.next()) {

            // Convert the values from catalog item fields to numeric data types

            var itemPrice = parseFloat(reqItem.cat_item.price || 0);

            var itemPostage = parseFloat(reqItem.cat_item.u_postage || 0);

            // Compare and store the highest postage value from all RITMs

            if (postage2 < itemPostage) {

                postage2 = itemPostage;

            }

            // Add the item price and recurring price to the total price

            totalPrice = totalPrice + itemPrice;

        }

        // Add the highest postage value to the total price

        totalPrice = totalPrice + parseFloat(postage2 || 0);

        current.price = totalPrice; // Update the total price field on the request record

    }

})(current, previous);

Hope you like it. If any questions or remarks, let me know!

Happy Learning !!!

Regards
Tharun Bandi