Hi, I have an issue and somehow struggling with implementation of this.
I'm using Prismic with Next.js and my content will contain prices that should change when the currency is changed on the site.
For example I have a some rich text in my model with the following content (a paragraph):
"The new reader is just a one-off fee of £250 and is automatically available to your subscription once connected. A compatible Bouncepad is required to use App Tap, however you can upgrade your existing Bouncepad with the new back plate for just £30."
Now when I change the currency on site to $ it should read:
"The new reader is just a one-off fee of $300 and is automatically available to your subscription once connected. A compatible Bouncepad is required to use App Tap, however you can upgrade your existing Bouncepad with the new back plate for just $40."
So basically these prices should be as variables:
"The new reader is just a one-off fee of {{ subscriptionPrice }} and is automatically available to your subscription once connected. A compatible Bouncepad is required to use App Tap, however you can upgrade your existing Bouncepad with the new back plate for just {{ upgradePrice }}."
I'm using context to set the currency and provide these prices globally in my app.
I'm also using Rich Text with PrismicProvider component as follows:
const App = ({Component, pageProps, children}) => {
const richTextComponents = {
heading1: ({children}) => <h1 className="text-5xl font-bold mb-6">{children}</h1> ,
heading2: ({children}) => <h2 className="text-4xl font-bold mb-6">{children}</h2>,
heading3: ({children}) => <h3 className="text-3xl font-bold mb-6">{children}</h3>,
heading4: ({children}) => <h4 className="text-2xl font-bold mb-6">{children}</h4>,
heading5: ({children}) => <h5 className="text-xl font-bold mb-6">{children}</h5>,
heading6: ({children}) => <h6 className="text-lg font-bold mb-6">{children}</h6>,
paragraph: ({children}) => <p className="text-lg mb-6">{children}</p>,
};
return (
<CurrencyProvider>
<PrismicProvider internalLinkComponent={(props) => <Link {...props} />}
richTextComponents={richTextComponents}>
{children}
<PrismicPreview repositoryName={repositoryName}>
<Layout>
<Component {...pageProps} />
</Layout>
</PrismicPreview>
</PrismicProvider>
</CurrencyProvider>
);
};
export default appWithTranslation(App);
To add, the content would be contained in a slice, and multiple slices are present on the page.
How can I catch these variables from rich text and replace them with any value I want? Is this even possible?
s.