Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
VTEX IO Apps
Pickup point selector
Community extension
Version: 3.0.2
Latest version: 3.0.2

This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

The pickup point selector app adds a block to your store that lets shoppers add a product to their cart and select a pickup point in a single action.

The app creates a list of available pickup points by running a simulation with the selected SKU and the shopper's ZIP code.

This app should only be used inside the product page, since one of its dependencies is the product-context.

Configuration

Follow the steps below to configure the app on your store theme.

1. Install the app in your workspace and account.

To do this, you can go to the Pickup point selector page in the VTEX app store or run this command in your terminal:


_10
vtex install vtexbr.pickup-selector

2. Add the app as a theme dependency in the manifest.json file.

See an example of how to do this:


_10
"peerDependencies": {
_10
"vtexbr.pickup-selector": "2.x"
_10
}

Now, you are able to use all the blocks exported by the pickup-selector app and its respective props.

3. Adding the main block

Declare the app's main block in a given theme template or inside another block from the theme. See the code example below.


_10
"pickup-selector": {
_10
"children": [
_10
"pickup-selector-zipcode-input",
_10
"pickup-selector-search-sla-button",
_10
"pickup-selector-sla-list"
_10
]
_10
}

Note that the blocks pickup-selector-zipcode-input, pickup-selector-search-sla-button and pickup-selector-sla-list are required inside the main block. But you can use them in any order you want. You can also use flex-layout if needed.

4. Configuring the pickup-selector-sla-list

The only block that should be used inside this one is the pickup-selector-option-card. We do this so you can style the option card however you want, and we will use it as a template for all the options. Below you can see an example.


_10
"pickup-selector-sla-list": {
_10
"children": [
_10
"pickup-selector-option-card"
_10
]
_10
}

5. Configuring the pickup-selector-option-card

You are free to style this block as you wish.

The app provides blocks to help with information about the pickup point. They are the following:

  • pickup-selector-option-card-pickup-point-name
  • pickup-selector-option-card-pickup-point-address
  • pickup-selector-option-card-pickup-point-distance
  • pickup-selector-option-card-pickup-point-sla

The only mandatory block inside this one is the pickup-selector-option-card-add-product-button.

Below you can see an example:


_46
"pickup-selector-option-card": {
_46
"children": [
_46
"flex-layout.col#card-container"
_46
]
_46
},
_46
_46
"flex-layout.col#card-container": {
_46
"children": [
_46
"flex-layout.row#card-header",
_46
"product-separator",
_46
"flex-layout.row#card-body"
_46
]
_46
},
_46
_46
"flex-layout.row#card-header": {
_46
"props": {
_46
"colSizing": "auto"
_46
},
_46
"children": [
_46
"pickup-selector-option-card-pickup-point-distance",
_46
"pickup-selector-option-card-pickup-point-name"
_46
]
_46
},
_46
_46
"flex-layout.row#card-body": {
_46
"props": {
_46
"colSizing": "auto"
_46
},
_46
"children": [
_46
"flex-layout.col#card-body-address",
_46
"flex-layout.col#card-body-call-to-action"
_46
]
_46
},
_46
_46
"flex-layout.col#card-body-address": {
_46
"children": [
_46
"pickup-selector-option-card-pickup-point-address"
_46
]
_46
},
_46
_46
"flex-layout.col#card-body-call-to-action": {
_46
"children":[
_46
"pickup-selector-option-card-pickup-point-sla",
_46
"pickup-selector-option-card-add-product-button"
_46
]
_46
}

Using the configuration above, the end result would look like this:

{"base64":"  ","img":{"width":626,"height":548,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26049,"url":"https://user-images.githubusercontent.com/8519076/136956522-eb7fab05-66dd-4356-9fe2-62d857e32341.png"}}

Blocks

Check out the full list of exported blocks below:

Block nameDescription
pickup-selectorMain block.
pickup-selector-zipcode-inputShows the zipcode input.
pickup-selector-search-sla-buttonButton used to search the pickup SLA options based on the provided postal code and the selected SKU.
pickup-selector-sla-listList that shows the card with the available pickup options.
pickup-selector-option-cardCard with pickup option information.
pickup-selector-option-card-pickup-point-namePickup point name.
pickup-selector-option-card-pickup-point-addressPickup point address.
pickup-selector-option-card-pickup-point-distanceDistance to pickup point (in Km).
pickup-selector-option-card-pickup-point-slaPickup point SLA.
pickup-selector-option-card-add-product-buttonButton that adds the product to the cart and selects the pickup point.

Props

Some of these blocks accept props as described below:

pickup-selector-option-card-pickup-point-distance props

Prop nameTypeDescriptionDefault value
distanceSystemstringThis prop is used to calculate the distance displayed by the block; it accepts metric (shows distance in Km) and imperial (shows distance in Mi).metric

pickup-selector-option-card-add-product-button props

Prop nameTypeDescriptionDefault value
customPixelEventIdstringThis prop should only be used with minicart.v2. It defines the ID of the event sent by the button upon user interaction. Should be the same ID configured on minicart.v2 so that the drawer opens successfully after adding the product to the cart.undefined
showToastFeedbackbooleanThis prop is a fallback in order to support minicart.v1. This will show a toast with feedback on successfully adding the product to the cart.false

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
pickupPointOptionCard
pickupPointAddress
pickupPointDistance
pickupPointName
pickupPointSla
pickupSelectorContainer
pickupSelectorSlaList
searchSlaButtonContainer
selectPickupPointButtonContainer
zipcodeInputContainer
See also
VTEX App Store
VTEX IO Apps
Was this helpful?