javascript - 在商店站点中实现 JS

Question

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

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

在我的商店网站中，该网站不是索引(主)网站。

我已经尝试过的事情

1) 在网站主体上添加 js

2)在我的主题的 header.tpl 中添加了以下 block

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

3) 在我的主题的 header.tpl 中添加了以下 block ，并创建了一个替代的 .js 文件并将其加载到 tpl 中

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

什么可能是错误的，或者我必须改变什么？我使用的是shopware 5.3。

Answer 1

tpl 文件只是标记。添加自定义 Javascript 或 Less/css 的正确方法是将其添加到编译 Javascript 和 Less/css 文件的事件中。在我的示例中，我创建了一个订阅者(ThemeCompiler)以保持 Bootstrap 干净。

我假设订阅者位于文件夹中

Subscriber

在插件根目录和 Javascript 文件中

Views/common/frontend/_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 注册为订阅者，请将以下行添加到您的 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());
}

添加这些更改后，清除商店缓存并使用后端用户界面重新编译它。