3

I have an observer and i need to generate a css file dynamically - using my admin theme setting configuration - calling my observer function.

11
  • In one of my custom module from backend, i can change the colors and those color values are used in phtml file and finally that css with updated value is called in footer or header where you want, do you want the same or something more dynamic ?
    – inrsaurabh
    Commented Mar 25, 2018 at 8:12
  • yes the same thing for a custom theme. i have just create admin config and controller on admin setting save
    – Altravista
    Commented Mar 25, 2018 at 8:17
  • so where you stuck ?
    – inrsaurabh
    Commented Mar 25, 2018 at 8:18
  • i need to create the function to generate css in my custom theme from phtml. i don't kwon how to get code from phtml in controller function and generate variable path to my custom theme css folder where i have to put css generated
    – Altravista
    Commented Mar 25, 2018 at 8:19
  • if i understood, you just want to update the css values right which are changed form module setting page ?
    – inrsaurabh
    Commented Mar 25, 2018 at 8:23

2 Answers 2

3

As per your initial question:

Step 1 .

In /var/www/html/magento2/app/code/Companyname/ModuleName/Block/dynamiccss.php

In this file we get the css values

like below :

 public function color_right_headingh() {
        return $this->_helper->color_right_headingh();
 }

Step 2: In /var/www/html/magento2/app/code/Companyname/ModuleName/Helper/Data.php

We must create the helper methods attached to this view

public function color_right_headingh() {
        return $this->_scopeConfig->getValue(self::COLORRIGHTHEADING);
}

Step 3: In /var/www/html/magento2/app/code/HestabitCompanyname/Modulename/view/frontend/templates/dynamiccss.phtml

 .someClassTag {
    color :<?php echo $color_right_headingh; ?>;
 }

Step 4: : YOu can choose the pages on which you want to change the values or use default.xml for gloabl scope of your phtml file.

In /var/www/html/magento2/app/code/Companyname/ModuleName/view/frontend/layout/cms_index_index.xml

   <body>
           <!-- //sidebar.additional  on home page
                name ="page.bottom" at bottom of home page

                name= "footer" before="-" :: above footer
                name="footer" after="-"   :: below footer
            -->
        <referenceContainer name="header.panel">
                    <block class="Companyname\ModuleName\Block\Dynamiccss" name="dynamiccss" template="Companyname_ModuleName::dynamiccss.phtml"/>
        </referenceContainer>
-----------------
0

this is my configuration Helper

namespace Altravista\ThemeSetting\Helper;

use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Store\Model\ScopeInterface;

class ConfigSetting extends AbstractHelper
{

    const XML_PATH_THEMESETTING = 'themesetting/';

    public function getConfigValue($field, $storeId = null)
    {
        return $this->scopeConfig->getValue(
            $field, ScopeInterface::SCOPE_STORE, $storeId
        );
    }

    public function getGeneralConfig($code, $storeId = null)
    {

        return $this->getConfigValue(self::XML_PATH_THEMESETTING .'general/'. $code, $storeId);
    }

}

This is my GenerateCss Helper

namespace Altravista\ThemeSetting\Helper;

use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Store\Model\ScopeInterface;
use \Altravista\ThemeSetting\Helper\ConfigSetting;

class GenerateStyle extends AbstractHelper
{
    protected $helperConfigSetting;

    public function __construct(
        ConfigSetting $helperConfigSetting
    ) {
        $this->helperConfigSetting = $helperConfigSetting; 
    }

    public function ciao(){
        return 'Hallo :)';
    }

    public function getConf($data){
        return $this->helperConfigSetting->getGeneralConfig($data);
    }

    public function override_css() {
        $line = "\n";
        $style = 'a { color:'.$this->getConf('link_color').'}'.$line;
        $style .= 'a:hover { color:'.$this->getConf('link_hover_color').'}'.$line;
        return $style;
     }

    public function generateStoreCss() {

        $content = $this->override_css();
        $fp = fopen($_SERVER['DOCUMENT_ROOT'] . "/app/design/frontend/Altravista/bookshop/web/css/design.css","wb");
        fwrite($fp,$content);
        fclose($fp);
    }

}

this is my observer

namespace Altravista\ThemeSetting\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer as EventObserver;
use Psr\Log\LoggerInterface as Logger;
use Altravista\ThemeSetting\Helper\GenerateStyle;

class ConfigObserver implements ObserverInterface
{
    /**
     * @var Logger
     */
    protected $logger;

    /**
     * @param Logger $logger
     */
    public function __construct(
        Logger $logger,
        GenerateStyle $helperGenerateStyle
    ) {
        $this->logger = $logger;
        $this->helperGenerateStyle = $helperGenerateStyle;
    }

    public function execute(EventObserver $observer)
    {
        $message =  $this->helperGenerateStyle->ciao();
        $this->logger->info($message);
        $this->logger->debug($message);
        $this->helperGenerateStyle->generateStoreCss();
        //$this->logger->info($observer->getStore());
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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