Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkout UI Extension app block not rendering in the correct position #2142

Open
ctrlaltdylan opened this issue Jun 28, 2024 · 1 comment
Open
Labels
bug Something isn't working

Comments

@ctrlaltdylan
Copy link

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

    "@shopify/ui-extensions": "2024.1.x",
    "@shopify/ui-extensions-react": "2024.1.x",
    "react": "^18.0.0"

Describe the bug

We're trying to help a merchant add one of our checkout extensibility blocks to their Checkout page, the block renders successfully but it's not placed in the correct position within the rendered checkout page.

In this screenshot attached you can see our app block is clearly placed below the Shipping Address section. But unfortunately the app block is still rendered above shipping.

The extension target is purchase.checkout.block.render and we don’t have any other problems placing this block below shipping with any other merchant.

Steps to reproduce the behavior:

I'm unable to reproduce except for this particular merchant's site.

All of our other merchants and development stores have no issues with accurate block section -> checkout page positioning.

Expected behavior

I expect the order of sections to be respected in the Checkout pages.

Screenshots

incorrectly positioned app block

Additional context

I can provide the merchant's shopify domain to official Shopify staff, please email me at dylan [at] getverdict [dot] com

@ctrlaltdylan ctrlaltdylan added the bug Something isn't working label Jun 28, 2024
@chris-adrian
Copy link

chris-adrian commented Jan 17, 2025

Please delete my comment if it is not appropriate, but would like to add that the positioning bug happens to our client as well though a bit different.

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

"dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2024.4.x",
    "@shopify/ui-extensions-react": "2024.4.x"
  }

Describe the bug

In preview it is showing as expected, right at the delivery section:
Image

But in the actual site it is rendered right above the "pay now" button (below payment section):
Image

Steps to reproduce the behavior

I found that when a custom extension is using the "purchase.checkout.block.render" target, this positioning bug happens often.

I have yet to encounter positioning bug when using other targets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants