Magento 2 - 如何仅将其他 js 文件添加到产品页面答案

【问题标题】：Magento 2 - How to add additional js files to product page onlyMagento 2 - 如何仅将其他 js 文件添加到产品页面
【发布时间】：2016-08-12 06:31:36
【问题描述】：

Magento 2 使用 RequireJS 和与版本 1 不同的方法。因此，如果我想继续使用默认主题 luna，通过添加一个 javascript 文件来扩展产品页面。最好的方法是什么？

我应该通过创建一个新模块来扩展它吗？

--更新-- 在考虑了上面的问题之后，在这里，我将按以下步骤列出我想做的事情。但需要帮助才能找到方法和解决方案。由于我是 Magento 2 的新手，有些问题对您来说可能太简单了，请不要介意提供帮助。谢谢！

创建子主题并将 Luma 主题用作父主题。（我正在研究http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html但是关于如何定位js文件的细节有很多问题）
Magento 2 使用 RequireJS。放置我的 js 文件的最佳方式是什么，例如，如果我有一个 js 文件来触发产品变化更改的一些事件。以及名为 custom-events.js 的 js 文件。我应该放在哪里？

--更新-- 创建了 luna 的子主题，即：命名为：Vendor 和 lunachild：

app/design/frontend/Vendor/lunachild/theme.xml
app/design/frontend/Vendor/lunachild/registration.php
app/design/frontend/Vendor/lunachild/etc/view.xml

如何在我的主题中放置 catalog_product_view.xml？

【问题讨论】：

是否要直接将js添加到Luma主题中？
不，一旦更新了任何 Luma 主题，我的自定义设置将无法正常工作。我正在考虑创建一个自定义模板并将 Luma 用作父主题。因此，我应该在自定义子主题中在哪里添加 js 文件？应该使用RequireJS方法吧？应该创建一个 requirejs-config.js 并将我的代码放在那里吗？什么是仅将 js 放入产品页面中的特定块的最佳方法。我要放置的块与变化变化有关，产品变化变化的下拉菜单会触发一个事件。
将 catalog_product_view.xml 放在路径 app/design/frontend/Vendor/lunachild/Magento_Catalog/layout/catalog_product_view.xml 下

标签： magento2 magento-2.0

【解决方案1】：

您可以通过 xml 布局添加您的 js。您必须将 catalog_product_view.xml 覆盖为本地主题。

<?xml version="1.0"?>
<!-- /** * Copyright © 2015 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Custom_Module::custom.js"/>
        <css src="Custom_Module::custom.css"/>
    </head>
    <body/>
</page>

您还可以使用 require.js 和 head.additional 块添加 css 或 js

【讨论】：

那么，我应该把这个文件放在我自定义的子主题中的什么位置？例如，我在 Vendor 下创建了一个子主题（lumachild）：（ app/design/frontend/Vendor/lumachild/ ）。已经在 devdocs 之后创建了 theme.xml 和 registration.php。我应该将 catalog_product_view.xml 放在哪里来扩展我的主题文件夹中的 Magento_Catalog？谢谢。
在您的主题中创建名为“Magento_Catalog”的文件夹。您可以在 Magento_Catalog 中创建布局和模板文件夹。将该文件放入布局文件夹 lumachild->Magento_Catalog->layout->catalog_product_view.xml

【解决方案2】：

我发现更好的方法是查看回调逻辑的细节： http://devdocs.magento.com/guides/v2.0/architecture/view/static-process.html

此外，还有一个很棒的教程来解释如何在 Magento2 中初始化 javascript：阅读：http://alanstorm.com/magento_2_javascript_init_scripts，还有 Magento 文档：http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

【讨论】：