{"id":39486126,"url":"https://github.com/vtex-apps/product-availability","last_synced_at":"2026-01-20T17:04:58.009Z","repository":{"id":42206888,"uuid":"188603926","full_name":"vtex-apps/product-availability","owner":"vtex-apps","description":"The Product Availability component shows different messages set by the user, depending on the available quantity of the product.","archived":false,"fork":false,"pushed_at":"2025-03-10T17:41:05.000Z","size":873,"stargazers_count":1,"open_issues_count":24,"forks_count":7,"subscribers_count":12,"default_branch":"master","last_synced_at":"2026-01-18T15:00:35.382Z","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":"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}},"created_at":"2019-05-25T19:18:15.000Z","updated_at":"2025-10-11T03:01:23.000Z","dependencies_parsed_at":"2025-03-07T17:39:46.564Z","dependency_job_id":null,"html_url":"https://github.com/vtex-apps/product-availability","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/product-availability","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-availability","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-availability/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-availability/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-availability/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/product-availability/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fproduct-availability/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28607624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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:25:14.115Z","updated_at":"2026-01-20T17:04:58.003Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Product Availability\n\n## Description\n\nThe Product Availability component shows different messages set by the user, depending on the available quantity of the product.\n\nIt is only available to be used on the `store.product` block, in your product page.\n\n:loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request\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- [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\nTo use this app or override the default CSS you need import it in your dependencies on `manifest.json` file.\n\n```json\n  \"dependencies\": {\n    \"vtex.product-availability\": \"0.x\"\n  }\n```\n\nThen, add `product-availability` block to your `blocks.json`\n\nNow, you can change the behavior of the `product-availability` block that is in the minicart. See an example of how to configure **without** showing availability:\n\n```json\n  \"product-availability\": {\n    \"props\": {\n      \"threshold\":\"10\",\n      \"lowStockMessage\":\"Only {quantity} left!\",\n      \"highStockMessage\":\"Item in stock!\"\n    }\n  }\n```\n\nSee an example of how to configure **showing availability**:\n\n```json\n  \"product-availability\": {\n    \"props\": {\n      \"showAvailability\": \"stock\",\n      \"showAvailabilityMessage\": \"There are {quantity} available!\"\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-availability and describes if they are required or optional.\n\n```json\n{\n  \"product-availability\": {\n    \"component\": \"ProductAvailability\"\n  }\n}\n```\n\nFor now this block does not have any required or optional blocks.\n\n#### Configuration\n\nThrough the Storefront, you can change the product-availability's behavior and interface. However, you also can make in your theme app, as Store theme does.\n\n| Prop name           | Type      | Description                                                                                 |\n| ------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| `threshold`     | `Number` | DefineMinimum quantity that makes low stock message appear (if message is set). Default: 0    |\n| `lowStockMessage`        | `String` | String to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: \\\"Only {quantity} left!\\\". Leave empty to not show. Default: \"\"              |\n| `highStockMessage`  | `String` | String to be shown when stock is higher or equal than threshold. If left empty, won\\'t show. Default: \"\"                                                              |\n| `showAvailability`  | `'disabled' \\ 'stock'` | Enables the possibility to show the available items instead of lowStockMessage or highStockMessage. Default `'disabled'`. To enable it, string should be `'stock'`                                                     |\n| `showAvailabilityMessage`  | `String` | String to be shown when show available option is true. Should have {quantity} inside the given string, to be replaced for the available property. Example: \\\"There are {quantity} available!\\\". Leave empty to not show. Default: \"\"                                                              |\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-availability.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 are defined in the product-availability.\n\n| Token name                 | Component                                                                                                                                                                                                                                                                                                                                                                     | Description                                                   |\n| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| `container`                | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ProductAvailability.tsx) | The main container of `ProductAvailability`                      |\n| `lowStockText`          | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/LowStock.tsx)    |  Normal text for the low stock message.\n| `lowStockHighlight`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/LowStock.tsx)   |  Number of the low stock message that is supposed to be highlighted.  |\n| `highStockText`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/HighStock.tsx)   | Text of the hight stock message.    |\n| `showAvailableText`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ShowAvailable.tsx)   | Text of the show available message.    |\n| `showAvailableTextHighlight`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ShowAvailable.tsx)   | Number of the available items that is supposed to be highlighted.\n\n## Troubleshooting\n\nYou can check if others are passing through similar issues [here](https://github.com/vtex-apps/product-availability/issues). Also feel free to [open issues](https://github.com/vtex-apps/product-availability/issues/new) or contribute with pull requests.\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-availability.svg?branch=master)](https://travis-ci.org/vtex-apps/product-availability)\n[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/product-availability/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/product-availability?branch=master)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-availability","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fproduct-availability","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fproduct-availability/lists"}