Updating as per PREX-2204

src/content/docs/dropins/recommendations/containers/product-list.mdx

@@ -1,12 +1,13 @@
 ---
 title: ProductList container
-description: Show Adobe Commerce product recommendations for the active SKU using routing callbacks plus recId and placement configuration.
+description: Show Adobe Commerce product recommendations using recId, optional currentProduct context, routing callbacks, and placement configuration.
 ---
 
 import Diagram from '@components/Diagram.astro';
 import OptionsTable from '@components/OptionsTable.astro';
+import Aside from '@components/Aside.astro';
 
-The `ProductList` container manages and displays a list of recommended products based on the current product. Its behavior is driven by configuration options such as `currentSku`, `recId`, and `routing` through `routeProduct` callbacks.
+The `ProductList` container manages and displays a list of recommended products based on the current product. Its behavior is driven by configuration options such as `currentProduct`, `recId`, and routing through `routeProduct` callbacks.
 
 <Diagram caption="ProductList container">
   ![ProductList container](@images/dropins/recommendations/product-list.png)
@@ -21,7 +22,8 @@ The `ProductList` container provides the following configuration options:
   options={[
     ['Option', 'Type', 'Req?', 'Description'],
     ['recId', 'string', 'Yes', 'Unique identifier for the recommendation unit.'],
-    ['currentSku', 'string', 'Yes', 'Current SKU for recommendation context.'],
+    ['currentProduct', 'object', 'No', 'Current product context (`{ sku: string; price?: number }`). See [Product context](#product-context).'],
+    ['currentSku', 'string', 'No', 'Deprecated as of v4.0.3. Use `currentProduct` instead.'],
     ['cartSkus', 'string[]', 'No', 'Cart SKUs for recommendation context.'],
     ['userPurchaseHistory', 'any[]', 'No', 'User Purchase History for recommendation context.'],
     ['userViewHistory', 'any[]', 'No', 'User View History for recommendation context.'],
@@ -33,12 +35,44 @@ The `ProductList` container provides the following configuration options:
   ]}
 />
 
