https://github.com/magesuite/shipping-addons
This module adds a free shipping bar in order 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 fronted section for more details.
Backend
TODO - BE documentation and review of documentation is needed
Frontend
“Free shipping bar” component id disabled by default. Every child theme has to enabled it in XML in order to show the bar.
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 component for the cart in checkout_cart_index.xml
file the following code should be added:
<referenceBlock name="checkout.cart.totals"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="block-totals" xsi:type="array"> <item name="children" xsi:type="array"> <item name="free_shipping_bar" xsi:type="array"> <item name="component" xsi:type="string">MageSuite_ShippingAddons/js/view/free-shipping-bar</item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock>
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.