{"id":39488132,"url":"https://github.com/vtex-apps/product-details","last_synced_at":"2026-01-18T05:29:40.383Z","repository":{"id":32248415,"uuid":"132036739","full_name":"vtex-apps/product-details","owner":"vtex-apps","description":"VTEX Product Details app","archived":false,"fork":false,"pushed_at":"2023-01-02T18:38:40.000Z","size":542,"stargazers_count":8,"open_issues_count":1,"forks_count":9,"subscribers_count":50,"default_branch":"master","last_synced_at":"2024-04-14T22:48:48.984Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2018-05-03T18:48:28.000Z","updated_at":"2023-01-13T16:33:29.000Z","dependencies_parsed_at":"2023-01-14T20:49:53.046Z","dependency_job_id":null,"html_url":"https://github.com/vtex-apps/product-details","commit_stats":null,"previous_names":[],"tags_count":96,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/product-details","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-details","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-details/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-details/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-details/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/product-details/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-details/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"created_at":"2026-01-18T05:29:39.885Z","updated_at":"2026-01-18T05:29:40.365Z","avatar_url":"https://github.com/vtex-apps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VTEX Product Details [DEPRECATED] \n\n## Description\n\nThe VTEX Category Menu app shows the details of a product like image, name and price. THis app is used by store theme.\n\n:loudspeaker: **Disclaimer:** Don't fork this project. Use, contribute, or open issue with your feature request.\n\n## Release schedule\n\n| Release |       Status        | Initial Release | Maintenance LTS Start | End-of-life | Dreamstore Compatibility |\n| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :----------------------: |\n|  [1.x]  | **Current Release** |   2018-11-28    |                       |             |           2.x            |\n|  [0.x]  | **Maintenance LTS** |   2018-05-29    |      2018-11-28       | March 2019  |           1.x            |\n\nSee our [LTS policy](https://github.com/vtex-apps/awesome-io#lts-policy) for more information.\n\n## Table of Contents\n\n- [Usage](#usage)\n  - [Blocks API](#blocks-api)\n    - [Configuration](#configuration)\n  - [Styles API](#styles-api)\n    - [CSS namespaces](#css-namespaces)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n- [Tests](#tests)\n\n## Usage\n\nThis app uses our store builder with the blocks architecture. To know more about Store Builder [click here.](https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder#structuring-and-configuring-our-store-with-object-object)\n\nWe add the product-details as a block in our [Store Header](https://github.com/vtex-apps/store-header/blob/master/store/interfaces.json).\n\nTo configure or customize this app, you need to import it in your dependencies in `manifest.json`.\n\n```json\n  dependencies: {\n    \"vtex.product-details\": \"1.x\"\n  }\n```\n\nThen, add `product-details` block into your app theme, like we do in our [Store theme app](https://github.com/vtex-apps/store-theme/blob/master/store/blocks.json).\n\nNow, you can change the behavior of the `product-details` block that is in the store header. See an example of how to configure:\n\n```json\n  \"product-details\": {\n      \"blocks\": [\n        \"breadcrumb\",\n        \"product-name\",\n        \"product-images\",\n        \"product-price\",\n        \"product-description\",\n        \"product-specifications\",\n        \"buy-button\",\n        \"sku-selector\",\n        \"shipping-simulator\",\n        \"availability-subscriber\",\n        \"share\"\n      ],\n      \"props\": {\n        \"displayVertically\": true,\n        \"share\": {\n          \"social\": {\n            \"Facebook\": true,\n            \"WhatsApp\": true,\n            \"Twitter\": false\n          }\n        },\n        \"price\": {\n          \"labelSellingPrice\": null,\n          \"showListPrice\": true,\n          \"showLabels\": true,\n          \"showInstallments\": true,\n          \"showSavings\": true\n        },\n        \"name\": {\n          \"showBrandName\": false,\n          \"showSku\": false,\n          \"showProductReference\": false\n        }\n      }\n    }\n```\n\n### Blocks API\n\nWhen implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within `product-details` and describes if they are required or optional.\n\n```json\n{\n  \"product-details\": {\n    \"required\": [\n      \"product-images\",\n      \"product-name\",\n      \"product-price\",\n      \"sku-selector\",\n      \"buy-button\",\n      \"product-description\",\n      \"product-specifications\"\n    ],\n    \"allowed\": [\n      \"breadcrumb\",\n      \"shipping-simulator\",\n      \"availability-subscriber\",\n      \"share\",\n      \"addon-details-btn\"\n    ],\n    \"component\": \"ProductDetails\"\n  },\n  \"addon-details-btn\": {\n    \"component\": \"*\"\n  }\n}\n```\n\nThe `ProductDetails` has the required blocks: `product-images`, `product-name`, `product-price`, `sku-selector`, `buy-button`, `product-description` and `product-specifications`. So, any `ProductDetails` block implementation created must add these blocks.\n\n#### Configuration\n\nThrough the Storefront you can change the behavior and interface of `ProductDetails`. But, you can also make adjusts in your theme app, like Store does.\n\n| Prop name               | Type      | Description                                                       | Default Value |\n| ----------------------- | --------- | ----------------------------------------------------------------- | ------------- |\n| `price`                 | `Object`  | Configures the product price area (More info on the table bellow) | false         |\n| `name`                  | `Object`  | Configures the product name area (More info on the table bellow)  | false         |\n| `displayVertically`     | `Boolean` | Whether to display the preview images on the vertical or not      | false         |\n| `showSpecificationsTab` | `Boolean` | Whether to display the product specification on tab mode or not   | false         |\n\nPrice:\n\n| Prop name           | Type      | Description                                    |\n| ------------------- | --------- | ---------------------------------------------- |\n| `showListPrice`     | `Boolean` | Shows the list prices                          | true |\n| `showLabels`        | `Boolean` | Shows the labels in the price and installments | true |\n| `showInstallments`  | `Boolean` | Shows the installments information             | true |\n| `showSavings`       | `Boolean` | Shows the savings information                  | true |\n| `labelSellingPrice` | `String`  | Text of the label before the price             | `null` |\n\nName:\n\n| Prop name              | Type      | Description                          |\n| ---------------------- | --------- | ------------------------------------ |\n| `showProductReference` | `Boolean` | Shows the product reference          | false |\n| `showBrandName`        | `Boolean` | Shows the brand name of the product  | false |\n| `showSku`              | `Boolean` | Shows the sku value for this product | false |\n\nHighlight:\n\n| Prop name          | Type      | Description                                                                                                            |\n| ------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------- |\n| `defaultHighlight` | `boolean` | Indicates whether the group chosen as the highlight will contain all the properties in product or a group typed entry. |\n| true               |\n| `showHighlights`   | `Boolean` | Shows the highlights of the product                                                                                    | true |\n| `highlightGroup`   |\n\n\nSpecification:\n\n | Prop name             | Type      | Description                                                                                        |\n| --------------------- | --------- | -------------------------------------------------------------------------------------------------- |\n| `showSpecifications`  | `boolean` | Show the specifications of the product                                                             |\n| `specificationGroups` | `object`  | Define if will be displayed all the specifications of the product or a set of this specifications. |\n| `viewMode`            | `string`  | Define what is the current view mode for the specifications.                                       |\n| `typeSpecifications`  | `string`  | indicates which specifications will be displayed                                                   |\n\n\nAlso, you can configure the `share` that is defined on `ProductDetails`. See [here](https://github.com/vtex-apps/store-components/blob/master/react/components/Share/README.md) the `Share` API.\n\n### Styles API\n\nThis app provides some CSS classes as an API for style customization.\n\nTo use this CSS API, you must add the `styles` builder and create an app styling CSS file.\n\n1. Add the `styles` builder to your `manifest.json`:\n\n```json\n  \"builders\": {\n    \"styles\": \"1.x\"\n  }\n```\n\n2. Create a file called `vtex.product-details.css` inside the `styles/css` folder. Add your custom styles:\n\n```css\n.container {\n  margin-top: 10px;\n}\n```\n\n#### CSS namespaces\n\nBelow, we describe the namespaces that is define in the `ProductDetails`.\n\n| Class name              | Description                              | Component Source                                            |\n| ----------------------- | ---------------------------------------- | ----------------------------------------------------------- |\n| `container`             | The main container of Product Details    | [productDetails](/react/productDetails.js)                  |\n| `nameContainer`         | The container of the name area           | [productDetails](/react/productDetails.js)                  |\n| `detailsContainer`      | The container of the details area        | [productDetails](/react/productDetails.js)                  |\n| `priceContainer`        | The container of the price area          | [productDetails](/react/productDetails.js)                  |\n| `informationsContainer` | The container of the information area    | [productDetails](/react/productDetails.js)                  |\n| `fixedButton`           | The product buy button                   | [FixedButton/index](/react/components/FixedButton/index.js) |\n| `highlightsContainer`   | The container of product highlights area | [productDetails](/react/productDetails.js)                  |\n\n## Troubleshooting\n\nYou can check if others are passing through similar issues [here](https://github.com/vtex-apps/product-details/issues). Also feel free to [open issues](https://github.com/vtex-apps/product-details/issues/new) or contribute with pull requests.\n\n## Contributing\n\nCheck it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project. \n\n## Tests\n\nTo execute our tests go to `react/` folder and run `yarn test`\n\n### Travis CI\n\n[![Build Status](https://travis-ci.org/vtex-apps/product-details.svg?branch=master)](https://travis-ci.org/vtex-apps/product-details)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-details","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fproduct-details","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-details/lists"}