+<Aside type="caution" title="Deprecated prop">
+
+The `currentSku` prop is deprecated as of v4.0.3 and will be removed in a future release. Use `currentProduct` instead.
+
+</Aside>
+
+## Product context
+
+Pass product context with the optional `currentProduct` prop:
+
+```ts
+currentProduct?: { sku: string; price?: number };
+```
+
+How context is supplied depends on where the unit is rendered:
+
+- **PDP pages**: The Commerce boilerplate block reads `currentProduct` from the Adobe Client Data Layer (ACDL) product context. You do not need to pass `currentProduct` in block configuration.
+- **Non-PDP pages**: Set `currentsku` and/or `currentprice` in the [product-recommendations block configuration](/merchants/content-customizations/product-recommendations/#configuration) table to provide product context explicitly.
+- **Context-free units**: If neither `currentsku` nor ACDL product context is available, `currentProduct` is `undefined`. The dropin still renders as long as `recId` is provided.
+
+## Query routing
+
+The container selects a GraphQL query based on the `currentProduct` shape:
+
+- When `currentProduct.price` is present (**Adobe Commerce Optimizer and Adobe Commerce as a Cloud Service only**), the container uses `GetRecommendationsByUnitIdsWithCurrentProduct`, which supports dynamic price filter operators.
+- When only `currentProduct.sku` is present, or `currentProduct` is absent, the container uses `GetRecommendationsByUnitIds`, which is compatible with all backend types, including PaaS.
+
 The `ProductListProps` interface has the following shape:
 
 ```ts
 export interface ProductListProps extends HTMLAttributes<HTMLDivElement> {
   recId: string;
-  currentSku: string;
+  currentProduct?: {
+    sku: string;
+    price?: number;
+  };
+  /** @deprecated As of v4.0.3. Use `currentProduct` instead. */
+  currentSku?: string;
   initialData?: {
     recommendations?: {
       results: RecommendationUnitModel[];
@@ -148,15 +182,15 @@ Each slot receives context data relevant to its purpose, allowing for highly cus
 
 ## Example configuration
 
-The following example demonstrates how to render the `ProductList` container with the `recId`, `currentSku`, and `routeProduct` callbacks with different slots:
+The following example demonstrates how to render the `ProductList` container with `recId`, `currentProduct`, and `routeProduct` callbacks with different slots:
 
 ```js
 
 // Render Container
 provider.render(ProductList, {
   recId: 'recommendation-unit-1',
   routeProduct: (item) => `/products/${item.urlKey}`,
-  currentSku: 'ADB150',
+  currentProduct: { sku: 'ADB150', price: 49.99 },
   hideHeading: false,
   slots: {
       // Example of how to prepend or append to the default Heading
@@ -227,7 +261,7 @@ provider.render(ProductList, {
 
 ## Key Features
 
-- **Automatic Data Fetching**: Fetches recommendations based on `currentSku` and other context
+- **Automatic Data Fetching**: Fetches recommendations based on `currentProduct` (or legacy `currentSku`) and other context
 - **Intersection Observer**: Automatically tracks when recommendations are viewed
 - **Event Publishing**: Publishes render and view events for analytics
 - **Loading States**: Handles loading states during data fetching

src/content/docs/merchants/content-customizations/product-recommendations.mdx

@@ -23,24 +23,31 @@ Add this table to your document to configure the block:
 <td colspan="2" style="text-align: center; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5); background-color: var(--sl-color-gray-6); font-weight: 600;">product-recommendations</td>
 </tr>
 <tr>
-<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentSku</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">recId</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">2ed7ea09-d9bd-4691-91c3-2c0a6d4fd869 <span style="font-size: 0.85em;">(example)</span></em></td>
+</tr>
+<tr>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentsku</td>
 <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">crz-eco-tr-std-2017 <span style="font-size: 0.85em;">(example)</span></em></td>
 </tr>
 <tr>
-<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">recId</td>
-<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">2ed7ea09-d9bd-4691-91c3-2c0a6d4fd869 <span style="font-size: 0.85em;">(example)</span></em></td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentprice</td>
+<td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);"><em style="color: var(--sl-color-gray-3); font-style: italic;">49.99 <span style="font-size: 0.85em;">(example)</span></em></td>
 </tr>
 </tbody>
 </table>
 
-- **recId**: Recommendation ID for targeting specific recommendation types. Required for all pages. No default value.
+- **recId**: Recommendation unit ID from the Admin. Required for all pages.
+
+- **currentsku**: Current product SKU. Required on non-PDP pages when the recommendation unit needs product context. On PDP pages, the boilerplate reads this automatically from the product context (Adobe Client Data Layer).
 
-- **currentSku**: Current product SKU for recommendation context. Required for non-PDP pages only. Not needed for product detail pages. No default value.
+- **currentprice**: Current product price (numeric). Required on non-PDP pages when using dynamic price filter operators (Adobe Commerce Optimizer and Adobe Commerce as a Cloud Service only). On PDP pages, the boilerplate reads this automatically from the product context.
 
 <Aside type="caution" title="Important">
 
-  - **PDP pages** require only the `recId` to be set.
-  - **Other pages** require both the `recId` and `currentSku` to be set.
+  - **PDP pages** require only `recId`. Product context is read automatically from the Adobe Client Data Layer.
+  - **Other pages** require `recId` and `currentsku` when the recommendation unit needs product context. Add `currentprice` on non-PDP pages when the unit uses dynamic price filter operators (Adobe Commerce Optimizer and Adobe Commerce as a Cloud Service only).
+  - **Context-free units** need only `recId`. The block still renders when no product context is available.
 
 </Aside>
 
@@ -123,23 +130,45 @@ You can configure each page to display a specific recommendation unit by setting
    </table>
 
    :::note
-   PDP pages require only the `recId` to be set as shown above.
+   PDP pages require only `recId`, as shown above.
 
-   Other pages require both the `recId` and `currentSku` to be set. For example:
+   Other pages that need product context require `recId` and `currentsku`. For example:
 
    <table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
    <tbody>
    <tr>
    <td colspan="2" style="text-align: center; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5); background-color: var(--sl-color-gray-6); font-weight: 600;">product-recommendations</td>
    </tr>
    <tr>
-   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentSku</td>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">recId</td>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">2ed7ea09-d9bd-4691-91c3-2c0a6d4fd869</td>
+   </tr>
+   <tr>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentsku</td>
    <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">crz-eco-tr-std-2017</td>
    </tr>
+   </tbody>
+   </table>
+
+   When using dynamic price filter operators on Adobe Commerce Optimizer or Adobe Commerce as a Cloud Service, set `currentprice` on non-PDP pages:
+
+   <table style="width: 100%; min-width: 470px; max-width: 100%; table-layout: fixed; border-collapse: collapse;">
+   <tbody>
+   <tr>
+   <td colspan="2" style="text-align: center; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5); background-color: var(--sl-color-gray-6); font-weight: 600;">product-recommendations</td>
+   </tr>
    <tr>
    <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">recId</td>
    <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">2ed7ea09-d9bd-4691-91c3-2c0a6d4fd869</td>
    </tr>
+   <tr>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentsku</td>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">crz-eco-tr-std-2017</td>
+   </tr>
+   <tr>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">currentprice</td>
+   <td style="width: 50%; padding: 0.75rem; border: 1px solid var(--sl-color-gray-5);">49.99</td>
+   </tr>
    </tbody>
    </table>