Magentoめも

Front側

大きく分けて2通りのやり方があるようですが、簡単なやり方でやります。
まずはMagento2 themeの作成でテーマを作成しておきます。

JSファイル設定

以下のパスに default_head_blocks.xml を設置します。
app/design/frontend/Yassujp/blank/Magento_Theme/layout/

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/custom.js"/>
    </head>
</page>

JSの記述

以下のパスに custom.js を設置します。
app/design/frontend/Yassujp/blank/web/js/

静的ファイルのデプロイ

以下のコマンドで静的ファイルをデプロイします。

php bin/magento cache:clean
php bin/magento setup:static-content:deploy

デプロイ先は以下になります。
pub/static/frontend/Yassujp/blank/en_US/js/custom.js

更新されない場合は削除してしまって再度コマンドを叩きました。

# rm -fr pub/static/frontend/Yassujp/

キャッシュファイルのクリア

SYSTEM - Cache Management からキャッシュをクリアします。

これでJSが実行されればOKです。

Magento2でjQueryを使用するも参考にして下さい。

Admin側

JSファイル設定

以下のパスに default.xml を設置します。
app/code/Yassujp/HelloWorld/view/adminhtml/layout/

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
     <link src="Yassujp_HelloWorld::js/custom-adminhtml.js"/>
   </head>
</page>

JSの記述

以下のパスに custom-adminhtml.js を設置します。
app/code/Yassujp/HelloWorld/view/adminhtml/web/js/

モジュールの更新

以下のコマンドで更新します。

php bin/magento setup:upgrade

これでJSが実行されればOKです。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-08-11 (金) 11:17:24 (7d)