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

Oleksii Prozhoha
Share

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

get in touch

YOUR SEARCH FOR YOUR DREAM TEAM ENDS HERE

Drop us a few lines about your project and we'll get back to you within one business day

Thank you for your inquiry! Someone from our team will contact you shortly.
I have read and accepted Terms & Conditions and Privacy Policy