I’ve made a component that has a single-select group of variants.
- The active variant is based on a dynamic value(with some code) linked to the component variant field.
- That dynamic value is from a state.
- The component will switch variants depending on the interaction. e.g. when the ‘edit icon’ is clicked, it will open up a form to allow edit etc.
On a separate note, this project had some issues a few weeks back, where the new changes published to Plasmic Hosting don’t show up on the published site. That issue has since been resolved by the Plasmic Team.
The component worked fine before the issue mentioned above. Now, it works when ‘previewing’ in Plasmic Studio (i.e. clicking on the green play button, not just interactive mode.) But, it doesn’t work on the published site (I used Plamic Hosting).
This is the component, and the edit icon mentioned.
When clicked, it should change to the open variant. (which works in preview mode in Plasmic Studio)
To troubleshoot, I’ve test out a few things:
- The component uses the dynamic value from a state to update the variant. I’ve connected the variant state’s value to some text to see if they are being updated when the component’s interaction is fired. As you can see below, the interaction does update the state in the site published with Plasmic Hosting. But it doesn’t change the variant of the component.
- I’ve also tried creating a new test component and ‘wired’ it the same way (by linking the variant to a dynamic value from a state, and updating that state with an interaction). The new component works as intended in the live site published with Plasmic Hosting. Below is the screen capture of that.
- Finally, instead of directly adding the dynamic value to the variant field of the component, I tried creating a new prop in the component and set that as the value for ‘use dynamic value’ within the component variant(shown in the image below). That somehow works even when published with Plasmic Hosting. This workaround works, but is not desirable.
Summary: The component’s variant doesn’t change on the live site, but works in preview mode. Using a prop and linking that prop to the component variant’s ‘use dynamic value’ (internally) works. New components with variants work fine.
I hope someone can look into this, because the problems with publishing to Plasmic Hosting has really been delaying my progress on the project. Any help is greatly appreciated.
Relevant links:
- My project: Plasmic
please note, my project is set to private because my database is connected to it atm.