|
1 | 1 | --- |
2 | | -title: ProductDetails Container |
3 | | -description: Learn about the ProductDetails container in the Product Details drop-in. |
4 | | -sidebar: |
5 | | - label: ProductDetails |
| 2 | +title: ProductDetails container (deprecated) |
| 3 | +description: Learn about the deprecated monolithic ProductDetails container for legacy Adobe Commerce storefront PDP code. Prefer composed containers for new work. |
6 | 4 | --- |
7 | 5 |
|
8 | 6 | import { Aside } from '@astrojs/starlight/components'; |
9 | 7 | import TableWrapper from '@components/TableWrapper.astro'; |
10 | 8 |
|
11 | | -ADOBE CONFIDENTIAL |
| 9 | +<Aside type="caution" title="Deprecated"> |
| 10 | + The monolithic `ProductDetails` container is deprecated. It is not used in the Commerce boilerplate. Do not use it for new work. Compose the smaller containers from the [containers overview](/dropins/product-details/containers/) instead. For slot-by-slot examples, see [ProductDetails (deprecated) slots](/dropins/product-details/slots/#productdetails-deprecated-slots). For migration context, see [Product details page architectural evolution](/boilerplate/updates/#product-details-page-architectural-evolution). |
| 11 | +</Aside> |
| 12 | + |
| 13 | +The legacy `ProductDetails` container (deprecated) renders a full product details experience from one component. This topic lists configuration parameters and slot names for older integrations. |
12 | 14 |
|
13 | 15 | <div style="background-color: var(--sl-color-blue-low); border-left: 4px solid var(--sl-color-blue); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 1rem 0;"> |
14 | 16 | <strong>Version: 3.0.2</strong> |
15 | 17 | </div> |
16 | 18 |
|
17 | 19 | ## Configuration |
18 | 20 |
|
19 | | -The `ProductDetails` container provides the following configuration options: |
| 21 | +The `ProductDetails` container (deprecated) provides the following configuration options: |
20 | 22 |
|
21 | | -<TableWrapper nowrap={[0,1]}> |
| 23 | +<TableWrapper nowrap={[0, 1]}> |
22 | 24 |
|
23 | 25 | | Parameter | Type | Req? | Description | |
24 | 26 | |---|---|---|---| |
25 | | -| `sku` | `string` | Yes | | |
26 | | -| `productData` | `ProductModel` | No | | |
27 | | -| `hideSku` | `boolean` | No | | |
28 | | -| `hideQuantity` | `boolean` | No | | |
29 | | -| `hideShortDescription` | `boolean` | No | | |
30 | | -| `hideDescription` | `boolean` | No | | |
31 | | -| `hideAttributes` | `boolean` | No | | |
32 | | -| `hideSelectedOptionValue` | `boolean` | No | | |
33 | | -| `hideURLParams` | `boolean` | No | | |
34 | | -| `carousel` | `CarouselConfig` | No | | |
35 | | -| `optionsConfig` | `OptionsConfig` | No | | |
36 | | -| `useACDL` | `boolean` | No | | |
37 | | -| `onAddToCart` | `function` | No | Callback function triggered when add to cart | |
38 | | -| `zoomType` | `'zoom' \| 'overlay'` | No | | |
39 | | -| `closeButton` | `boolean` | No | | |
40 | | -| `disableDropdownPreselection` | `boolean` | No | | |
| 27 | +| `sku` | `string` | Yes | SKU of the product to load. | |
| 28 | +| `productData` | `ProductModel` | No | Optional pre-fetched product data. | |
| 29 | +| `hideSku` | `boolean` | No | Hides the SKU when set to `true`. | |
| 30 | +| `hideQuantity` | `boolean` | No | Hides the quantity selector when set to `true`. | |
| 31 | +| `hideShortDescription` | `boolean` | No | Hides the short description when set to `true`. | |
| 32 | +| `hideDescription` | `boolean` | No | Hides the long description when set to `true`. | |
| 33 | +| `hideAttributes` | `boolean` | No | Hides the attributes block when set to `true`. | |
| 34 | +| `hideSelectedOptionValue` | `boolean` | No | Hides the selected option value display when set to `true`. | |
| 35 | +| `hideURLParams` | `boolean` | No | Stops reading product context from URL parameters when set to `true`. | |
| 36 | +| `carousel` | `CarouselConfig` | No | Carousel configuration for the gallery. | |
| 37 | +| `optionsConfig` | `OptionsConfig` | No | Options UI configuration. | |
| 38 | +| `useACDL` | `boolean` | No | Enables Adobe Client Data Layer integration when set to `true`. | |
| 39 | +| `onAddToCart` | `function` | No | Callback invoked when the shopper adds to cart. | |
| 40 | +| `zoomType` | `'zoom' \| 'overlay'` | No | Image zoom behavior. | |
| 41 | +| `closeButton` | `boolean` | No | Shows or hides a close control where applicable. | |
| 42 | +| `disableDropdownPreselection` | `boolean` | No | Disables preselecting the first dropdown option when set to `true`. | |
41 | 43 |
|
42 | 44 | </TableWrapper> |
43 | 45 |
|
44 | 46 | ## Slots |
45 | 47 |
|
46 | | -This container exposes the following slots for customization: |
| 48 | +This container exposes the following slots for customization. For examples and TypeScript shapes, see [ProductDetails (deprecated) slots](/dropins/product-details/slots/#productdetails-deprecated-slots). |
47 | 49 |
|
48 | | -<TableWrapper nowrap={[0,1]}> |
| 50 | +<TableWrapper nowrap={[0, 1]}> |
49 | 51 |
|
50 | 52 | | Slot | Type | Required | Description | |
51 | 53 | |------|------|----------|-------------| |
52 | | -| `Title` | `SlotProps` | No | | |
53 | | -| `SKU` | `SlotProps` | No | | |
54 | | -| `RegularPrice` | `SlotProps` | No | | |
55 | | -| `SpecialPrice` | `SlotProps` | No | | |
56 | | -| `Options` | `SlotProps` | No | | |
57 | | -| `Quantity` | `SlotProps` | No | | |
58 | | -| `Actions` | `SlotProps` | No | | |
59 | | -| `ShortDescription` | `SlotProps` | No | | |
60 | | -| `Description` | `SlotProps` | No | | |
61 | | -| `Attributes` | `SlotProps` | No | | |
62 | | -| `Breadcrumbs` | `SlotProps` | No | | |
63 | | -| `GalleryContent` | `SlotProps` | No | | |
64 | | -| `InfoContent` | `SlotProps` | No | | |
65 | | -| `Content` | `SlotProps` | No | | |
| 54 | +| `Title` | `SlotProps` | No | Title area of the PDP. | |
| 55 | +| `SKU` | `SlotProps` | No | SKU line. | |
| 56 | +| `RegularPrice` | `SlotProps` | No | Regular price display. | |
| 57 | +| `SpecialPrice` | `SlotProps` | No | Special or sale price display. | |
| 58 | +| `Options` | `SlotProps` | No | Configurable options UI. | |
| 59 | +| `Quantity` | `SlotProps` | No | Quantity selector. | |
| 60 | +| `Actions` | `SlotProps` | No | Primary actions region (for example, add to cart). | |
| 61 | +| `ShortDescription` | `SlotProps` | No | Short description block. | |
| 62 | +| `Description` | `SlotProps` | No | Long description block. | |
| 63 | +| `Attributes` | `SlotProps` | No | Attributes list. | |
| 64 | +| `Breadcrumbs` | `SlotProps` | No | Breadcrumb trail. | |
| 65 | +| `GalleryContent` | `SlotProps` | No | Gallery region content. | |
| 66 | +| `InfoContent` | `SlotProps` | No | Secondary info column content. | |
| 67 | +| `Content` | `SlotProps` | No | General content region. | |
66 | 68 |
|
67 | 69 | </TableWrapper> |
68 | 70 |
|
69 | 71 | ## Usage |
70 | 72 |
|
71 | | -The following example demonstrates how to use the `ProductDetails` container: |
| 73 | +The following example shows how older code rendered the `ProductDetails` container (deprecated): |
72 | 74 |
|
73 | 75 | ```js |
74 | 76 | import { render as provider } from '@dropins/storefront-pdp/render.js'; |
75 | | -import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js'; |
| 77 | +import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js'; // (deprecated) |
76 | 78 |
|
77 | 79 | await provider.render(ProductDetails, { |
78 | | - sku: "PRODUCT-SKU-123", |
| 80 | + sku: 'PRODUCT-SKU-123', |
79 | 81 | productData: productData, |
80 | 82 | hideSku: true, |
81 | 83 | slots: { |
82 | 84 | // Add custom slot implementations here |
83 | | - } |
| 85 | + }, |
84 | 86 | })(block); |
85 | 87 | ``` |
86 | | - |
87 | | - |
88 | | - |
0 commit comments