Sylius：如何修改/自定义 app.js？

Question

我正在用我的自定义主题覆盖 Sylius 中的一般主题，目前它运行良好。我在app/themes/myCustomTheme 中创建了一个新主题并正在覆盖例如/SyliusShopBundle/views/ 中的树枝模板。

现在我想覆盖位于vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/js/ 中的一般app.js。例如。而是在第 18 行：

$('.ui.accordion').accordion();

我想使用不同的选择器来初始化手风琴：

$('.my-custom-accordion').accordion();

假设这是我想要在整个 javascript 代码中做的唯一更改。最好和最有效的方法是什么？当有 Sylius 版本更新时，我希望尽可能减少冲突，因此尽可能少地接触文件。当然，也不必自己重写整个 javascript 功能。

我可以考虑不同的方法来做到这一点，但我希望有更好的方法：

1. 复制所有内容。 将所有 UiBundle 和 ShopBundle javascript 代码复制到我的主题并修改必要的部分。更新全局 gulpfile 以不再使用 vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Gulpfile.js 中的 gulpfile，而是使用重复的 /myCustomTheme/SyliusShopBundle/Gulpfile.js。缺点：重复的代码，javascript 更新不再可能。
2. 将自定义路径添加到现有 gulpfile。 更新 vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Gulpfile.js 中的 gulpfile，这意味着删除包含 app.js 的行：vendorShopPath + 'Resources/private/js/**'，而是引用所有没有 app.js 和引用的单个文件到我的主题文件夹中自定义的app.js。缺点：对 gulpfile 的更改可能会被下一次更新覆盖。

如何有效地修改/自定义/扩展 Sylius 中现有的 javascript 代码？

Answer 1

我为我解决了这个问题，我在我的包 (AppBundle) 中创建了一个自定义 gulpfile，并以与“admin”和“shop”相同的方式将其添加到全局 gulpfile。之后，您可以在布局或任何模板中包含您的自定义 app.js。就我而言，我修改了 Product/show.html.twig 以添加我的自定义 .js：

{% block javascripts %}
{{ parent() }}

{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/app/js/app.js'} %}
{% endblock %}