Cart notification does not load for products with discounts (via Script Editor app) that modify cart line items

[KaichenWang]

Describe the current behavior

1. Use Script Editor app to configure a "Line items" script that applies a discount:

Input.cart.line_items.each do |item|
  item.change_line_price(item.line_price * 0.9, message: "10% off all items!")
end

Output.cart = Input.cart

2. On storefront, add any product to cart
3. Cart notifications does not load; cart bubble is not updated
4. Error in console:

   TypeError: Cannot read properties of null (reading 'innerHTML')
   at CartNotification.getSectionInnerHTML

Describe the expected behavior

Cart notification loads and is rendered with correct product information

Version information (Dawn, browsers and operating systems)

• Dawn Version: 4.0.0
• Chrome Version 98.0.4758.109
• macOS Version 12.2.1

Possible solution

1. Dawn: Better error handling for cart notification

2. Platform: cart/add API response could eliminate a discrepancy in the item key:

cart/add response is JSON object with line items:

{
  id: 1057913602092
  key: "1057913602092:6b175fe3d46aad8ef353c7c7a61cbb35"
  ...
  sections: { ... }
}

sections object contains rendered HTML of cart (used to populate the cart notification) and includes the HTML of the item that was just added to the cart. However, the key rendered in the HTML is not the same as the key value in the response. This is caused by the Script Editor adding a discount line item: https://www.diffchecker.com/jDihmnE6.

Additional context/screenshots

More on how item key is generated: https://community.shopify.com/c/shopify-apis-and-sdks/generating-line-item-key-in-app/td-p/497476

This behaviour was introduced by https://github.com/Shopify/dawn/pull/1321

[KaichenWang]

TLDR for Dawn: Introduce better error handling for cart notification to deal with JS errors