How to change in Service Catalog: Cart Item Quantity as Integer instead of select box choices

[swapnil57]

Hi All,

I'm looking for a way to change the item 'quantity' selection in shopping cart (at least in the cart widget when viewing items) so that it's not a drop-down but free-form / integer input type. also based on same integer value given, 'Subtotal' should be calculated.

The objective here is to be able to order high number of items that'd be specific one, so adding more down-down option is not the optimal way.

Please refer the below screenshot

Please suggest the convenient way to change the same.

[manish123]

Hi All,

Has anyone got the solution of it? I am also looking for same requirement. Could anyone help me in finding the solution.

Any help will be much appreciated!!!

[fdsafdsafds]

Also interested in doing this

[Jessica38]

Did anyone find a solution for this?

[-O-]

Assuming you are trying to do it in Service Portal (and not CMS), as mentioned above, you would need to clone the Catalog Item widget and re-write the HTML template around the quantity selection area.

[-O-]

To be more precise, if the widget to display catalog items is the OOB one having id widget-sc-cat-item-v2, one would need to clone it and change the Body HTML template as below:

            <div ng-if="c.showQuantitySelector()" class="cat-item-quantity-group m-b" style="align-items: center;">
              <label for="catItemQuantity" style="margin-bottom: 0;"><b>${Quantity}:</b></label>
              <div class="cat-item-quantity-box">
                <!--select id="catItemQuantity"
                        title="${Quantity}"
                        ng-disabled="disableControls()"
                        class="m-b sn-select-basic"
                        ng-model="c.quantity"
                        ng-change="c.updateQuantity(data.sc_cat_item)"
                        aria-hidden="true">
                  <option ng-repeat="num in data.choiceListQuantity" value={{::num.value}}>{{::num.label}}</option>
                </select-->
                <input class="form-control" id="catItemQuantity" ng-change="c.updateQuantity(data.sc_cat_item)" ng-disabled="disableControls()" ng-model="c.quantity" type="text" style="width: reset"/>
              </div>
            </div>

Once the cloned widget is placed on page sc_cat_item in place of the original one, the quantity would look something like: