📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Shipping Option Components

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:

  "dependencies": {
    "vtex.shipping-option-components": "0.x"
  }

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:

"header.full": {
   "blocks": ["header-layout.desktop", "header-layout.mobile"]
 },

 "header-layout.desktop": {
   "children": [
     "header-row#1-desktop",
   ]
 },

 "header-row#1-desktop": {
   "children": ["shipping-option-location-selector"],
 },

"shipping-option-location-selector": {
  "props": {
    "compactMode": true,
  }
},

shipping-option-location-selector props

Prop name	Type	Description	Default value
compactMode	boolean	Determines whether the button displays its label. When true, the label is hidden, showing only its value.	false
overlayType	enum	Defines the type of overlay that opens when the page loads. Possible values: popover-button(opens a popover encouraging the user to enter their postal code), popover-input(opens a popover for postal code entry) and blocking-modal(opens a non-dismissible modal requiring postal code entry)	popover-input

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

Contributors ✨

Thanks goes to these wonderful people:

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