How edit existing checkout components (discount code) with ui extensions custom app?

[karlberan]

Hello shopify community,

at the time I'm trying to change the dropdown of the order summary to be extended automatically (by an own app), when visitng the checkout for mobile devices. Because the coupon code field is listed in the order summary and on mobile view the order summary is not extended by nature, so the visitors cannot see the coupon code field on first sight on mobile view.

Because the shop (manukahealthshop.myshopify.com) on which I want to change this property, is an shopify plus shop with checkout ui extensions and no checkout.liquid (anymore), so I am developing an app with checkout ui extensions in javascript to make the order summary automatically being extended on mobile view.

But here I stuck, for me its no problem to create additional buttons (on my dev store), banners and so on, this works fine by using createComponent, but till now I couldnt change the property of given checkout components.

Is it possible to change the css properties of the order summary div box or either to make the order summary button on click, so that the order summary with the coupon code is shown from the beginning by visitng the mobile checkout?

I tried to use standard javascript commands like getelementbyid.style and so on but as I thought (I got errors all the time) they are not allowed in there, just the shopify commands / structures / components.

Is it possible to change style and properties of given checkout components with checkout ui extensions generally?
If yes, do I have to create a special chekout component, with which I can change the properties of other standard (given) shopify checkout components?
Or is it possible to change the position of the discount code field, f.e. below the order summary or somewhere else by checkout ui extensions? This would be the best solution.

Please consider Im no pro in here, I just startet with shopify appdev a week ago.

And further here a few pictures for explaining my issue with the coupon field in checkout:

 

If anyone could help me this would be great!
Any hint or feedback is helpful to me.

Thank you very much in advance!

Best regards

Karl Beran

[karlberan]

Here also a short Update: Now I found out that to change style of existing components I have to use advanced checkout branding, so I tried to make the order summary to be expanded automatically with the graphiql app from shopware. But here I could change many style Properties but not the property to expand the order summary. Or to make it short also with advanced checkout branding and graphql I didnt get it done. This is not the thing I imagined and very regrettable. Perhaps another option is possible but I think there is no possibility to get this done by now. I stuck. ☹️

[st_m_v]

Hi Karlberan, did you get any success on that?