Update catalog item price when quantity changes in service portal

[Reddy]

Hello,

I wanted to update the catalog item price when quantity changes in service portal.

Thanks

SR

[Rafael Batistot]

Hi @Reddy 

May you use the Catalog Client Script

Go to the Catalog Item → Catalog Client Scripts and create a new one:

• Type: onChange
• Variable name: quantity

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var unitPrice = 50; // Set your unit price here
    var totalPrice = unitPrice * parseInt(newValue);

    // Show price dynamically (e.g., in a read-only variable or description)
    g_form.setValue('price_display', '$' + totalPrice); // 'price_display' is a read-only variable to show price
}

[Reddy]

@Rafael BatistotCatalog item quantity and price are displayed using the out-of-the-box service catalog item widget. I'm not using any variables.

[Ankur Bawiskar]

@Reddy 

this doesn't happen OOTB i.e. based on quantity it won't change the price.

you will have to do customization for this

check this link and enhance

price not updating when changing quantity in service portal item 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Reddy · Accepted solution]

I used the below code and achieved it.

HTML:

<select id="catItemQuantity"
        ng-if="c.showQuantitySelector()"
        ng-disabled="submitting || submitted"
        class="m-r-xs sn-select-basic inline"
        ng-model="c.quantity"
        ng-change="c.updateQuantity(data.sc_cat_item)" 
        sn-select-width="65px"
        aria-label="${Quantity}">
    <option ng-repeat="num in data.choiceListQuantity" value="{{::num.value}}">
        {{::num.label}}
    </option>
</select>

Client:

c.announceQuantityChange = function(item) {

  spAriaUtil.sendLiveMessage(

    c.data.msgs.updatedMsg + " " + item.name + " " + c.data.msgs.quantityToMsg + " " + c.quantity

  );

};


c.updateQuantity = function(item) {

  var qty = parseInt(c.quantity || 1, 10);

  if (isNaN(qty) || qty < 1) qty = 1;

  var unitPrice = resolveUnitPrice(c.data);

  var subtotal  = unitPrice * qty;

  c.unitPrice = unitPrice;

  c.subtotal  = subtotal; // never null at qty=1



  if (!$scope.$$phase) $scope.$apply();

};

function parsePrice(val) {

  if (typeof val === 'number') return val;

  if (!val) return 0;

  return parseFloat(String(val).replace(/[^0-9.]/g, '')) || 0;

}



function resolveUnitPrice(data) {

  var item = data && data.sc_cat_item;

  var pr = item && item._pricing;

  if (pr && pr.price) return parsePrice(pr.price);

  if (pr && pr.display_price) return parsePrice(pr.display_price);

  if (item && item.price_display) return parsePrice(item.price_display);

  if (item && item.price) return parsePrice(item.price);

  return 0;

}


// ---- Initialize quantity/price/subtotal ----

var quantity = parseInt(c.quantity || 1, 10);

if (isNaN(quantity) || quantity < 1) quantity = 1;



var unitPrice = resolveUnitPrice(c.data);

c.unitPrice = unitPrice;

c.subtotal  = unitPrice * quantity;