When using Shopify CLI, the cart page throws an error when updating quantities or removing items. I thought it’s a theme problem (Dawn), but turns out when developing on localhost, the /cart/change endpoint responds with an invalid JSON (missing closing brackets on items_removed, etc.)
Example response:
{
"token": "xxx",
"note": "",
"attributes": {},
"original_total_price": 0,
"total_price": 0,
"total_discount": 0,
"total_weight": 0.0,
"item_count": 0,
"items": [],
"requires_shipping": false,
"currency": "USD",
"items_subtotal_price": 0,
"cart_level_discount_applications": [],
"items_added": [],
"items_removed": [
{
"product_id": 6813901848713,
"variant_id": 40025141739657,
"id": "c0ad423a-b98c-4488-bece-431489f0d602",
"image": "https:/assets/component-cart.css?v=164708765130180853531735840015\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-cart-items.css?v=123238115697927560811735840014\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-totals.css?v=15906652033866631521735840037\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-price.css?v=70172745017360139101735840029\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-discounts.css?v=152760482443307489271735840019\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/quantity-popover.css?v=129068967981937647381735840119\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<style data-shopify>.section-template--24301417136467__cart-items-padding {\n padding-top: 27px;\n padding-bottom: 27px;\n }\n\n @media screen and (min-width: 750px) {\n .section-template--24301417136467__cart-items-padding {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n }</style><script src=\"/assets/cart.js?v=11524054698456058551737115553\" defer=\"defer\"></script><script src=\"/assets/quantity-popover.js?v=987015268078116491735840120\" defer=\"defer\"></script>\n\n<cart-items class=\"gradient color-scheme-1 isolate is-empty\">\n <div class=\"page-width\">\n <div class=\"title-wrapper-with-link\">\n <h1 class=\"title title--primary\">Your cart</h1>\n <a href=\"/collections/all\" class=\"underlined-link\">Continue shopping</a>\n </div>\n\n <div class=\"cart__warnings\">\n <h1 class=\"cart__empty-text\">Your cart is empty</h1>\n <a href=\"/collections/all\" class=\"button\">\n Continue shopping\n </a><h2 class=\"cart__login-title\">Have an account?</h2>\n <p class=\"cart__login-paragraph\">\n <a href=\"/account/login\" class=\"link underlined-link\">Log in</a> to check out faster.\n </p></div>\n\n <form action=\"/cart\" class=\"cart__contents critical-hidden\" method=\"post\" id=\"cart\">\n <div class=\"cart__items\" id=\"main-cart-items\" data-id=\"template--24301417136467__cart-items\">\n <div class=\"js-contents\"></div>\n </div>\n\n <p class=\"visually-hidden\" id=\"cart-live-region-text\" aria-live=\"polite\" role=\"status\"></p>\n <p\n class=\"visually-hidden\"\n id=\"shopping-cart-line-item-status\"\n aria-live=\"polite\"\n aria-hidden=\"true\"\n role=\"status\"\n >\n Loading...\n </p>\n </form>\n </div>\n</cart-items>\n\n\n</div>",
"cart-icon-bubble": "<div id=\"shopify-section-cart-icon-bubble\" class=\"shopify-section\">\n <span class=\"svg-wrapper\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" class=\"icon icon-cart-empty\" viewBox=\"0 0 40 40\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z\"/></svg>\n</span>\n\n\n<span class=\"visually-hidden\">Cart</span></div>",
"cart-live-region-text": "<div id=\"shopify-section-cart-live-region-text\" class=\"shopify-section\">New estimated total: $0.00 USD\n</div>",
"template--24301417136467__cart-footer": "<div id=\"shopify-section-template--24301417136467__cart-footer\" class=\"shopify-section cart__footer-wrapper\"><link href=\"/assets/component-cart.css?v=164708765130180853531735840015\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-totals.css?v=15906652033866631521735840037\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-price.css?v=70172745017360139101735840029\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<link href=\"/assets/component-discounts.css?v=152760482443307489271735840019\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n<style data-shopify>.section-template--24301417136467__cart-footer-padding {\n padding-top: 30px;\n padding-bottom: 30px;\n }\n\n @media screen and (min-width: 750px) {\n .section-template--24301417136467__cart-footer-padding {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n }</style><div\n class=\"gradient color-scheme-1 is-empty\"\n id=\"main-cart-footer\"\n data-id=\"template--24301417136467__cart-footer\"\n>\n <div class=\"page-width\">\n <div class=\"cart__footer isolate section-template--24301417136467__cart-footer-padding\"><div class=\"cart__blocks\">\n \n<div class=\"js-contents\" >\n <div></div>\n\n <div class=\"totals\">\n <h2 class=\"totals__total\">Estimated total</h2>\n <p class=\"totals__total-value\">$0.00 USD</p>\n </div>\n\n <small class=\"tax-note caption-large rte\">Taxes included. Discounts and shipping calculated at checkout.\n</small>\n </div>\n<div class=\"cart__ctas\" >\n <button\n type=\"submit\"\n id=\"checkout\"\n class=\"cart__checkout-button button\"\n name=\"checkout\"\n \n disabled\n \n form=\"cart\"\n >\n Check out\n </button>\n </div>\n\n <div id=\"cart-errors\"></div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>"
}
}