How to update shopping cart in Magento 2 with Ajax/Javascript

This is a step-by-step guide on how to allow updating data on Magento 2 cart or checkout page without refreshing it.

FIRST, See Magento API doc for any requests or params https://devdocs.magento.com/swagger/#/

For this task we should use API  quoteGuestCartItemRepositoryV1 and quoteGuestCartTotalRepositoryV1

1. In page source find checkout data, e.g. window.checkoutConfig = {}
2. Get CartID this equals to window.checkoutConfig.quoteData.entity_id
3. Code Javascript listeners for +/- icons, e.g.
4. When + or – icon is clicked
   1. Get item ID
   2. Get JSON for request here window.checkoutConfig.quoteItemData[0], find a proper product index using ItemID got on step 4.a
   3. Make API Call with Ajax PUT /V1/guest-carts/{cartId}/items/{itemId}, e.g.
      1. PUT /rest/V1/guest-carts/B3CjHPGMRaPRKN8am8xxzZoXLphNejKV/items/78

      2. with body

         { "cartItem": { "item_id":"78", "quote_id":"B3CjHPGMRaPRKN8am8xxzZoXLphNejKV", "sku":"Solar_Edge_SE8K", "name":"Solar Edge SE8K", "qty":1, "price":"4935.0000", "product_type":"simple", "product_option" : [] } }

   4. Fetch Updated data using API GET /V1/guest-carts/{cartId}/totals

      1. Get some response like this 

         { "grand_total": 9870, "base_grand_total": 9870, "subtotal": 9870, "base_subtotal": 9870, "discount_amount": 0, "base_discount_amount": 0, "subtotal_with_discount": 9870, "base_subtotal_with_discount": 9870, "shipping_amount": 0, "base_shipping_amount": 0, "shipping_discount_amount": 0, "base_shipping_discount_amount": 0, "tax_amount": 0, "base_tax_amount": 0, "weee_tax_applied_amount": null, "shipping_tax_amount": 0, "base_shipping_tax_amount": 0, "subtotal_incl_tax": 9870, "shipping_incl_tax": 0, "base_shipping_incl_tax": 0, "base_currency_code": "PLN", "quote_currency_code": "PLN", "items_qty": 2, "items": [ { "item_id": 78, "price": 4935, "base_price": 4935, "qty": 2, "row_total": 9870, "base_row_total": 9870, "row_total_with_discount": 0, "tax_amount": 0, "base_tax_amount": 0, "tax_percent": 0, "discount_amount": 0, "base_discount_amount": 0, "discount_percent": 0, "price_incl_tax": 4935, "base_price_incl_tax": 4935, "row_total_incl_tax": 9870, "base_row_total_incl_tax": 9870, "options": "[]", "weee_tax_applied_amount": null, "weee_tax_applied": null, "name": "Solar Edge SE8K" } ], "total_segments": [ { "code": "subtotal", "title": "Subtotal", "value": 9870 }, { "code": "shipping", "title": "Shipping & Handling", "value": 0 }, { "code": "tax", "title": "Tax", "value": 0, "extension_attributes": { "tax_grandtotal_details": [] } }, { "code": "grand_total", "title": "Grand Total", "value": 9870, "area": "footer" } ] }

   5. Update appropriate values on the page to avoid refreshing