Shipping Simulator

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

Shipping Simulator

App para montar a prateleira de Compre Junto

Media Placeholder

Configuration

1. Adding the shipping-simulator as a theme dependency in the manifest.json file;

eplus io add shipping-simulator

or

  "dependencies": {
    "{vendor}.shipping-simulator": "0.x"
  }

2. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the Search Result documentation.

Block name	Description
seller-simulate-shipping	XXXXX
shipping-simulator.wrapper	XXXXX
shipping-simulator.input	XXXXX
shipping-simulator.button	XXXXX
shipping-simulator.table	XXXXX
shipping-simulator.search	XXXXX

shipping-simulator.wrapper props

Prop name	Type	Description	Default value
pricingMode	boolean		false
isProductPage	boolean		true

shipping-simulator.input props

Prop name	Type	Description	Default value
useMaks	boolean	XXXXXXXX	true
mask	string	XXXXXXXX	99999-999
placeholder	string	XXXXXXXX	00000-000
label	string	will split each sku of product in one shelf	CEP

shipping-simulator.button props

Prop name	Type	Description	Default value
text	string	XXXXXXXX	Calcular

shipping-simulator.search props

Prop name	Type	Description	Default value
text	string	XXXXXXXX	Não sei meu cep

usage:

{
  {
	"container#shipping-simulator-wrapper": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.wrapper"],
		"props": {
			"blockClass": "shipping-simulator-wrapper",
			"preventVerticalStretch": true
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.wrapper": {
		"children": ["container#shipping-simulator-wrapper-column"],
		"props": {
			"blockClass": "shipping-simulator-product-page"
		}
	},

	"container#shipping-simulator-wrapper-column": {
		"children": [
			"container#shipping-simulator-first-row",
			"container#shipping-simulator-second-row"
		],
		"props": {
			"blockClass": "shipping-simulator-wrapper-column"
		}
	},

	"container#shipping-simulator-second-row": {
		"children": ["{vendor}.shipping-simulator:shipping-simulator.table"],
		"props": {
			"blockClass": "shipping-simulator-second-row"
		}
	},

	"rich-text#shipping-simulator": {
		"props": {
			"text": "Calcular Frete e prazo",
			"blockClass": "shipping-simulator-title"
		}
	},

	"container#shipping-simulator-first-row": {
		"children": [
			"rich-text#shipping-simulator",
			"container#shipping-simulator-input-submit",
			"{vendor}.shipping-simulator:shipping-simulator.search"
		],
		"props": {
			"blockClass": "shipping-simulator-first-row",
			"preventHorizontalStretch": true,
			"colSizing": "auto",
			"colGap": 6
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.search": {
		"props": {
			"text": "Não sei meu CEP",
			"blockClass": "shipping-simulator-search-postalcode"
		}
	},

	"container#shipping-simulator-input-submit": {
		"children": [
			"{vendor}.shipping-simulator:shipping-simulator.input",
			"{vendor}.shipping-simulator:shipping-simulator.button"
		],
		"props": {
			"blockClass": "shipping-simulator-submit-input"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.button": {
		"props": {
			"blockClass": "shipping-simulator-button"
		}
	},

	"{vendor}.shipping-simulator:shipping-simulator.input": {
		"props": {
			"blockClass": "shipping-simulator-input"
		}
	}
}

}

⚠️

To select which SKU will take preference over this prop, create a Product (field) specification and assign the value of the desired SKU to be initially set for each product. If the specification doesn't exist or the value is empty, the preferredSKU prop will be used as a fallback. For more information, please refer to this guide.

Remember to also use this Configuration section to showcase any necessary disclaimer related to the app and its blocks, such as the different behavior it may display during its configuration.

Customization

CSS Handles
container
inputWrapper
shippingCTA
shippingSubmitButton
shippingSubmitButtonLabel
shippingContainer
shippingFormContainer
shippingForm
shippingUnknownPostalWrapper
shippingUnknownPostalLink
StatusIndicatorWrapper
StatusIndicatorText
StatusIndicatorText--active
StatusIndicatorText--success
StatusIndicatorText--fail