You are viewing the documentation for the 1.x branch of the Sylius Shipping Estimate Plugin package which has not yet been released. Be aware that the API for this version may change before release.
Customize the Output
Using both Symfony's template overrides and the SyliusThemeBundle theme overrides, the plugin layouts can be customized to suit your website.
Frontend Layout
The frontend layout is generated by the @BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twig template. You can customize this by copying the src/Resources/views/Cart/Estimator/_widget.html.twig file to one of the following locations, depending on your site's configuration:
themes/<my-theme>/templates/bundles/BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twigif using theSyliusThemeBundletemplates/bundles/BabDevSyliusShippingEstimatePlugin/Cart/Estimator/_widget.html.twigif NOT using theSyliusThemeBundle
Messages Used By The JavaScript
The messages the JavaScript shows are read from data-message-* attributes on the estimator form, allowing them to be fully translated:
| Attribute | Translation key |
|---|---|
data-message-incomplete-form | babdev_sylius_shipping_estimate.ui.please_fill_in_all_fields_to_estimate_your_shipping |
data-message-calculator-error | babdev_sylius_shipping_estimate.ui.sorry_there_was_a_temporary_error_calculating_shipping |
data-message-estimate-cancelled | babdev_sylius_shipping_estimate.ui.the_shipping_estimate_was_cancelled |
data-message-generic-error | babdev_sylius_shipping_estimate.ui.error_getting_shipping_estimates_please_try_again |
To change the wording, override those translation keys in your application's translation files. If you override the widget template, keep these attributes; the script falls back to its own English strings when one is missing.
Note the cancellation message is only a fallback. When an event listener passes a reason to cancelEstimate(), that reason is displayed instead.
JavaScript
The JavaScript file at src/Resources/public/js/babdev-sylius-shipping-estimator.js is designed to be able to be loaded standalone after the core Sylius UI assets (a requirement because of the use of jQuery) and by design is only loaded on the cart summary page when there is an active cart. If you would like to customize the JavaScript, you should copy the JavaScript file from this plugin into your application's assets directory, include it within your own build process, and disable the block listener for the Sylius template event that loads the JavaScript file by adding the below snippet to your config/packages/_sylius.yaml file:
sylius_ui:
events:
sylius.shop.layout.javascripts:
blocks:
shipping_estimator_javascript:
enabled: false