The Shipping Option Components app exports a component that aims to allow you to filter store products by location or pickup point.
Configuration
Adding the Shipping Option Components app to your theme dependencies
Add the shipping-option-components app to your theme dependencies in the manifest.json as shown below:
_10 "dependencies": {_10 "vtex.shipping-option-components": "0.x"_10 }
You can now use all blocks exported by the shipping-option-components app. See the full list below:
| Block name | Description |
|---|---|
shipping-option-location-selector | Renders a set of components that allow users to add their location and/or select a store for pickup. |
Adding Shipping Option Components blocks to the theme
Declare the shipping-option-location-selector block as a child block of your header block, exported by the store-header app. Example:
_19"header.full": {_19 "blocks": ["header-layout.desktop", "header-layout.mobile"]_19 },_19_19 "header-layout.desktop": {_19 "children": [_19 "header-row#1-desktop",_19 ]_19 },_19_19 "header-row#1-desktop": {_19 "children": ["shipping-option-location-selector"],_19 },_19_19"shipping-option-location-selector": {_19 "props": {_19 "compactMode": true,_19 }_19},
shipping-option-location-selector props
| Prop name | Type | Description | Default value |
|---|---|---|---|
callToAction | enum | Defines the type of overlay that opens when the page loads. Possible values: modal (modal that requires a postal code input), popover-input (popover for postal code input), popover-button (popover that opens with a button). | popover-input |
compactMode | boolean | Determines whether the button displays its label. When true, the label is hidden, showing only its value. | false |
dismissible | boolean | Controls whether the modal can be dismissed without entering a postal code. When set to false, the modal cannot be closed until a postal code is entered. Must be used along with callToAction to correctly set a blocking modal. | true |
shippingSelection | enum | Defines the type of shipping option selector to be shown. Possible values: delivery-and-pickup (shows both options), only-pickup (shows only the pickup store selector). | undefined |
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 |
|---|
buttonLabel |
buttonValue |
buttonWrapper |
deliveryModalButtonLabel |
deliveryModalButtonLabelLimited |
deliveryModalButton |
deliveryPopover |
noPickupsStateContent |
pickupItem |
pickupItemSelected |
popoverInputContainer |
popoverPolygon |
popoverPolygonContainer |
popoverPolygonSvg |
postalCodeHelpLink |
postalCodeInputClearButton |
postalCodeInputContainer |
shippingButtonContainer |
shippingMethodModalOptions |
shippingOptionButton |
shippingOptionButtonSelected |