Home
Contains a collection with a child collection with a dynamic price field
This widget contains a collection, and that collection contains a child collection. The child collection does not store a price. Its text has {{ price }}. This page passes price as $125 when it renders, and that value is filled in then.

Widget name: contains collection with a child collection with a dynamic price field

Back

How is this widget called

The child collection text contains {{ price }} and does not store a price. placeholderValues supplies price: "$125" for the whole widget. 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-3021dd09-5304-4a73-8a6e-1363e41a1ccc"
4  libraries={{
5    default: () => import("@rulecms/source-components-react"),
6  }}
7  fetchOptions={{ cache: "no-store" }}
8  placeholderValues={{ price: "$125" }}
9  errorFallback={<p>This widget could not be loaded.</p>}
10/>
I am a widget that has a child collection below. The child collection itself has another child collection that
has a dynamic price field.
Below I have a child collection which has a dynamic field for price.
This collection with text component tests a value passed in at runtime. The collection 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: $125.