📢 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
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

Contributors ✨

Thanks goes to these wonderful people:

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