Sticky Mini-Cart: How To Add Sticky Add to Cart Extension in Magento 2

In this article, I will explain to you how to add the sticky mini-cart on the current page. This step will help you to make users add to the cart always visible for easier checkout.

When a Magento 2 user scrolls down the current category page, home page, or product details page then this sticky cart extension will allow you to make "Add to cart" always visible for the customer so the customer can easily add more items or subtract items from the cart.

The Customers will also have the option to view a brief of product detail such as images, prices.

If the customer is looking for any change while scrolling the category page or product list page then they no need to scroll back to the top because the cart bar is always visible.

Therefore, this Magento 2 sticky cart extension will add value for your website customers by adding the above extremely convenient shopping experience to the users. Thus this functionality helps store owners to increase sales.

And where customers sometimes used to leave in the middle without completing the checkout, they will now be able to place their order easily.

Sticky Mini-Cart for The Magento Customer

The Sticky cart for the customer adds value to the customer experiance, it fixes the customer mini cart details at the bottom of the page when the page is scrolled down which leads to improves user experience.

This extension was implemented by the Wishusucess Magento development team that increase the conversion rate by encouraging customers to add products to the cart or buy now button.

Features of Magento Sticky Mini-Cart

The website admin panel has been implemented in such a way that anyone can manage the panel of Wishusucess_Stickycart without any coding knowledge.

We have added Enabled/Disable the features of the Wishusucess_Stickycart quickly from the admin.

Customers can view a brief of the details while scrolling the store page and also can manage their mini-cart details by just clicking on the icons.

Admin users can customize the size requirement from the admin panel of the product images.

The module is completely implemented as a responsive design so you don't have to worry about the different devices like mobiles, tablets, laptops. The module will readjust itself based on the original layout.

Helper Class of Sticky Cart in Magento 2

Hereby using this helper class of sticky cart you can implement the custom module for the Magento websites.

<?php
/*
* @category: Wishusucess_Stickycart
* @Wishusucess: (http://www.wishusucess.com/)
* @licence: http://www.wishusucess.com/
*/
namespace Wishusucess\Stickycart\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
/**
* @var array
*/
protected $configModule;

/**
* @var \Magento\Framework\Json\Helper\Data
*/
protected $jsonHelper;

public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\Json\Helper\Data $jsonHelper
)
{
parent::__construct($context);
$this->configModule = $this->getConfig(strtolower($this->_getModuleName()));
$this->jsonHelper = $jsonHelper;
}

public function getConfig($cfg='')
{
if($cfg) return $this->scopeConfig->getValue( $cfg, \Magento\Store\Model\ScopeInterface::SCOPE_STORE );
return $this->scopeConfig;
}

public function getConfigModule($cfg='', $value=null)
{
$values = $this->configModule;
if( !$cfg ) return $values;
$config = explode('/', $cfg);
$end = count($config) - 1;
foreach ($config as $key => $vl) {
if( isset($values[$vl]) ){
if( $key == $end ) {
$value = $values[$vl];
}else {
$values = $values[$vl];
}
}

}
return $value;
}

public function isEnabled()
{
return $this->getConfigModule('general/enabled');
}
public function getWidthImage()
{
return $this->getConfigModule('general/width_image');
}
public function getHeightImage()
{
return $this->getConfigModule('general/height_image');
}
public function getHeightScroll()
{
return $this->getConfigModule('general/height_scroll');
}

public function getExcludeProducts()
{
return $this->getConfigModule('general/exclude_products');
}

public function getStickyCartConfigJson($product)
{ 
$data = [
"typeProduct" => $product->getTypeId(),
"scrollHeight" => $this->getConfigModule('general/height_scroll'),
"hiddenBottom" => $this->getConfigModule('general/hidden_bottom')
];
foreach ($data as $key => $value) {
if(is_numeric($value)){
$data[$key] = (float) $value;
continue;
}
$value = filter_var($value, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
if(!is_null($value)){
$data[$key] = $value; 
}
}
return $this->jsonHelper->jsonEncode($data);
}

}

How to Install Magento 2 Wishusucess Sticky Mini-Cart

Download the module and paste it into the below directory:

root_directory_of store/app/code/Wishusucess/Stickycart/

Now run the below command step by step:-

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

Help And Support by Magento Team

In case of any problem, you can talk to our Magento 2 development team. Basic installation is absolutely free.

If you want to add any new features to it, then our team is available 24 hours for this, you can tell your requirement to our development team and within 24 hours your features will be implemented.