Documentation
Feedback
Guides

Location Availability

This app provides availability and shipping information based on the user's location, if available at the session, to have a more accurate result, even without authentication. We recommend using this app along with Shopper Location.

Configuration

  1. Using VTEX IO CLI, install the Location Availability app by running vtex install vtex.location-availability@0.x.
  2. Open your store's Store Theme app directory in your code editor.
  3. Add the Location Availability app as a peerDependency in the manifest.json file:

_10
"peerDependencies": {
_10
+ "vtex.location-availability": "0.x"
_10
}

Now, you are able to use the blocks exported by the location-availability app:

Availability Summary: product-location-availability

This block summarizes a product's availability and is best used on product shelves. By default it will show the two fastest shipping options (or one shipping option and the fastest in-store pickup option). Alternative configurations are available using the props below:

Prop nameTypeDescriptionDefault value
maxItemsnumberMaximum number of availability options shown per product2
orderByenumSort the availability options by faster or cheaperfaster
pickupFirstbooleanIf available, show in-store pickup before other optionstrue
showDistancestringAdd the necessary measurement options kilometers or milesmiles
showAddressInfobooleanAdds address ZipCode and cityfalse

Example


_20
...
_20
"product-summary.shelf#home": {
_20
"children": [
_20
"product-summary-image#home",
_20
"product-summary-name",
_20
+ "product-location-availability",
_20
"product-summary-sku-selector",
_20
"flex-layout.row#product-price"
_20
]
_20
},
_20
+ "product-location-availability": {
_20
+ "props": {
_20
+ "maxItems": 3
_20
+ "orderBy": "cheaper"
_20
+ "pickupFirst": false,
_20
+ "showDistance": "miles",
_20
+ "showAddressInfo": true
_20
+ }
_20
+ }
_20
...

Availability Details

These blocks provide more detailed availability information and are designed for use on the PDP (product details page). Each block's information will automatically update if either the user's location or the selected SKU are changed.

  • location-context: This block provides the location and availability data which the other blocks display. If you wish to use any of the following blocks, this block must be set as their parent (see example below).

  • product-location-availability-header: This block displays a header for the availability section, i.e. "Availability for 90210:". It can be configured to style the postal code as a link, if you wish to use this block as a trigger for the ChangeLocation modal from vtex.shopper-location.

Prop nameTypeDescriptionDefault value
styleAsLinkbooleanStyle the user's postal code as a linkfalse
  • product-location-shipping-options: This block displays the available shipping options for the selected SKU based on the user's current location.

  • product-location-pickup-options: This block displays the stores which have availability for the selected SKU and that are nearby the user's current location. If more than 3 stores meet this criteria, a "See All Stores" button is also rendered which opens the full list of stores in a modal window when clicked.

Example


_44
...
_44
"flex-layout.col#right-col": {
_44
"props": {
_44
"preventVerticalStretch": true,
_44
"rowGap": 0
_44
},
_44
"children": [
_44
"flex-layout.row#product-name",
_44
"product-rating-summary",
_44
"flex-layout.row#list-price-savings",
_44
"flex-layout.row#selling-price",
_44
"product-installments",
_44
"product-separator",
_44
"product-identifier.product",
_44
"sku-selector",
_44
"product-quantity",
_44
"product-assembly-options",
_44
"product-gifts",
_44
"flex-layout.row#buy-button",
_44
+ "location-context",
_44
"share#default"
_44
]
_44
},
_44
+ "location-context": {
_44
+ "children": [
_44
+ "modal-trigger#location-availability",
_44
+ "flex-layout.row#location-availability"
_44
+ ]
_44
+ },
_44
+ "flex-layout.row#location-availability": {
_44
+ "children": [
_44
+ "product-location-pickup-options",
_44
+ "product-location-shipping-options"
_44
+ ]
_44
+ },
_44
+ "modal-trigger#location-availability": {
_44
+ "children": ["product-location-availability-header", "modal-layout#address"]
_44
+ },
_44
+ "product-location-availability-header": {
_44
+ "props": {
_44
+ "styleAsLink": true
_44
+ }
_44
+ },
_44
...

The above JSON will render an availability section that looks like this:

An error occurred while trying to load the image. https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/vtex-io/Store-Framework-Apps/b2b-components/availability-example.png

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
container
shippingOption
postalCode
regularShippingLabel
regularShipping
time
ETA
firstShippingOption
freeShippingLabel
freeShipping
cannotBeDeliveredLabel
cannotBeDelivered
pickUpLabel
pickUp
getTomorrow
getInDays
availabilityHeader
availabilityHeaderLink
storeListContainer
storeListEmptyMessage
pickupHeader
storeList
pickupItem
pickupName
pickupAddress
pickupCityStateZip
pickupEstimate
pickupUnavailable
seeAllModalButton
seeAllModalButtonText
modalContainer
modalHeader
modalStoreList
shippingListContainer
shippingHeader
shippingListEmptyMessage
shippingList
shippingListItem
shippingDeliveryName
shippingDeliveryEstimate
shippingDeliveryPrice
estimateTranslated
distance
distanceEstimate
pickupMessage
pickupStoreName
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page