Magento2 – Customize Sticky Behaviour of Cart Summary

cartmagento-2.1shopping-cart

I have a custom theme based on the Luma theme. And in this custom theme, I have made the header sticky.

By default, the Cart Summary is sticky as well. Now because my header is sticky as well, both of them are overlapped. This is how it looks.

Sticky Header and Cart summary
How can I customize (or remove) this behaviour?

Can someone please point me to the right direction? Thanks.

Best Answer

I finally found the answer to this. The sticky behavior of the cart summary is due to the code in the file magento_root/vendor/magento/theme-frontend-blank/Magento_Theme/web/js/theme.js.

$('.cart-summary').mage('sticky', {
    container: '#maincontent'
});

To remove this functionality, I copied the file theme.js to my theme magento_root/app/design/frontend/customvendor/customtheme/web/js/theme.js and commented out the above piece of code, and removed the magento_root/pub/static/frontend files.

Hope it is helpful to someone else.

theme.js is located under the /vendor/magento/theme-frontend-blank/Magento_Theme/web/js/theme.js

and make replica of this file under your theme's theme module directory

app/design/frontend/YourVendor/YourTheme/Magento_Theme/web/js/theme.js

Related Topic