Question

所以，我想实现一些javasript例如

<script>console.log("Hello World")</script>

在我的商店网站上，这不是索引（家庭）网站。

我已尝试过的事情

1）在网站主体上添加js

2）在我主题的header.tpl中添加了follwing块

{block name="frontend_index_header_javascript_jquery" append}
   <script>console.log("Hello World")</script>
{/block}

3）在我的主题的header.tpl中添加了follwing块并创建了另一个.js文件并将其加载到tpl中

{block name="frontend_index_header_javascript_jquery" append}
   <script src="{link file='frontend/_resources/JavaScript/test.js'}"></script>
{/block}

可能出现什么问题？或者我必须改变什么？我正在使用商品5.3。

Answer 1

tpl文件只是标记。添加自定义Javascript或Less / css的正确方法是将其添加到编译Javascript和Less / css文件的Events中。在我的示例中，我创建了一个订阅者（ThemeCompiler）来保持引导程序清洁。

我假设订户位于文件夹

中

订户

在插件根目录和

中的Javascript文件中

浏览/普通/前端/ _Public / SRC / JS /

一旦您的文件被添加到商店内的所有方面，请记住。

<?php

namespace ShopwarePlugins\MyPlugin\Subscriber;

use \Shopware\Components\Theme\LessDefinition;
use Doctrine\Common\Collections\ArrayCollection;

class ThemeCompiler implements \Enlight\Event\SubscriberInterface
{

  public static function getSubscribedEvents()
  {
    return array(
        'Theme_Compiler_Collect_Plugin_Less' => 'onCollectLessFiles',
        'Theme_Compiler_Collect_Plugin_Javascript' => 'onCollectJavascriptFiles'
    );
  }

  private function path(){
    return __DIR__ . '/../';
  }

  public function onCollectLessFiles()
  {
    return new LessDefinition(
        [],
        [$this->path(). 'Views/common/frontend/_public/src/less/myLessFile.less']
    );
  }

  public function onCollectJavascriptFiles()
  {
    $jsFiles = array(
        $this->path() . 'Views/common/frontend/_public/src/js/myJsFile.js'
    );
    return new ArrayCollection($jsFiles);
  }

}

要将ThemeCompiler注册为Subscriber，请将以下行添加到Bootstrap：

use ShopwarePlugins\MyPlugin\Subscriber\ThemeCompiler;

...

private function registerSubscriber(){
    $this->subscribeEvent('Enlight_Controller_Front_StartDispatch', 'onRegisterSubscriber');
    $this->subscribeEvent('Shopware_Console_Add_Command', 'onRegisterSubscriber');
}

public function onRegisterSubscriber(Enlight_Event_EventArgs $args){
    Shopware()->Events()->addSubscriber(new ThemeCompiler());
}

添加完这些更改后，清除商店缓存并使用backend-ui重新编译它。

在shopware网站上实现JS

1 个答案: