Question

我想在head标记开始后添加自定义脚本。

等。

<head>
<script>console.log("I'm loaded!");</script>

我尝试在default_head_blocks.xml中添加代码

<referenceContainer name="head.additional">
      <block class="Custom\Module\Block\Success" template="Custom_Module::success/head.phtml"/>
</referenceContainer>

=＆GT;输出：

<script>console.log("I'm loaded!");</script>
</head>

此代码在head标记结束之前使用添加脚本。

请检查以下代码

阻止=＆gt;定制/模块/块/ Onepage / Success.php

namespace Custom\Module\Block\Onepage;
    use Magento\Framework\View\Element\Template;

    class Success extends \Magento\Checkout\Block\Onepage\Success {

    public function getOrder() 
        {
            $objectManager =\Magento\Framework\App\ObjectManager::getInstance();
            $helper = $objectManager->get('Custom\Module\Helper\Data');

            $lastOrderId = $this->getOrderId();

            if (empty($lastOrderId)) 
            {
                return null;
            }
              $orderData = $objectManager->create('Magento\Sales\Model\Order')->loadByIncrementId($this->getOrderId());

            return $orderData;
        }

    }

助手=＆gt;定制\模块\助手\ Data.php

namespace Custom\Module\Helper;
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{

    /**
     * @param \Magento\Framework\App\Helper\Context $context
     */
    protected $_request;

    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        \Magento\Framework\App\Request\Http $request
    ) {
         $this->_request = $request;
        parent::__construct($context);

    }
     public function getConfigValue($value = '') {
        return $this->scopeConfig
                ->getValue($value,\Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }
    public function getTemplate()
    {
        if ($this->getConfigValue('custom_general/general/active') == 1) {
            $template =  'Custom_Module::checkout/success.phtml';
        } else {
            $template = 'Magento_Checkout::success.phtml';
        }

        return $template;
    }
}

di.xml =＆gt;等\ di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/ObjectManager/etc/config.xsd">
    <preference for="Magento\Checkout\Block\Onepage\Success" type="Custom\Module\Block\Onepage\Success"/>
</config>

布局Xml =＆gt;定制/模块/视图/前端/布局/ default.xml中

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <referenceBlock name="require.js">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Custom_Module::success/head.phtml</argument>
        </action>
    </referenceBlock> 
    </body>
</page>

模板=＆gt;定制/模块/视图/前端/模板/成功/ head.phtml

<script>
    console.log("I'm loaded!");

</script>

请帮助我解决这个问题

提前致谢。

Answer 1

我不确定这是否正确，但我有一个领先优势。

默认情况下，magento 2使用root.phtml文件相应地设置head内容，该内容位于vendor/magento/module-theme/view/base/templates/root.phtml（如果尚未覆盖）。

这里，$requireJs变量首先在头块中加载。 $requireJs变量在render类Page类中定义，该类位于vendor/magento/framework/view/Result/Page.php。

在此文件中，$requireJs包含require.js块。 require.js块在vendor/Magento/module-theme/view/frontend/layout/default.xml中定义：

<block name="require.js" class="Magento\Framework\View\Element\Template" template="Magento_Theme::page/js/require_js.phtml" />

<强>解决方案

1）将require_js.phtml从vendor/magento/module-theme/view/frontend/templates/page/js复制到您的主题app/design/frontend/{VENDOR}/{THEME_NAME}/Magento_Theme/templates/page/js/

2）现在您可以像这样添加脚本：

<script>
    console.log("I'm loaded!");

    var require = {
        "baseUrl": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>"
    };
</script>

更新（使用模块）

覆盖require.js块不是一个优雅的解决方案。如果有人有一个好的解决方案，请回答。现在编辑你的布局xml：

<referenceBlock name="require.js">
    <action method="setTemplate">
        <argument name="template" xsi:type="string">Custom_Module::success/head.phtml</argument>
    </action>
</referenceBlock>

并在success/head.phtml内添加您的代码：

<script>
    console.log("I'm loaded!");
    var require = {
        "baseUrl": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>"
    };
</script>

Answer 2

我发现一种简单的方法似乎很合理，因为它使用了adminhtml主题中的现有功能，而无需覆盖/拦截任何东西。

背景

就像提到的@ sanchit-gupta一样，root.phtml模板用作呈现frontend和adminhtml区域的基础，关联的类\Magento\Framework\View\Result\Page也被用作，该对象始终在渲染前寻找名为head.additional的块。

默认情况下，此块存在于frontend布局中，但不幸的是，它不存在于adminhtml布局中。

解决方案

考虑到这一点，目前（从2.3.x版本开始）将内联<scripts>添加到adminhtml的{{1}}部分的最佳方法是添加任何{{1} }块：它将由框架自动呈现。它要么是一个<head>块，以便它自动呈现其所有子级，要么是一个带有指定模板文件的head.additional。我实际上还是选择将我的实际代码块嵌套在ListText块中，只是为了保持与Template区域中相同的机制（例如，与可能做同样工作的其他插件兼容）。

示例

在您的自定义模块或主题中，添加一个布局更新，该更新将以下代码块插入页面布局的ListText中（这与在Magento 2核心中为{ {1}}区域）：

frontend

完成！您的模板将在body内部呈现-不会有任何笨拙的替代或“ hacks”。

此外，如果其他模块在frontend区域中也引用了<body> <block class="Magento\Framework\View\Element\Text\ListText" name="head.additional"> <block name="your_block" class="Magento\Framework\View\Element\Template" template="Your_Module::your/template.phtml" /> </block> </body>，则它们将与您的代码兼容。

Magento 2：在head标签之后添加自定义脚本

2 个答案:

背景

解决方案

示例