Builder public api key
22d7e777310243139ed9f12ba85d84f0
What are you trying to accomplish
I want to hide the ‘subscribe now’ button on page rendering by default, and then show only if the the conditional rendering to display is true. Currently, if the button should be hidden, it still renders for a split second before dissapearing. Is there a way to make it hidden on default render, and only render if conditions are true?
Screenshots or video link
The image shows where it renders for a split second and then disappears. It should be hidden if the following conditions are true: state.hasProSubscription & state.hasIntelligenceSubscription.
It probably because the state is rendering before the page loads , and then once it loads, the logic then runs, which is why you are experiencing these flashes.
You can try setting and defining the state on the server side before page render inside of the custom CSS + JS section.
Something like:
if (Builder.isServer) {
// Place any code here you want to only run on the server. Any
// data fetched on the server will be available to re-hydrate on the client
// if added to the state object
state.hasProSubscription = true
state.hasIntelligenceSubscription = true
}
That does work, but only when in a logged in state to not show the button upon rendering.
However, with that code implemented, the button never renders even if the user is not logged in and those conditions are false. Is there a way to make this temporary upon loading, and then if the user is logged in, have that value override these?
I can’t seem to find where you have the logic for the button should be hidden if the following conditions are true: state.hasProSubscription & state.hasIntelligenceSubscription. When I inspect the state, I only see :
From the code above I sent, this will always set these two states to true upon load. For other, more specific cases, you can use conditionals to set when it should be true and when it should not. I don’t know what state value you use to see if a user is logged in, but it could look something like, so that these only run if user is logged in. You can also add the else condition to set the state when user is not logged in.
Since this page is in production, I can’t load the usual state. I took the following piece of state from another page, which this page has access too, even if not shown in builder, in production.
We don’t have a ‘isSignedUp’ state, but I check the signed in status if they have an ‘email.’ However, that doesn’t necessarily mean they have the intel or pro subscription.
Awesome! In this case, you and your developer could look into adding this outline code which outlines the 3 scenarios above and then filling in the comments with the code that you have to hide or show the button.
Please give this a shot and let us know how it goes!
