Given a simple component with two variants:
• V1: Image on left, text on right
• V2: Text on right, image on left
We have a screen that instantiates this component twice, one using V1, and the other using V2
We are doing server side rendering, and it looks like the component selection is not carried out ahead of time and with CSS, and rather happens when we execute JS on the page after… This is a problem because we would really like to not hydrate this page, bu tin that case, the variant selection does not work
@yang
• Project: https://studio.plasmic.app/projects/k5wi36LTCNmnJb5rh2sgis
• Page: “Home”
• Component: “Ecomm Block Module”
Pic below is when it renders correctly. If I turn off hydration the images both show on the same side. I think this one also flickers into position on render when js is enabled (due to js fixing it up)
I would recommend editing the Ecomm Block Module component itself to be responsive
You can alternatively instantiate two Ecomm Block Modules, one with Swap disabled and one with enabled, and make one of them visible vs hidden at a time - this will also use pure media queries
@yang aha… I did not realize that the variant param actually changed between screens… I get it. If we can have it statically set across all screens, then it should be lowered to pure CSS, right?