ShippingAddons
https://github.com/magesuite/shipping-addons
This module adds a free shipping bar to inform a user about the minimal amount of order that is free shipped.
Installation
This module is required by theme-creativeshop and is installed out of the box when theme-creativeshop is required
composer require "creativestyle/magesuite-shipping-addons" ^1.0.0
Admin settings
There are no admin settings. However, the free shipping bar is not enabled by default. Check the fronted section for more details.
Backend
TODO - BE documentation and review of documentation is needed
There is template with display free shiping bar
vendor/creativestyle/magesuite-shipping-addons/view/frontend/templates/cart/free-shipping-bar.phtml
<script type="text/x-magento-init">
{
"[data-block='free-shipping-bar']": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout() ?>
},
"*": {
"Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
}
}
</script>
We calculate freeShipingForm and priceFormat in plugin for getJsLayout method
For Cart Sidebar:
vendor/creativestyle/magesuite-shipping-addons/Plugin/Checkout/Block/Cart/Sidebar/AddFreeShippingBarVariables.php:40
class AddFreeShippingBarVariables
{
public function afterGetJsLayout(\Magento\Checkout\Block\Cart\Sidebar $subject, $jsLayout)
{
$jsLayout = json_decode($jsLayout, true);
$freeShippingBarConfig = $this->arrayManager->get(self::FREE_SHIPPING_BAR_CONFIG_PATH, $jsLayout);
if (!empty($freeShippingBarConfig)) {
$freeShippingBarConfig['freeShippingFrom'] = $this->shippingMethodsHelper->getMinimumFreeShippingAmount();
$freeShippingBarConfig['priceFormat'] = $this->taxHelper->getPriceFormat($this->storeManager->getStore()->getId());
$jsLayout = $this->arrayManager->set(self::FREE_SHIPPING_BAR_CONFIG_PATH, $jsLayout, $freeShippingBarConfig);
}
return json_encode($jsLayout);
}
}
or for Totals
vendor/creativestyle/magesuite-shipping-addons/Plugin/Checkout/Block/Cart/Totals/AddFreeShippingBarVariables.php:40
Calculating minimum amount
vendor/creativestyle/magesuite-shipping-addons/Helper/ShippingMethods.php:21
vendor/creativestyle/magesuite-shipping-addons/Service/FreeShippingMethodsProvider.php:37
Frontend
“Free shipping bar” component is disabled by default. In order to show the bar every child theme has to enable it in XML
In order to use this feature, any shipping method with “Free Shipping” threshold has to be enabled. For eg. “Free Shipping” method takes a threshold value from Minimum Order Amount
field.
In order to enable the component for the cart in checkout_cart_index.xml
file the following code should be added:
A similar code should be applied in default.xml
file if the free shipping bar placed in the sidebar should be enabled in the minicart.
There are the following options that can be changed from the XML file:
name | default value |
---|---|
componentDisabled | true |
template | MageSuite_ShippingAddons/cart/free-shipping-bar |
fulfilledText | Free shipping applied |
displayThresholdValues | true |
shippingIconUrl | images/icons/shipping.svg |
Minicart free shipping bar:
Cart free shipping bar:
Some projects move the bar into the other place. In such case, the original component shod stay disabled, and a new component, with the same settings, but with a different name, should be created.
Styling
CSS styling is provided by default in theme-creativeshop, in theme-creativeshop/src/components/free-shipping-indicator/free-shipping-indicator.scss
file. There are multiple variables that can be customized in order to achieve the desired design.