Solved

Checkout UI Extension Overlaying Div Content

Gregles
Shopify Partner
16 3 0

Hi,

 

I'm creating a Checkout UI extension for a client that makes address recommendations to replace the built in Google Address Search. I'm aware there is the new autocomplete endpoint but the way the address system the client is using work, I can't use this approach (or can but it would make it much more expensive).

 

The issue I have is that I've created the search box and results panel, but I can't get the results panel to overlay the other elements on the page. Instead it pushes them down like this:

Screen Shot 2024-05-17 at 4.05.26 pm.png

 

The question I have is is there a way to make that results div overlay other items on the page relative to another item (the search box)?

 

Or, is there a component I've missed that solves that problem? Ideally it should be positioned next to the search field, so a modal is not appropriate.

 

This is the wrapping element, I'm just using a BlockLayout element for it.

Screen Shot 2024-05-17 at 5.18.05 pm.png

 

Ideally I want to recreate what already exists if possible.

 

Thanks for any pointers.

 

Accepted Solution (1)

3node_vackam
Shopify Partner
14 2 2

This is an accepted solution.

Hey @Gregles,

You might want to try something like this:

 

const blockLayout = root.createComponent(
BlockLayout,
{
rows: ['auto', 1],
},
[
root.createComponent( /* Your text input */ ),
root.createComponent( /* Your auto-search modal */ ),
],
);
root.appendChild(blockLayout);

 

The first row should adjust it's size to the search bar and the other should be small enough to make the auto-search modal overflow - which should result in what you're expecting. However, Shopify might be preventing this behaviour. If you find out that is the case, I recommend experimenting with the Modal / Popover components.

Hope this helps :]

Kamil Václavek - Shopify Checkout Extensibility Specialist

View solution in original post

Reply 1 (1)

3node_vackam
Shopify Partner
14 2 2

This is an accepted solution.

Hey @Gregles,

You might want to try something like this:

 

const blockLayout = root.createComponent(
BlockLayout,
{
rows: ['auto', 1],
},
[
root.createComponent( /* Your text input */ ),
root.createComponent( /* Your auto-search modal */ ),
],
);
root.appendChild(blockLayout);

 

The first row should adjust it's size to the search bar and the other should be small enough to make the auto-search modal overflow - which should result in what you're expecting. However, Shopify might be preventing this behaviour. If you find out that is the case, I recommend experimenting with the Modal / Popover components.

Hope this helps :]

Kamil Václavek - Shopify Checkout Extensibility Specialist