https://github.com/vtex-apps/pickup-availability

https://github.com/vtex-apps/pickup-availability

hacktoberfest store-framework

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/vtex-apps/pickup-availability
• Owner: vtex-apps
• Created: 2019-09-23T18:50:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2025-12-02T20:20:32.000Z (7 months ago)
• Last Synced: 2025-12-05T20:27:53.501Z (7 months ago)
• Topics: hacktoberfest, store-framework
• Language: TypeScript
• Size: 279 KB
• Stars: 2
• Watchers: 6
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: docs/README.md
  • Changelog: CHANGELOG.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# Pickup Availability

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

[ Source code](https://github.com/vtex-apps/pickup-availability)

The Pickup Availability app allows you to add a component to your store's product pages that displays in-store pickup availability for a selected SKU. This allows customers to check whether the item can be collected at a physical store.

>ℹ️ This component uses the [`ProductContext`](https://developers.vtex.com/docs/apps/vtex.product-context) app and should be implemented inside the `store.product` block. 

## Before you begin

Make sure you have configured in-store pickup for your store, including pickup points and shipping policies.

## Installation

1. Open your [Store theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) project in a code editor.

2. In the terminal, [install](https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) the `pickup-availability` app in your account by running the `vtex install vtex.pickup-availability` command.

3. Add the `pickup-availability` app to your theme's `manifest.json` file under `peerDependencies`:

  ```json

  "peerDependencies": {

    	"vtex.pickup-availability": "0.x"

  }

  ```

## Configuration

Declare the `pickup-availability` block in the desired product template, such as `store.product`. For example:

```json

"store.product": {

  "children": [

      "flex-layout.row#product-main",

      "flex-layout.row#description",

      "shelf.relatedProducts",

      "pickup-availability"

    ]

 },

```

## Customization

To apply CSS customizations to this and other blocks, follow the instructions in [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles                         |

| ------------------------------------|

| `availabilityAction`                |

| `availabilityButtonContainer`       |

| `availabilityHeader`                |

| `availabilityMessage`               |

| `container`                         |

| `innerContainer`                    |

| `shippingEstimate[--]{timeModifier}`|

## Contributors

Thanks to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Bruno Moreira
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!