Editing Order Product Quantity, recalculation subtotals

Hi all,
under edit order details, i have add the automatic recalculate the subtotal if i change the quantity or single price.
I hope it may be of help to others, or it added in a new release; these are the modified files.

At the end of
Presentation\Nop.Web\Administration\Views\Order\AddProductToOrderDetails.cshtml

<script type="text/javascript">
  $(document).ready(function () {
    $("#Quantity, #UnitPriceInclTax, #UnitPriceExclTax").TouchSpin().on('change', function () {
      updateTotal();
    });            
  });

  function updateTotal() {
    var quantity = $("#Quantity").val();
    var unitPriceInclTax = $("#UnitPriceInclTax").val();           
    var unitPriceExclTax = $("#UnitPriceExclTax").val();
     
    var priceInclTax = unitPriceInclTax * quantity;
    $("#SubTotalInclTax").val(priceInclTax.toFixed(4));

    var priceExclTax = unitPriceExclTax * quantity;
    $("#SubTotalExclTax").val(priceExclTax.toFixed(4));
  }
</script>

Presentation\Nop.Web\Administration\Views\Order\_OrderDetails.Products.cshtml

@foreach (var item in Model.Items)
{
  <script type="text/javascript">
    $(document).ready(function () {
      toggleOrderItemEdit@(item.Id)(false);
      $("#pvQuantity@(item.Id)").TouchSpin({
        verticalbuttons: true,
        verticalupclass: 'glyphicon glyphicon-plus',
        verticaldownclass: 'glyphicon glyphicon-minus'
      })
      .on('change', function () {
        updateTotal@(item.Id)();
      });
    });
  </script>

  <script type="text/javascript">
    function updateTotal@(item.Id)() {
      var quantity = $("#pvQuantity@(item.Id)").val();
      var pvUnitPriceInclTax = $("#pvUnitPriceInclTax@(item.Id)").val();
      var pvPriceInclTax = pvUnitPriceInclTax * quantity;

      var pvUnitPriceExclTax = $("#pvUnitPriceExclTax@(item.Id)").val();
      var pvPriceExclTax = pvUnitPriceExclTax * quantity;

      $("#pvPriceInclTax@(item.Id)").val(pvPriceInclTax.toFixed(4));
      $("#pvPriceExclTax@(item.Id)").val(pvPriceExclTax.toFixed(4));
    }
    function toggleOrderItemEdit@(item.Id)(editMode) {
      if (editMode) {
        $('#pnlEditPvUnitPrice@(item.Id)').show();
        $('#pnlEditPvQuantity@(item.Id)').show();
        $('#pnlEditPvDiscount@(item.Id)').show();
        $('#pnlEditPvPrice@(item.Id)').show();
        $('#btnEditOrderItem@(item.Id)').hide();
        $('#btnDeleteOrderItem@(item.Id)').hide();
        $('#btnSaveOrderItem@(item.Id)').show();
        $('#btnCancelOrderItem@(item.Id)').show();
      } else {
        $('#pnlEditPvUnitPrice@(item.Id)').hide();
        $('#pnlEditPvQuantity@(item.Id)').hide();
        $('#pnlEditPvDiscount@(item.Id)').hide();
        $('#pnlEditPvPrice@(item.Id)').hide();
        $('#btnEditOrderItem@(item.Id)').show();
        $('#btnDeleteOrderItem@(item.Id)').show();
        $('#btnSaveOrderItem@(item.Id)').hide();
        $('#btnCancelOrderItem@(item.Id)').hide();
      }
    }
  </script>
}

<td style="width: 15%;">
  @if (Model.AllowCustomersToSelectTaxDisplayType)
  {
    <div>@item.UnitPriceInclTax</div>
    <div>@item.UnitPriceExclTax</div>
  }
  else
  {
    switch (Model.TaxDisplayType)
    {
      case TaxDisplayType.ExcludingTax:
      {
        @item.UnitPriceExclTax
      }
        break;
      case TaxDisplayType.IncludingTax:
      {
        @item.UnitPriceInclTax
      }
        break;
      default:
        break;
    }
  }
  <div id="pnlEditPvUnitPrice@(item.Id)">
    <div class="form-group">
      <div class="col-md-5">
        @T("Admin.Orders.Products.Edit.InclTax")
      </div>
      <div class="col-md-7">
        <input name="pvUnitPriceInclTax@(item.Id)" type="text" value="@item.UnitPriceInclTaxValue" id="pvUnitPriceInclTax@(item.Id)" class="form-control input-sm" onblur="updateTotal@(item.Id)()" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-5">
        @T("Admin.Orders.Products.Edit.ExclTax")
      </div>
      <div class="col-md-7">
        <input name="pvUnitPriceExclTax@(item.Id)" type="text" value="@item.UnitPriceExclTaxValue" id="pvUnitPriceExclTax@(item.Id)" class="form-control input-sm" onblur="updateTotal@(item.Id)()" />
      </div>
    </div>
  </div>
</td>
<td style="width: 10%;">
  <div>@item.Quantity</div>
  <div id="pnlEditPvQuantity@(item.Id)">                                        
    <div class="col-md-8 col-md-offset-2">
      <div class="form-group">



        <input name="pvQuantity@(item.Id)" type="text" value="@item.Quantity" id="pvQuantity@(item.Id)" class="form-control"/>
      </div>
    </div>                                       

  </div>
</td>

Best regards
Giampiero

Hi Giampiero,

Thank you for the  code.

I inserted the code at the end of the documents you specified but its not working. Instead it gave me this error:

We're sorry, an internal error occurred.

Our supporting staff has been notified of this error and will address the issue shortly.

We apologize for the inconvenience.

Please try clicking your browsers 'back' button or try reloading the home page.

If you continue to receive this message, please try again in a little while.

Thank you for your patience.

Please advise on how to insert the code in the documents correctly, in order for it to work properly.
P.S: I am new to Nopcommerce and I am a novice at coding. I am also using Nopcommerce 4.0

Regards

NB: I am trying to get the order total to update automatically when I edit the price.

Hi,
the event is triggered onblur in price textbox. Try to chance price and press TAB

Hi,

What changes do I have make in the code above?