I have a custom module.I want to the add the css and js file if my custom product attribute value is available.

In xml I can't check product attribute value is available or not.

so what i do?

Please provide me the best solution.

1 Answer 1


You can do this by adding a layout handles (say your_layout.xml) using event observer ( for event layout_load_before) and then on the your_layout.xml you can add JS and CSS file.

Steps are given below.

I assume you are using a module names "Company_MyModule".

step 1)

create file events.xml under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/etc/frontend

File: YOUR-MAGENTO-ROOT/app/code/Company/MyModule/etc/frontend/events.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <event name="layout_load_before">
        <observer name="productcustom_layout_handles" instance="Company\MyModule\Observer\AddHandles"/>

step 2) Create the Observer class file AddHandles.php under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/Observer

File: YOUR-MAGENTO-ROOT/app/code/Company/MyModule/Observer/AddHandles.php


    namespace Company\MyModule\Observer

    class AddHandles implements \Magento\Framework\Event\ObserverInterface
         * @var \Magento\Framework\Registry
        protected $_registry;

        public function __construct(
           \Magento\Framework\Registry $registry,
            $this->_registry = $registry;

        public function execute(\Magento\Framework\Event\Observer $observer)
            $product = $this->_registry->registry('current_product');

            if (!$product){
              return $this;

            if($product->getMyCustomAttribute()){ // add your attribute condition
               $layout = $observer->getLayout();

            return $this;

step 3) Create the layout fiile your_layout.xml under YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/layout/

File : YOUR-MAGENTO-ROOT/app/code/Company/MyModule/view/frontend/layout/your_layout.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <css src="css/PATH-TO-CSS-FILE"/>
         <script src="js/PATH-TO-JS-FILE"/>

step 4) Flush your magento cache


Magento does not recommend to include js files using the head tag. So If your js file has written is AMD format then you can include the JS file using require js .

For this, you need to add an extra block in your your_layout.xml file and under the block's PHTML file you need to load the JS files using require js.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.