Pickup Availability

Source code

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 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 project in a code editor.
2. In the terminal, install 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:

"peerDependencies": {
  	"vtex.pickup-availability": "0.x"
}

Configuration

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

"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.

CSS Handles
availabilityAction
availabilityButtonContainer
availabilityHeader
availabilityMessage
container
innerContainer
shippingEstimate[--]{timeModifier}

Contributors

Thanks to these wonderful people (emoji key):

Bruno Moreira 💻

This project follows the all-contributors specification. Contributions of any kind welcome!