web-dev-qa-db-ja.com

Magento 2：ヘッドタグの直後にカスタムスクリプトを追加する

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>

=>出力：

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

このコードは、headタグの終わりの前に追加スクリプトを使用しています。

以下のコードを確認してください

ブロック=>カスタム/モジュール/ブロック/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;
        }

    }

ヘルパー=> Custom\Module\Helper\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 => etc\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 => Custom/Module/view/frontend/layout/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>

テンプレート=> Custom/Module/view/frontend/templates/success/head.phtml

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

</script>

私を助けてこの問題を解決してください

前もって感謝します。

phpxmlmagentomagento2
8
Sandip Dutt

これが正しい方法であるかどうかはわかりませんが、リードしています。

デフォルトでは、magento 2はroot.phtmlファイルを使用してheadコンテンツをセットアップします。これはvendor/magento/module-theme/view/base/templates/root.phtmlにあります（上書きされていない場合）。

ここでは、$requireJs変数が最初にheadブロックにロードされます。 $requireJs変数は、vendor/magento/framework/view/Result/Page.phpにあるrenderクラス内のPageメソッドで定義されます。

このファイルでは、$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>

PDATE（Using Module）

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>
9
Sanchit Gupta