(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

タグ:EC-CUBE3

今回は 3.0.16 で確認しています。

{{ Product.getPrice02IncTaxMin|price }}
{{ Product.getPrice02IncTaxMax|price }}
などなど、twig や smarty などには便利な装飾子がありますが、

EC-CUBE3 の場合、 |price というのを独自に追加しているので、
それを付けるだけで、 number_format された値と、¥マークが付与された金額を表示することができます。

そこで半角なのを全角にしてみたいと思い、ソースコードを追ってみたところ、
まとめて管理してあるファイルを見つけたので下記のように編集するとうまくいきました。

// /src/Eccube/Twig/Extension/EccubeExtension.php

/**
 * Name of this extension
 *
 * @return string
 */
public function getPriceFilter($number, $decimals = 0, $decPoint = '.', $thousandsSep = ',')
{
    $price = number_format($number, $decimals, $decPoint, $thousandsSep);

    // [カスタマイズ] \マークを全角に
    // $price = '¥ '.$price;
    $price = '¥'.$price;

    return $price;
}

EC-CUBE2 のままでは、PHP7 の恩恵を受けれないことから…、
ついに EC-CUBE3 を実務で使うことにしました。

プログラムがまったくもって新しくなっているので、
インストールの時点で数多くググることに...(>_<)

時間はかかりましたが、なんとかインストールしつつ、/html/ フォルダを URL から消したり、
テンプレートをカスタマイズできるようになりました。

そこで「レイアウト管理」にてブロックを設置できる場所を増やせないかと
ソースを追って、ちょっと追加してみたところ結構簡単に実装できたので、
メモしておきます!

バージョンは、EC-CUBE 3.0.15 になります。

#contents_top と #header の間に場所を設けたかったので、
#contents_over というのを作ることにしました。

まずは、PHP プログラムからです。

// /src/Eccube/Entity/PageLayout.php

// 配置ID
/** 配置ID: 未使用 */
const TARGET_ID_UNUSED = 0;
const TARGET_ID_HEAD = 1;
const TARGET_ID_HEADER = 2;
const TARGET_ID_CONTENTS_TOP = 3;
const TARGET_ID_SIDE_LEFT = 4;
const TARGET_ID_MAIN_TOP = 5;
const TARGET_ID_MAIN_BOTTOM = 6;
const TARGET_ID_SIDE_RIGHT = 7;
const TARGET_ID_CONTENTS_BOTTOM = 8;
const TARGET_ID_FOOTER = 9;
const TARGET_ID_CONTENTS_OVER = 10; // [カスタマイズ] レイアウト追加

まず、配置IDを追加します。
/src/Eccube/Entity/PageLayout.php の先頭に配置IDの定義があります。
0~9はすでに使用済みなので、10を追加しました。

// /src/Eccube/Entity/PageLayout.php

public function getFooterPosition()
{
    return $this->getBlocksPositionByTargetId(self::TARGET_ID_FOOTER);
}

// [カスタマイズ] レイアウト追加
public function getContentsOverPosition()
{
    return $this->getBlocksPositionByTargetId(self::TARGET_ID_CONTENTS_OVER);
}

同じく /src/Eccube/Entity/PageLayout.php の116行目ぐらいにて
ポジションを取得できる関数を用意する必要があるようですので、
フッターを参考に追加してみます。

// /src/Eccube/Entity/PageLayout.php

public function getFooter()
{
    return $this->getBlocksByTargetId(self::TARGET_ID_FOOTER);
}

// [カスタマイズ] レイアウト追加
public function getContentsOver()
{
    return $this->getBlocksByTargetId(self::TARGET_ID_CONTENTS_OVER);
}

同じく /src/Eccube/Entity/PageLayout.php の190行目ぐらいにて
IDを取得できる関数を用意する必要があるようですので、
こちらもフッターを参考に追加してみます。

PHP 側は以上です。

次は、管理画面のHTMLを追記します。

// /src/Eccube/Resource/template/admin/Content/layout.twig

{# [カスタマイズ] レイアウト追加 #}
<tr>
    <td id="position_{{ constant('Eccube\\Entity\\PageLayout::TARGET_ID_CONTENTS_OVER') }}" class="ui-sortable" colspan="3">
        {% for BlockPosition in TargetPageLayout.ContentsOverPosition %}
            <div id="detail_box__layout_item--{{ BlockPosition.Block.id }}" class="sort{% if loop.first %} first{% endif %}">
                <input type="hidden" class="name" name="name_{{ loop_index }}" value="{{ BlockPosition.Block.name}}" />
                <input type="hidden" class="id" name="id_{{ loop_index }}" value="{{ BlockPosition.Block.id }}" />
                <input type="hidden" class="target-id" name="target_id_{{ loop_index }}" value="{{ BlockPosition.target_id }}" />
                <input type="hidden" class="top" name="top_{{ loop_index }}" value="{{ BlockPosition.block_row }}" />
                {{ BlockPosition.Block.name }}
                <label class="anywherecheck">
                    (<input type="checkbox" class="anywhere" name="anywhere_{{ loop_index }}" value="1" {% if BlockPosition.anywhere == 1 %} checked="checked"{% endif %} />全ページ)
                </label>
            </div>
            {% set loop_index = loop_index + 1 %}
        {% endfor %}
    </td>
</tr>

/src/Eccube/Resource/template/admin/Content/layout.twig が管理画面のレイアウト管理のファイルです。
123行目ぐらいに TARGET_ID_CONTENTS_TOP 用の があるので、その をまるごと複製してから、
・TARGET_ID_CONTENTS_TOP を TARGET_ID_CONTENTS_OVER へ
・ContentsTopPosition を ContentsOverPosition へ
置き換えます。HTML は以上です。

次は、管理画面の JavaScript を追記します。

// /html/template/admin/assets/js/layout_design.js

{# [カスタマイズ] レイアウト追加 #}
$(document).ready(function(){
    var els = [
        '#position_0',
        '#position_1',
        '#position_2',
        '#position_3',
        '#position_4',
        '#position_5',
        '#position_6',
        '#position_7',
        '#position_8',
        '#position_9',
        '#position_10' // [カスタマイズ] レイアウト追加
    ];

/html/template/admin/assets/js/layout_design.js 40行目ぐらいに、
ID を配列で指定している箇所があるので、必要なIDを追記します。JavaScript は以上です。

最後に、管理画面の Css を追記します。

// /html/template/admin/assets/css/dashboard.css

/* [カスタマイズ] レイアウト追加 */
.design-layout td#position_10:before {content: "#contents_over"}

/html/template/admin/assets/css/dashboard.css 2899行目ぐらいに、
疑似要素の content に ID名を記述している箇所があるので追記します。

以上で完了です!

データベースの変更なしでこういった作業ができるようになっているので、
すごく進化しているな~!と感じることができるカスタマイズでした。

ただ管理画面はちょっと見ずらいと思うので、カスタマイズをどんどんやっていきたいですね。

このページのトップヘ