Ability to replace a cart line item rendering

[agonsgd]

Please list the package(s) involved in the issue, and include the version you are using

{ "name": "checkout-ui", "private": true, "version": "1.0.0", "license": "UNLICENSED", "dependencies": { "react": "^17.0.0", "@shopify/ui-extensions": "2023.7.x", "@shopify/ui-extensions-react": "2023.7.x" }, "devDependencies": { "@types/react": "^17.0.0" } }

Describe the bug

purchase.cart-line-item.line-components.render is not rendering at all

Steps to reproduce the behavior:

Using this code:

import {
  reactExtension,
  Text,
  useTarget,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.cart-line-item.line-components.render",
  () => <Extension />
);

function Extension() {
  const {
    merchandise: { title },
  } = useTarget();
  return <Text>Line item title: {title}</Text>;
}

We are unable to log or do anything with it.

Expected behavior

This extension should render and replace the line item as described in the documentation:

"A static extension target that renders on every line item, inside the details under the line item properties element. It replaces the default component rendering."

Screenshots

Video for reproduction

[belalsj]

Hello @agonsgd,

As mentioned in the troubleshooting section in the docs: you might be testing using a development store that doesn't have the Checkout Extensibility enabled.

Please follow these steps to create a development store with Checkout Extensibility enabled:

1. On your partners dashboard click + Add Store > Create Development Store.
2. Select 🔘 Create a store to test and build
3. In the section under Which build do you want to test?, select 🔘 Developer Preview > Checkout Extensibility.

Please try the above steps and let me know if that solves your issue 😄

[agonsgd]

Hi @belalsj, Thanks for reply but other extension points are working.

And I'm using a test dev store with checkout extensibility.

[jamesvidler]

Hi @agonsgd,

The purchase.cart-line-item.line-components.render is only intended for use cases like Bundles. It's fairly new, and we have an open issue to update our docs to make this more clear. There's not currently a way to fully replace the line item rendering from a UI extension, but this target is intended to be used together with a cart transform function. These functions can replace one or more line items in the summary with a substitute item.

[agonsgd]

Hi @jamesvidler thank you for the clarification.

Are there any plans to add something that replaces the line item in checkout ? A perfect use case would be for custom variants that take multiple calculations in place.

[ProgramYourFace]

Is there any update on when this will be possible? We will need this functionality to truly replace checkout.liquid on our Shopify Plus store.

[avanfeel]

As of July 7, 2024, it may seem as this feature is still not fully available, the issue I'm experiencing prevents me from adding the app block to any of my Checkout pages:

Essentially, the app block available pages are not being displayed in the app block in the Checkout customizer.

Note: My app block did work when target was purchase.checkout.cart-line-item.render-after, but when changed to purchase.cart-line-item.line-components.render, it stopped working.

[avanfeel]

This issue explains my comment above: https://github.com/Shopify/ui-extensions/issues/1462