Two embedded collection trees, each with its own price

This page renders a second widget, left separate from the single-price collection page. Each tree is embedded collections nested inside the widget. Neither tree stores a price. Both texts use {{ price }}. This page passes $125 to the first tree and $250 to the second, using each tree's embedding ids.

Widget name: contains collection k3L7BE

Both trees use {{ price }} and neither stores a price. A widget-wide price would fill both trees with the same value, so placeholderValues is null.

componentProps targets each tree by its embedding path: the outer embedding id, then the shared child embedding id fed4c349-6dca-478e-bba2-99cdebb8ceba, then the shared text id 5d7f0604-ddfa-4db4-9d2c-da677faba851. The first path gets $125 and the second gets $250. The longest matching path wins, which is why the two outer ids have to differ.

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-1145d101-ad67-4456-80b0-336a3fed80b5"
4  libraries={{
5    default: () => import("@rulecms/source-components-react"),
6  }}
7  fetchOptions={{ cache: "no-store" }}
8  placeholderValues={null}
9  componentProps={{
10    "ddcabae5-0245-47b3-95db-f8fbc872ea26/fed4c349-6dca-478e-bba2-99cdebb8ceba/5d7f0604-ddfa-4db4-9d2c-da677faba851": {
11      placeholderValues: { price: "$125" },
12    },
13    "e0a36146-d0d5-4358-a70e-5480ed898e0b/fed4c349-6dca-478e-bba2-99cdebb8ceba/5d7f0604-ddfa-4db4-9d2c-da677faba851": {
14      placeholderValues: { price: "$250" },
15    },
16  }}
17  errorFallback={<p>This widget could not be loaded.</p>}
18/>