Displaying line item compareAtPrice at checkout
I'm attempting to write a checkout extension that will retrieve the price and compareAtPrice for each line item and display it at checkout, like the OP in this thread:
I understand that due to limitations, it might have to display the compareAtPrice as seen in this screenshot, which appears to be using with the purchase.checkout.cart-line-item.render-after target:
Specifically, the text "Originally $19.99"
I understand how to retrieve custom data at checkout and display it below the line item:
https://shopify.dev/docs/apps/checkout/display-custom-data?extension=react
I see that it is possible to retrieve some product data by importing React hooks like useCartLines and useAppMetafields, but I don't see any hooks that contain the line item's compareAtPrice.
It looks like we could use the Storefront Direct Access API to query the compareAtPrice:
- Storefront Direct Access API- Extensions can query the storefront API of a shop to get additional information like product tags, product recommendations, or currency conversions. Shopify handles authentication, so the extension only needs to pass in the query. This API is available to all apps and does not require the app to be a sales channel.
But that seems unnecessarily complicated to retrieve a compare at price. Is there an easier way to get this information for each line item? Am I missing something?
Thanks!
