マジェント2でカスタムブロックを作成する方法

マジェントプラットフォームは、CMS ページを作成し、そのページ内からブロックを呼び出すことができる柔軟性を持っています。しかし、それだけではなく、ブロックを作成して、マジェント バックエンドCMS ページからはアクセスできない、Magento レイアウトの他の領域に適用したい場合もあります。

このチュートリアルでは、Magentoでカスタムブロックを作成する方法と、ウィジェットツールを使って特定のページにブロックを割り当てる方法を紹介します。

関連トピック:マジェント 2で注文をCSVにエクスポートする方法

1.カスタムブロックの作成

ステップ1:モジュールインストール用XMLファイル

カスタムブロックを/app/etc/modulesディレクトリに作成します。

例:「MyExtensions_HelloBlock.xml」

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyExtensions_HelloBlock>
            <active>true</active>
            <codePool>local</codePool>
        </MyExtensions_HelloBlock>
    </modules>
</config>

ステップ2: モジュール構成用XMLファイル

/app/code/local/MyExtensions/HelloBlock/etc/config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyExtensions_HelloBlock>
            <version>0.0.1</version>
        </MyExtensions_HelloBlock>
    </modules>
    <global>
        <blocks>
            <helloblock>
                <class>MyExtensions_HelloBlock_Block</class>
            </helloblock>
        </blocks>
    </global>
</config>

ステップ3:「Block」クラス

「Block」クラス(例:Hello.php)を /app/code/local/MyExtensions/HelloBlock の下に作成します。

<?php
class MyExtensions_HelloBlock_Block_Hello extends Mage_Core_Block_Template
{
    public function hello()
    {
        echo “hello”;
    }
}
?>

ステップ4:カスタムブロックのテンプレートファイル

ブロックに使用するテンプレートファイルを作成します。

<?php
$this->hello();
?>

以下のコードを入力すると、既存のテンプレートファイルにこのブロックが動的に作成されます。

//helloblock matches <helloblock> in the module config file
//hello matches the block class name
echo $this->getLayout()->createBlock('helloblock/hello')->setTemplate('helloblock/hello.phtml')->toHtml();

この「Block」が既存のレイアウトファイルに追加することで挿入されます。

<block type="helloblock/hello" name="helloblock" template="helloblock/hello.phtml"/>

例:以下のものを「view xml」のカテゴリ商品に挿入することができるように、

MageRoot/app/design/frontend/base/default/layout/catalog.xml

<catalog_product_view translate="label">
    <label>Catalog Product View (Any)</label>
    <!-- Mage_Catalog -->
    <reference name="root">
        <action method="setTemplate">
            <template>page/2columns-right.phtml</template>
        </action>
    </reference>
    <reference name="head">
        <action method="addJs">
            <script>varien/product.js</script>
        </action>
        <action method="addJs">
            <script>varien/configurable.js</script>
        </action>
        <action method="addItem">
            <type>js_css</type>
            <name>calendar/calendar-win2k-1.css</name>
            <params/>
            <!--<if/><condition>can_load_calendar_js</condition>-->
        </action>
        <action method="addItem">
            <type>js</type>
            <name>calendar/calendar.js</name>
            <!--<params/><if/><condition>can_load_calendar_js</condition>-->
        </action>
        <action method="addItem">
            <type>js</type>
            <name>calendar/calendar-setup.js</name>
            <!--<params/><if/><condition>can_load_calendar_js</condition>-->
        </action>
    </reference>
    <reference name="content">
        <!--This is the line added to this catalog.xml file-->
        <block type="helloblock/hello" name="helloblock_hello" template="helloblock/hello.phtml"/>

ステップ5: 「hello」ブロックを追加した後にキャッシュを更新すると、商品の詳細ページに「Hello」が表示されます。

2.ウィジェットでブロック(Block)配置

ステップ1:ウィジェットタイプを選択します。

  1. 管理画面のサイドバーで、「コンテンツContent)」→「要素(Elements)」→「ウィジェット(Widgets)」と進みます。
  2. 右上にある「ウィジェットを追加(Add Widget)」をクリックします。
  3. [設定(Settings)]セクションで、[タイプ(Type)]に[CMS静的ブロック]を設定し、 [続行(Continue)]を押下します。
  4. 「Design Theme」が現在のテーマに設定されていることを確認し、[続行(Continue)]を押下します。
  1. ストアフロントのプロパティ]セクションで、次の操作を行います。
  • Widget Title」にタイトルを入力します。
  • Assign to Store Views」では、ウィジェットが表示されるストアビューを選択します。特定のストアビューを選択することも、すべてのストアビューを選択することもできます。

複数のビューを選択するには、Ctrlキー(PC)またはCommandキー(Mac)を押しながら、各オプションをクリックします。

ステップ2: ウィジェットのレイアウト更新を完了します。

  1. 「レイアウトアップデート」セクションで、「レイアウトアップデートの追加(Add Layout Update)」をクリックします。
  2. ブロックを表示したいカテゴリー、商品、ページに「表示する」を設定します。
  3. ブロックを特定のページに配置するには
  • ブロックを表示したいページを選択します。
  • ブロックがページに表示される場所を特定する「ブロック参照(Block Reference)」を選択します。
  • CMS静的ブロックデフォルトテンプレートに設定されているテンプレートのデフォルト設定を受け入れます。

ステップ3: ブロックの配置

  1. 左パネルで「ウィジェットオプション(Widget Options)」を選択します。
  2. ブロックを選択…(Select Block…)」をクリックし、リストから配置したいブロックを選択します。
  3. 完了したら「保存(Save)」をクリックします。アプリがリストに表示されます。
  4. プロンプトが表示されたら、ページ上部の指示に従ってインデックスとページキャッシュを更新します。
  5. ストアフロントに戻り、ブロックが正しい位置に表示されていることを確認します。ウィジェットを再度開いて、ブロックを別のページに移動したり、ブロックの参照先を変更することができます。

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

►►►サービスについて