Hi there,
I currently have a web app using the same reusable page type for my home/about/contact/services pages. I would like to have a banner that appears only on the homepage. How would I go about this with Prismic giving my page setup?
Thanks in advance!
Conditionally render if page.uid===‘home’
{
page.uid === ‘home’ && (
<YourBannerComponent />
)
}
Does that help?
1 Like
Hi Odelia,
In this case, I would recomend using a separate page type for the homepage. You certainly could use the same page type for the homepage and conditionally display the banner. And @nf_mastroianni's recommendation would work perfectly for that
However, that might create a negative user experience for your editors if they don't understand when, where, or why the banner will appear — of even if they do understand, but must leave an unnecessary "banner" field blank on most of the documents.
Having said all of this, I can think of one alternative implementation. You could create a singleton custom type called "Homepage Banner," and store the banner content there. It could theoretically also include an "on/off" toggle. Then, in your homepage component, you would query the homepage document and also the homepage banner document.
Let me know if that helps
Sam