在商店网站中实施 JS

Question

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

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

在我的 shopware 网站中，它不是索引（主页）站点。

我已经尝试过的东西

1) 在网站主体上添加 js

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

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

3) 在我的主题 header.tpl 中添加了以下块并创建了一个替代的 .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/

请记住，一旦您的文件被添加到 shopware 中，它就会出现在各个方面。

<?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());
}

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

在商店网站中实施 JS

implement JS in shopware site

javascript

smarty

shopware