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

class AddFreeShippingBarVariables
{
    public function afterGetJsLayout(\Magento\Checkout\Block\Cart\Totals $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);
    }
}

Calculating minimum amount

vendor/creativestyle/magesuite-shipping-addons/Helper/ShippingMethods.php:21

class ShippingMethods extends \Magento\Framework\App\Helper\AbstractHelper
{
    public function getMinimumFreeShippingAmount()
    {
        $minimumAmount = null;

        foreach ($this->freeShippingMethodsProvider->getShippingMethodsWithFreeShipping() as $methodData) {
            if (!$minimumAmount || (int) $methodData['value'] < $minimumAmount) {
                $minimumAmount = (int) $methodData['value'];
            }
        }

        return $minimumAmount;
    }
}

vendor/creativestyle/magesuite-shipping-addons/Service/FreeShippingMethodsProvider.php:37

class FreeShippingMethodsProvider
{
    public function getShippingMethodsWithFreeShipping()
    {
        $activeCarriers = $this->shippingConfig->getActiveCarriers();
        $methods = [];

        foreach ($activeCarriers as $code => $model) {
            .....

            $freeShippingSubtotal = $this->configuration->getFreeShippingSubtotal($code, $subtotalField);
            $freeShippingTitle = $this->configuration->getFreeShippingTitle($code);

            $methods[$code] = [
                'title' => $freeShippingTitle,
                'value' => $freeShippingSubtotal
            ];
        }

        return $methods;
    }
}

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:

<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

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.

MageSuite Developer Documentation

ShippingAddons