Hello Magento Developers?,
How are you all? Welcome to the How-to tutorial blog. Today we are going to learn How to add Dynamic CSS Using Page Assets in Magento 2. On the previous blog, we have discussed Magento 2: How to Get System Configuration Value Into JS. Let’s Dive In?
Mainly, in Magento 2 there are many techniques to add your custom CSS to your extension or theme. Today, I will guide you through one of the methods to add Dynamic CSS Using Page Assets in Magento 2.
Firstly, we will add our custom CSS using the addPageAsset Method, for that we need to create a Plugin of RenderAssets Method of Page\Config\Rendrer class.
Step 1: For that, you need to create di.xml file
File Path: app\code\Vendor\Extension\etc\frontend\di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Page\Config\Renderer"> <plugin name="vendor_Extension::make-css" type="Vendor\Extension\Plugin\View\Page\Config\Renderer"/> </type> </config>
Step 2: After this, you have to create a Renderer class
namespace Vendor\Extension\Plugin\View\Page\Config; use Magento\Framework\View\Asset\File; class Renderer { const CACHE_ID = 'vendor_screenshot_css'; protected $existingFiles = ['css/styles-l.css', 'css/styles-m.css']; private $config; private $cache; public function __construct( \Magento\Framework\View\Page\Config $config, Magento\Framework\App\CacheInterface $cache) { $this->config = $config; $this->cache = $cache; } public function beforeRenderAssets( Magento\Framework\View\Page\Config\Renderer $subject, $assetestlist = []) { $shouldLoad = $this->cache->load(self::CACHE_ID); if ($shouldLoad == 0) { $shouldLoad = $this->needtoAddCss(); $this->cache->save($shouldLoad, self::CACHE_ID); } if ($shouldLoad) { $this->config->addPageAsset('Vendor_Extension::css/source/style.css'); } return [$assetestlist]; } private function needtoAddCss() { $collection = $this->config->getAssetCollection(); $increment = 0; foreach ($collection->getAll() as $item) { if ($item instanceof File && in_array($item->getFilePath(), $this->existingFiles)) { $increment++; } } $finalReturn = (int)($increment < count($this->existingFiles)); return $finalReturn; } }
That’s it… With the help of the above code, you will be able to add Dynamic CSS Using Page Assets in Magento 2.
Therefore, after applying the above steps you will be easily able to add Dynamic CSS Using Page Assets in your Magento 2 store. In case any issues related to the article then do comment down in the comment section below. If you find the blog interesting then do share it with your Magento developer friends.
Happy Coding?.
In the world of business, understanding financial metrics is crucial for making informed decisions and…
Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…
In this era, businesses are always on the lookout for ways to engage with their…
Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…