Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How do I manipulate the DOM in Checkout? Is there a prop for pickup location?

How do I manipulate the DOM in Checkout? Is there a prop for pickup location?

TheThisThat
Shopify Partner
64 3 17

I have a checkout extension that targets pickup. I need to hide the pickup location (circled in green) if someone checks the box in the image (orange text).

 

I don't know the best way to achieve this.  I am thinking if there was a prop I could pass to my extension for this then I could do this but this is just a stab since I don't know if one exists.
Guidance appreciated!

prop-pass.jpg

 

a little of this and a little of that
Replies 3 (3)

Liam
Community Manager
3108 344 904

Hi - there's no ability to access the window object or other methods of DOM manipulation with checkout extensions, so hiding this field may not be possible. The new extensibility model is designed to be more secure and reliable, and as such, it restricts certain types of customizations that were possible with checkout.liquid and script tags. Have you looked into Shopify Functions to see if your use case would be supported by them? 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

TheThisThat
Shopify Partner
64 3 17

I didn't see a way to use shopify functions to hide the pick up location but I have not created a function yet. 

Do you know of a way to hide or not show the location pickup banner that I have circled in my screenshot when someone selects pickup?

a little of this and a little of that
Liam
Community Manager
3108 344 904

I don't think this would be possible with a checkout extension as you're trying to hide/ interact with a default checkout element, which is out of scope for checkout extensions (as you can't select elements and interfere with the DOM). The best bet would be to explore if it's possible with functions.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog