MagentoスタイルのJavascript
前回はMagentoスタイルのJavascriptの利点や書き方など、いろいろ紹介しました。
- RequireJSを使って、phtmlファイルの中でも、jsファイルを呼び出すことができます。
- element要素にdata-mage-initのattributeを入れて、elementごとに初期処理できます。
- <script type=”text/x-magento-init”>を使えば、要素とは関係なく、ページ全体の初期処理ができます。
では、今回はMagentoスタイルのJavascriptの具体的な例を見ていきましょう。
「お客様に送料無料クーポンを一定の確率で配布」をJSで実現
ファイルの配置
まずは試しに、Magentoの新しいモジュールを作成します。
モジュール作成の仕方と有効化する手順はここの記事をご覧ください。
NameSpace/ModuleNameはMaruweb/LuckyBoxとします。
フロントエンドでjavascriptを利用するには、Maruweb/LuckyBox/view/frontend/web/
までフォルダーを作成して、中にluckybox.jsを置きます。
URIはシンプルに/luckyboxとしたいので、Maruweb/LuckyBox/view/frontend/layout/luckybox_index_index.xmlを作りました。
<?xml version=”1.0″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<referenceContainer name=”content”>
<block class=”Maruweb\LuckyBox\Block\Index” name=”maruweb_luckybox” template=”Maruweb_LuckyBox::luckybox/luckybox.phtml” cacheable=”false” />
</referenceContainer>
</page>
template=”Maruweb_LuckyBox::luckybox/luckybox.phtml”
を参照して、Maruweb/LuckyBox/view/frontend/templates/luckybox/luckybox.phtml
を作成します。
※ここのパスやファイルネームは好きなものに変えてもいいです。Magentoがxmlファイルにある記述通りにjs、phtmlを見つけられればオッケーです。
前回の記事通りにMagento専用のRequireJSでluckybox.jsを呼び出します。
<h2>Maruweb’s LuckyBox</h2>
<h3><div id=”luckybox-coupon” data-mage-init='{“Maruweb_LuckyBox/luckybox”: {}}’></div></h3>
では、さっそくluckybox.jsに
define([], function(){
alert(‘Hello!’);
});
と書いて、動作を確認しましょう。
無事ダイアログボックスが出ました。
しかもちゃんとページ全体レンダリング完了後luckybox.jsを実行しました。
MagentoのRequireJSはHTMLレンダリングをブロックしませんよね。
この書き方だと、ちょっと読みづらいかもしれません。
<script type=”text/x-magento-init“>
{
“#luckybox” : {//CSS Selector
“Maruweb_LuckyBox/luckybox” : {“config” : “value”}
}
}
</script>
それでは全貌です。
<h2>Maruweb’s LuckyBox</h2>
<style>
#luckybox{
display:none;
position:absolute;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
#luckybox-content {
text-align:center;
background-color: #fefefe;
background-image: url(‘/………/Maruweb_LuckyBox/winprize.png’);
background-size:100% 100%;
margin: 15% auto;
border: 1px solid #888;
border-radius:30px;
width: 80%;
max-width:500px;
min-height:500px;
opacity:0.8;
}
.luckybox-header, .luckybox-footer{
padding:1px;
overflow:hidden;
}
.luckybox-header{
border-radius:30px 30px 0px 0px;
height:250px;
}
.luckybox-body{
height:130px;
}
.luckybox-footer{
border-radius:0px 0px 30px 30px;
}
</style>
<div id=”luckybox”>
<div id=”luckybox-content”>
<div class=”luckybox-header”>
<h2>ラッキー</h2>
</div>
<div class=”luckybox-body”>
<h1><div id=”luckybox-coupon”></div></h1>
</div>
<div class=”luckybox-footer”>
<h2>送料無料クーポン</h2>
</div>
</div>
</div>
<script type=”text/x-magento-init”>
{
“#luckybox” : {
“Maruweb_LuckyBox/luckybox” : {
“config” : {//configで、パラメーターをパスします
“delay” : 3000,//3秒後お客様に表示
“coupon” : “<?php /* @noEscape */ echo $block->getCouponCode(); ?>”,//FREESHIPPING
“time” : <?php /* @noEscape */ echo $block->getCurrTime(); ?>,
“rate” : <?php /* @noEscape */ echo $block->getRate(); ?>,//クーポンゲット確率
“couponBox”:”luckybox-coupon”
}
}
}
}
</script>
define([], function(){
var mageJsComponent = function(config, element)
{
console.log(element);
var data=config.config;
var showCoupon = function() {
if(data.time % 100 < data.rate){//確率の計算
require([‘jquery’, ‘jquery/ui’], function($){//jQueryを動的に呼ぶ
$(element).css(“display”, “block”);
$(“#” + data.couponBox).text(data.coupon);
});
}
}
setTimeout( showCoupon, data.delay);
};
return mageJsComponent;
});
ここのクーポンコードや確率などはもともとバックエンドに依存すべきだが、今回はjavascriptの例なので、全部フロントエンドのjavascriptで実現しています。
この例を実際のショップに運用しないでください！
では、今回は以上です。
Magento のフロントエンド開発やカスタマイズを含む構築・改修については、Magento構築・リニューアル支援のページもご確認ください。
よくある質問
Magentoでdata-mage-initとtext/x-magento-initの使い分けはどうすればよいですか？
data-mage-initはHTML要素のattributeに直接記述してその要素を初期化対象とする方式です。text/x-magento-initはscriptタグ内でCSSセレクタとモジュールを紐づけるため、HTML構造を変えずに初期化処理を追加したい場合に向いています。どちらもRequireJSによる非同期読み込みで動作し、ページのHTMLレンダリングをブロックしません。
MagentoでカスタムJavaScriptモジュール（.jsファイル）はどこに配置すればよいですか？
フロントエンド向けのJSファイルは「NameSpace/ModuleName/view/frontend/web/」配下に置きます。layoutのXMLファイルでblockとtemplate（phtmlファイル）を定義し、phtmlからRequireJSのdefine構文でそのJSモジュールを呼び出す構成が標準的です。パスやファイル名はMagentoがXML定義通りに解決できれば任意に命名できます。
MagentoのJavaScriptでPHPの変数（クーポンコードや確率など）をフロントエンドに渡すにはどうしますか？
phtmlテンプレート内のscript（text/x-magento-init）のconfig値にPHPの$block->get〇〇()を埋め込む方法が使えます。JSモジュール側はconfig引数でそのパラメータを受け取ります。ただし記事内でも注意されているとおり、クーポンコードや確率などビジネスロジックに関わるデータは本来バックエンドで管理すべきで、フロントエンドのみで完結させる実装は本番運用には適しません。
MagentoのRequireJSでjQueryを使うにはどう記述しますか？
define内でjQueryを静的に依存宣言するほか、モジュール内でrequire([‘jquery’,’jquery/ui’], function($){…})のように動的に呼び出すことも可能です。記事のluckybox.jsの例では、クーポン表示タイミングに合わせてjQueryを動的ロードしており、不要な場面でのjQuery読み込みを避けられます。
弊社ではMagentoを利用した多機能ECサイトの構築・越境EC／中国越境ECの開発をして企業様をサポートしています。 ご興味ある方は是非問い合わせください。
