I already enable critical CSS on the current website but is that possible to have custom critical CSS for customer account pages only? which can be called in customer pages only.
Any solution will be appreciated.
Add a comment
|
1 Answer
To call a custom critical css only under customer account pages, you'll have to create separate view model and call it in to customer_account.xml Follow bellow steps to achieve it.
- Create a view model into your custom module Path : Vendornamespace/Modulename/Block/Html/Header/CriticalCss.php
<?php declare(strict_types=1); namespace Vendornamespace\Modulename\Block\Html\Header; use Magento\Framework\Exception\LocalizedException; use Magento\Framework\View\Element\Block\ArgumentInterface; use Magento\Framework\View\Asset\Repository; use Magento\Framework\View\Asset\File\NotFoundException; /** * This ViewModel will add inline critical css in case dev/css/use_css_critical_path is enabled. */ class CriticalCss implements ArgumentInterface { /** * @var Repository */ private $assetRepo; /** * @var $filePath */ private $filePath; /** * @param Repository $assetRepo * @param string $filePath */ public function __construct( Repository $assetRepo, string $filePath = '' ) { $this->assetRepo = $assetRepo; $this->filePath = $filePath; } /** * Returns critical css data as string. * * @return bool|string */ public function getCriticalCssData() { try { $asset = $this->assetRepo->createAsset($this->filePath, ['_secure' =>'false']); $content = $asset->getContent(); } catch (LocalizedException | NotFoundException $e) { $content = ''; } return $content; } }
- Pass critical css file name using frontend/di.xml Path: Vendornamespace/Modulename/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="Vendornamespace\Modulename\Block\Html\Header\CriticalCss"> <arguments> <argument name="filePath" xsi:type="string">css/customeraccount_critical.css</argument> </arguments> </type> </config>
Create a cirtical css in your custom theme on below path Path : app/design/frontend/Themenamespace/themename/web/css/customeraccount_critical.css
Create a template file to on below path Path : Vendornamespace/Modulename/view/frontend/templates/html/header/customeraccount/criticalCss.phtml
<?php /** * @var \Vendornamespace\Modulename\Block\Html\Header\CriticalCss $criticalCssViewModel */ ?> <?php $criticalCssViewModel = $block->getData('customerAccountCriticalCssViewModel'); ?> <style type="text/css" data-type="criticalCss"> <?= /* @noEscape */ $criticalCssViewModel->getCriticalCssData() ?> </style>
- Extend customer_account.xml into your theme package and put below code snippets Path : app/design/frontend/Themenamespace/themename/Magento_Customer/layout/customer_account.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="head.additional"> <block name="customeraccount_critical_css_block" as="customeraccount_critical_css" template="Vendornamespace_Modulename::html/header/customeraccount/criticalCss.phtml" ifconfig="dev/css/use_css_critical_path"> <arguments> <argument name="customerAccountCriticalCssViewModel" xsi:type="object">Vendornamespace\Modulename\Block\Html\Header\CriticalCss</argument> </arguments> </block> </referenceBlock> </body> </page>
Cheers!!
