.less in Shopware Plugins nützen

Sourcecode

Wenn man das Theme über Plugins erweitert ist es oft notwendig, eigene CSS-Styles zu deklarieren. Dafür gibt es die wenig eleganten Möglichkeiten die CSS-Styles direkt im Theme-File mittels <style> zu deklarieren oder ein externes CSS einzubinden.

Wesentlich sauberer lässt sich das Thema lösen indem man den integrierten .less Compiler von Shopware verwendet. Das bringt folgende Vorteile:

  • Die Vorzüge von .less können genützt werden
  • Die Menge an Requests wird reduziert
  • Saubere Trennung von HTML Notation und Styling
  • Ein Überladen im Theme .less ist möglich

Zu diesem Zweck stellt Shopware einen eigenen Event names Theme_Compiler_Collect_Plugin_Less bereit, dem man das im Plugin zu kompilierende .less File übergeben kann. Der Rest geschieht vollautomatisch, sobald Du das Theme kpmpilierst.

Beispiel zum Einsatz von .less in Plugins (Shopware 5.2.3)

Nachstehend ein Beispiel für eine Implementierung über den Subscriber Pattern in Shopware 5.2.3.

Plugin Bootstrap: /custom/plugins/MyPlugin/MyPlugin.php

namespace MyPlugin;

//use Doctrine\Common\Collections\ArrayCollection;
use Shopware\Components\Plugin;
use Shopware\Components\Plugin\Context\ActivateContext;
use Shopware\Components\Plugin\Context\DeactivateContext;
use Shopware\Components\Plugin\Context\InstallContext;
use Shopware\Components\Plugin\Context\UpdateContext;
use Shopware\Components\Plugin\Context\UninstallContext;

final class MyPlugin extends Plugin
{

    /**
     * @param InstallContext $context
     * This method is called on plugin installation
     */
    public function install(InstallContext $context)
    {
        parent::install($context);
    }

    /**
     * @param UpdateContext $context
     * This method is called on update of the plugin
     */
    public function update(UpdateContext $context)
    {
        return parent::update($context);
    }

    /**
     * @param ActivateContext $context
     * This method is called on activation of the plugin
     */
    public function activate(ActivateContext $context)
    {
        return parent::activate($context);
    }

    /**
     * @param DeactivateContext $context
     * This method is called on deactivation of the plugin
     */
    public function deactivate(DeactivateContext $context)
    {
        return parent::deactivate($context);
    }

    /**
     * @param UninstallContext $context
     * This method is called once on uninstallation of the plugin
     */
    public function uninstall(UninstallContext $context)
    {
        return parent::uninstall($context);
    }

    /**
     * @return array
     * Required for adding the register subscriber event before dispatching
     */
    public static function getSubscribedEvents()
    {
        return [
            'Enlight_Controller_Front_StartDispatch' => 'onRegisterSubscriber'
        ];
    }

    /**
     * @param \Enlight_Controller_EventArgs $args
     * Add all subscriber classes for events here
     */
    public function onRegisterSubscriber(\Enlight_Controller_EventArgs $args)
    {
        Shopware()->Events()->addSubscriber(new Subscriber\LessDemo());
    }

}

Subscriber class: /custom/plugins/MyPlugin/Subscriber/LessDemo.php

namespace MyPlugin\Subscriber;

use \Enlight\Event\SubscriberInterface;

class LessDemo implements SubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return array(
            'Enlight_Controller_Action_PostDispatchSecure_Frontend' => 'onPostDispatchSecure',
            'Theme_Compiler_Collect_Plugin_Less' => 'onCollectPluginLess'
        );
    }

    public function onPostDispatchSecure(\Enlight_Event_EventArgs $args) {

        // Fetch the controller
        $controller = $args->get('subject');

        // Fetch the view and add the plugins view directory
        $view = $controller->View();
        $view->addTemplateDir(
            $plugin->getPath() . '/Views/MyPlugin'
        );

        // Get the environment - we use this for the demo
        $environment = getenv('SHOPWARE_ENV');

        // Add view variables
        if(isset($environment)):
            $view->assign('environment', $environment);
        endif;

    }

    public function onCollectPluginLess() {

        return new \Shopware\Components\Theme\LessDefinition(
            [],
            [__DIR__ . '/Views/MyPlugin/frontend/_public/src/less/all.less']
        ); 

    }

}

Theme File: /custom/plugins/MyPlugin/Views/MyPlugin/frontend/index/index.tpl

{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_after_body" prepend}
    {if $environment}
        <div class="environment-bar {$environment}">
            <span>{$environment}</span>
        </div>
    {/if}
{/block}

Less File: /custom/plugins/MyPlugin/Views/frontend/_public/src/less/all.less

.environment-bar {
    color: white;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;

    &.development {
        background-color: #cc0000;
    }

    &.staging {
        background-color: #ff9d00;
    }
}

Kommentar verfassen

Folge mir auf Twitter

Hol Dir kostenlos Tipps und Tricks zu Shopware, E-Commerce und andere Open-Source Produkte.

Folge @synonymousrocks