{"id":39486488,"url":"https://github.com/vtex-apps/product-quantity","last_synced_at":"2026-01-20T17:23:48.119Z","repository":{"id":37818579,"uuid":"190050938","full_name":"vtex-apps/product-quantity","owner":"vtex-apps","description":"The Product Quantity allows users to a add a chosen amount of the displayed product in their cart.","archived":false,"fork":false,"pushed_at":"2025-12-04T14:17:48.000Z","size":433,"stargazers_count":0,"open_issues_count":7,"forks_count":14,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-12-07T22:29:08.524Z","etag":null,"topics":["hacktoberfest","store-framework","vtex-io"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":"docs/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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-06-03T17:28:32.000Z","updated_at":"2025-12-04T14:17:51.000Z","dependencies_parsed_at":"2025-03-31T21:25:13.982Z","dependency_job_id":"c3eaada4-3811-4802-9b0b-8526bed3afb8","html_url":"https://github.com/vtex-apps/product-quantity","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/product-quantity","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-quantity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-quantity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-quantity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-quantity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/product-quantity/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-quantity/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530810,"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","store-framework","vtex-io"],"created_at":"2026-01-18T05:26:53.844Z","updated_at":"2026-01-18T05:26:56.783Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 Don't fork this project. Use, [contribute](https://github.com/vtex-apps/product-quantity), or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Product Quantity\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThe Product Quantity allows users to a add a chosen amount of the displayed product in their cart.\n\n![product-quantity](https://user-images.githubusercontent.com/52087100/70237475-0f4bd900-1746-11ea-9af2-38f794f4a3dd.png)\n\n## Configuration \n\n1. Add the Product Quantity app to your dependencies in the theme's `manifest.json` file:\n\n```json\n  \"dependencies\": {\n    \"vtex.product-quantity\": \"1.x\"\n  }\n```\n\nYou are now able to use all blocks that are exported by the Product Quantity app. Check out the full list below:\n\n| Block name | Description | \n| --------- | ------------ |\n| `product-quantity` | Displays a quantity selector on the product details page. This block must be declared in the theme's `store.product` page template. | \n| `product-summary-quantity` | Displays a quantity selector on [Product Summary](https://vtex.io/docs/components/all/vtex.product-summary/)'s blocks. This block must be declared as a children of the `product-summary.shelf` block. | \n\n2. According to your desired scenario, add the `product-quantity`/`product-summary-quantity` blocks to your theme. For example:\n\n```diff\n  \"flex-layout.col#product-price\": {\n    \"props\": {\n      \"preventVerticalStretch\": true,\n      \"rowGap\": 0\n    },\n    \"children\": [\n      \"product-name\",\n      \"product-price#product-details\",\n      \"product-separator\",\n+     \"product-quantity\",\n      \"sku-selector\",\n      \"flex-layout.row#buy-button\",\n      \"availability-subscriber\",\n      \"shipping-simulator\",\n      \"share\"\n    ]\n  },\n  \"product-quantity\": {\n    \"props\": {\n      \"warningQuantityThreshold\": 9999999,\n      \"showUnit\": true\n    }\n  },\n```\n\n*In the example above a Product Details Page is built using Flex Layout and the `product-quantity` block.*\n\n### `product-quantity` and `product-summary-quantity` props\n\n| Prop name | Type | Description | Default Value |\n| --- | --- | --- | --- |\n| `warningQuantityThreshold` | `number` | Displays the quantity of remaining items in stock if the available quantity is less than or equal to the value given to this property. | `0` (the quantity is not displayed) |\n| `showUnit` | `boolean` |Whether the unit of measurement should be displayed (`true`) or not (`false`). | `true` |\n| `size` | `enum`| Preset size values for `font-size` and `padding`. You can check these value measures by accessing the [VTEX Styleguide](https://styleguide.vtex.com/#/Components/Forms/NumericStepper). Possible values are: `small`, `regular`, and `large`. | `small` |\n| `showLabel` | `boolean` | Whether a label should be displayed (`true`) or not (`false`). | `true` |\n| `selectorType` | `enum` | Defines how the quantity selector should initially behave. Possible values are: `stepper` (displays an input field where the quantity can be directly defined, in addition to side buttons to increase or decrease the value) and `dropdown` (shows a list of predefined-quantity options. In case the last quantity option is selected by users, the component is replaced with an input). | `stepper` |\n| `quantitySelectorStep` | `enum` | Defines how the number of products that have unitMultiplier will works. Possible values are: `singleUnit` (the quantity will be not affected with the unitMultiplier) and `unitMultiplier` (the quantity will be affected with the unitMultiplier). | `unitMultiplier` |\n\n## Customization\n\nIn order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization). \n\n| CSS Handles                                |\n| ------------------------------------------ | \n| `availableQuantityContainer`               |\n| `quantitySelectorContainer`                |\n| `quantitySelectorDropdownContainer`        |\n| `quantitySelectorDropdownMobileContainer`  |\n| `quantitySelectorInputContainer`           |\n| `quantitySelectorInputMobileContainer`     |\n| `quantitySelectorStepper`                  |\n| `quantitySelectorTitle`                    |\n| `summaryContainer`                         |\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/regis-samurai\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/38638226?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eReginaldo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/product-quantity/commits?author=regis-samurai\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-quantity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fproduct-quantity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-quantity/lists"}