Home
Text component functionality in one server-rendered widget
One widget renders the text component so its authored text can be checked on this page. A second text in that widget can read a price the widget does not store. This page passes price as 65 when it renders, and {{ price }} in the text is replaced with that number.

Widget name: widget to test text component functionality

Back

How is this widget called

The widget stores the show-more text, but not a price. A sentence in it contains {{ price }}. placeholderValues supplies price: 65 for the whole widget, and that number is filled in when the text renders. One widget-wide value is enough because this page has a single price.

libraries loads the source components that draw the widget. fetchOptions uses cache: "no-store" so each request reads the current widget instead of a cached copy.

The token is read from RULECMS_PRODUCTION_TOKEN on the server. Its value is not shown here.

TSXRead only
1<RuleCMSWidgetServer
2  token={process.env.RULECMS_PRODUCTION_TOKEN}
3  publishedKey="b35446f1-4661-4194-af57-6ec87a7b94b7---widget-ca33ecaf-3ea4-496f-b7dc-82f6d84e4425"
4  libraries={{
5    default: () => import("@rulecms/source-components-react"),
6  }}
7  fetchOptions={{ cache: "no-store" }}
8  placeholderValues={{ price: 65 }}
9  errorFallback={<p>This widget could not be loaded.</p>}
10/>
This page tests show more and show less. The Show More After limit is 40 characters, so everything after that first sentence stays hidden until you choose Show more. Show less collapses it again.
This text component tests a value passed in at runtime. The widget does not store a price. The page that renders it supplies a parameter named price, and the number in this sentence is filled in then: 65.