Model B - Product displayed by model
Learn how to set up a sample product data model to display all existing models of an electronic product.
After completing this page, you should be able to:
- Configure the product data model for a product listing with all its models.
Our second product data model needs to meet the following requirements:
- Product listing page: display the Product by model.
- Search result: display the Product by model.
- Product detail page: display all Product combinations by model.
Set up Product data model in Composable Commerce
To fulfill the requirements of setting up our product data model in Composable Commerce, we need to configure the following settings and understand the resulting impact:
- Number of Products: 4
- Number of URLs: 1
- Number of Product Variants per Product: 12 to 15
- Price display: use a price range on the Product card. Because there are more Products, the price range will be slightly narrower.
Product Type JSON
The Product Type JSON object is shown here. You can use this JSON object in your own Project to create the same Product Type.
{"id": "0d3510e9-89ce-46da-950b-2a1abf154492","version": 7,"versionModifiedAt": "2024-11-20T07:24:41.971Z","createdAt": "2024-10-30T03:18:30.633Z","lastModifiedAt": "2024-11-20T07:24:41.971Z","lastModifiedBy": {"isPlatformClient": true},"createdBy": {"clientId": "ViXgKzquNw-cXDYLmXagUH3Q","isPlatformClient": false},"name": "iphone-b","description": "iphone-b","classifier": "Complex","attributes": [{"name": "color","label": {"en-AU": "color","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": true,"type": {"name": "enum","values": [{"key": "ultramarine","label": "Ultramarine"},{"key": "teal","label": "Teal"},{"key": "pink","label": "Pink"},{"key": "white","label": "White"},{"key": "black","label": "Black"},{"key": "black-titanium","label": "Black Titanium"},{"key": "white-titanium","label": "White Titanium"},{"key": "natural-titanium","label": "Natural Titanium"},{"key": "desert-titanium","label": "Desert Titanium"}]},"attributeConstraint": "CombinationUnique","isSearchable": true,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "storage","label": {"en-AU": "storage","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": true,"type": {"name": "number"},"attributeConstraint": "CombinationUnique","isSearchable": true,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "display","label": {"en-AU": "Display Size","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": true,"type": {"name": "enum","values": [{"key": "6.1","label": "6.1"},{"key": "6.3","label": "6.3"},{"key": "6.7","label": "6.7"},{"key": "6.9","label": "6.9"}]},"attributeConstraint": "SameForAll","isSearchable": true,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "display-type","label": {"en-AU": "Display Type","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "super-retina-xdr","label": "Super Retina XDR"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "promotion","label": {"en-AU": "ProMotion technology","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "boolean"},"attributeConstraint": "SameForAll","isSearchable": true,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "always-on-display","label": {"en-AU": "Always-On Display","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "boolean"},"attributeConstraint": "SameForAll","isSearchable": true,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "processor","label": {"en-AU": "Processor","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "a18","label": "A18"},{"key": "a18-pro","label": "A18 Pro"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "gpu-cores","label": {"en-AU": "GPU Cores","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "number"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "camera-control","label": {"en-AU": "Camera Control","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "boolean"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "camera-system","label": {"en-AU": "Camera System","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "advanced-dual","label": "Advanced dual"},{"key": "pro","label": "Pro"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "main-camera","label": {"en-AU": "Main Camera","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "48mp-fusion","label": "48MP Fusion"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "telephoto","label": {"en-AU": "Telephoto","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "number"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "megapixels","label": {"en-AU": "Megapixels","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "number"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "emergency-sos","label": {"en-AU": "Emergency SOS","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "boolean"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "emergency-satellite-sos","label": {"en-AU": "Emergency Satellite SOS","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "boolean"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "video-playback","label": {"en-AU": "Video Playback","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "text"},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "usb-version","label": {"en-AU": "USB Version","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "2","label": "2"},{"key": "3","label": "3"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "cellular","label": {"en-AU": "Cellular","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "5g","label": "5G"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"},{"name": "model","label": {"en-AU": "Model","en-NZ": "","zh": ""},"inputTip": {"en-AU": "","en-NZ": "","zh": ""},"isRequired": false,"type": {"name": "enum","values": [{"key": "base","label": "Base"},{"key": "plus","label": "Plus"},{"key": "pro","label": "Pro"},{"key": "max","label": "Max"}]},"attributeConstraint": "SameForAll","isSearchable": false,"inputHint": "SingleLine","displayGroup": "Other"}],"key": "iphone-b"}
iPhone 16 Product JSON example
Here's the JSON of the Product that we need to create in our module: iPhone 16 Product JSON.
- Total: 73.6 KB
- Per Projection (Staged and Current): 36.5 KB each
- Variants: 33.8 KB
- Attributes: 12.9 KB
- Assets: 14.3 KB
- Prices: 5.37 KB
Differences between Model A and Model B Product Types
The primary difference between the iphone-a and iphone-b Composable Commerce Product Types lies in the attributeConstraint value of various attributes. While other fields are similar, the way Product Variants are created and managed differ significantly due to these constraints.
Here's a breakdown of the differences between the attributeConstraint of various features in iphone-a and iphone-b:
| Feature | iphone-a | iphone-b |
|---|---|---|
| Color & Storage | attributeConstraint: "CombinationUnique" | attributeConstraint: "CombinationUnique" |
| Model | attributeConstraint: "CombinationUnique" | attributeConstraint: "SameForAll" |
| Display | attributeConstraint: "CombinationUnique" | attributeConstraint: "SameForAll" |
In essence, iphone-a allows for a wider range of variant combinations per Product by defining variations at a more granular level. However, iphone-b uses shared attributes to simplify variant management, which is suitable for products where many attributes are consistent across the product line.
Using "SameForAll" on more iphone-b attributes is possible because we expect those values to be the same for each model.