EC-CUBE：ブロック管理の新着商品を改装する

2019.01.17
ECサイト作成
EC-CUBE4, ECシステム, ブロック管理, 仕様, 備忘録, 改修, 改装, 新着商品

1. EC-CUBE：ブロック管理の新着商品を改装する

EC-CUBE：ブロック管理の新着商品を改装する

久しぶりにEC-CUBEを弄ってみました。

元々、HTTPS化で企業ポータルが死んだから「折角だからやってみよう！」と実装に踏み切ったサイトであるため正直言って売る事に拘っていません。
まぁあまりいい事ではないのですが…。

そんな折、某企業さんから電話セールスがありました。

セールス：「うちのサイトに商品広告を出しませんか？」
わたし　：「いやぁ～今のところ必要ないと思ってます。」
セールス：「ジェラートとか売れると思うんですよね。」
わたし　：「あっ、それEC-CUBEのテンプレ商品です。うちジェラート扱ってないです…。」

形だけ作ったのでTOPページ弄ったりしてなかったんですよね。
と言うことで、また必要に迫まれての更新です。

意外とわかりずらいブロック管理

慣れないコンソールはやはり理解に時間が掛かります。

ただ、Laravelを触っていたおかげでとても推測しやすかったです。
{{ hogehoge }} はPHPの呼出しだよとかね。

ページ構成は全体的にブロックで構成されていて、ブロック管理のタブ内にはページに差し込む固定値ブロックが収納されています。

今回はこの中の新着情報(ジェラートが載っていた場所)を修正します。

新着情報の中身

こんな感じに作りました。

{#
This file is part of EC-CUBE

Copyright(c) LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}

<div class="ec-role">
    <div class="ec-newItemRole">
        <div class="ec-newItemRole__list">
            <div class="ec-newItemRole__listItem">
                <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
                    <span class="ec-secHeading__en">{{ 'NEW ITEM'|trans }}</span>
                    <span class="ec-secHeading__line"></span>
                    <span class="ec-secHeading__ja">{{ '新着商品'|trans }}</span>
                    <a class="ec-inlineBtn--top" href="{{ url('product_list') }}">{{ 'more'|trans }}</a>
                </div>
            </div>
            <div class="ec-newItemRole__listItem">
                <a href="{{ url('product_detail', {'id': '7'}) }}">
                    <img src="{{ asset('1000/1/4525.jpg', 'save_image') }}">
                    <p class="ec-newItemRole__listItemTitle">{{ 'ストーンコート深型フライパン28㎝'|trans }}</p>
                    <p class="ec-newItemRole__listItemPrice">{{ '￥7,344(税込)'|trans }}</p>
                </a>
            </div>
            <div class="ec-newItemRole__listItem">
                <a href="{{ url('product_detail', {'id': '11'}) }}">
                    <img src="{{ asset('1001/1/kai_neop_set3.jpg', 'save_image') }}">
                    <p class="ec-newItemRole__listItemTitle">{{ '除菌消臭スプレー 貝の粉雪 Neoプレミアム'|trans }}</p>
                    <p class="ec-newItemRole__listItemPrice">{{ '￥3,240(税込)'|trans }}</p>
                </a>
            </div>
            <div class="ec-newItemRole__listItem">
                <a href="{{ url('product_detail', {'id': '2944'}) }}">
                    <img src="{{ asset('1000/1/bio-007.jpg'|no_image_product , 'save_image') }}">
                    <p class="ec-newItemRole__listItemTitle">{{ '密閉型保存容器 8300ml'|trans }}</p>
                    <p class="ec-newItemRole__listItemPrice">{{ '￥2,700(税込)'|trans }}</p>
                </a>
            </div>
        </div>
    </div>
</div>

This file is part of EC-CUBE

http://www.lockon.co.jp/

For the full copyright and license information, please view the LICENSE

file that was distributed with this source code.

<span class="ec-secHeading__en">{{ 'NEW ITEM'|trans }}</span>

<span class="ec-secHeading__ja">{{ '新着商品'|trans }}</span>

<a class="ec-inlineBtn--top" href="{{ url('product_list') }}">{{ 'more'|trans }}</a>

</div>

<p class="ec-newItemRole__listItemTitle">{{ 'ストーンコート深型フライパン28㎝'|trans }}</p>

<p class="ec-newItemRole__listItemPrice">{{ '￥7,344(税込)'|trans }}</p>

</a>

</div>

<p class="ec-newItemRole__listItemTitle">{{ '除菌消臭スプレー貝の粉雪 Neoプレミアム'|trans }}</p>

<p class="ec-newItemRole__listItemPrice">{{ '￥3,240(税込)'|trans }}</p>

</a>

</div>

<p class="ec-newItemRole__listItemTitle">{{ '密閉型保存容器 8300ml'|trans }}</p>

<p class="ec-newItemRole__listItemPrice">{{ '￥2,700(税込)'|trans }}</p>

</a>

</div>

最初の<div>より前は EC-CUBE提供元によるただのメモです。削除しても動作に影響はありませんでした。

スクリプトの解説

以下、1つのリンクを解体してみます。(divはクラスの指定に利用しているだけなので解説から除外)

<div class="ec-newItemRole__listItem">
    <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
        <a href="{{ url('product_detail', {'id': '2944'}) }}">
            <img src="{{ asset('1000/1/bio-007.jpg'|no_image_product , 'save_image') }}">
            <p class="ec-newItemRole__listItemTitle">{{ '密閉型保存容器 8300ml'|trans }}</p>
            <p class="ec-newItemRole__listItemPrice">{{ '￥2,700(税込)'|trans }}</p>
        </a>
    </div>
</div>

<p class="ec-newItemRole__listItemTitle">{{ '密閉型保存容器 8300ml'|trans }}</p>

<p class="ec-newItemRole__listItemPrice">{{ '￥2,700(税込)'|trans }}</p>

</a>

</div>

<a href=”{{ url(‘product_detail’, {‘id’: ‘2944’}) }}“> hogehogehoge…. </a>

商品登録時に採番されたidで商品URLを作成しています。

上記例では【https://ドメイン/products/detail/2944】というURLを作成します。

画像URLを作成しています。

EC-CUBE標準のテンプレ商品では画像は【html/upload/save_image/】に格納されています。
私は管理を考えて画像を【html/upload/save_image/仕入先フォルダ/枚数/】の中に格納しました。

色々弄ってみた結果、第二因子の[ save_image ] が【https://ドメイン/html/upload/save_image/】の情報を提供していると考えていいようです。その為、assetの第一因子にsave_image以下のフォルダ構成とともに画像ファイルを指定すると深い階層を作っても画像リンクが提供されます。

ちなみに、間違えた書き方をすると404エラーとなります。

<p class=”ec-newItemRole__listItemTitle”>{{ ‘密閉型保存容器 8300ml’|trans }}</p>
<p class=”ec-newItemRole__listItemPrice”>{{ ‘￥2,700(税込)’|trans }}</p>

画像の下に表示されるテキスト情報の記載場所です。

この感じだと、カスタマイズすれば商品IDから商品名や価格を引っ張れるような気はしますが、今回は体裁を整えるだけなのでそこまでの作り込みはしません。

まとめ

まだ中身を理解していないのでカスタマイズに着手しませんが {{ hogehoge }} でPHPを呼び出すなどLaravel に近いなと感じています。と言うことは、色々弄り倒せばいろんなこと出来るんじゃないかなと想像できます。

MYSQLから呼び出す方法が分かれば自由度はかなり上がりますね。

EC-CUBE：ブロック管理の新着商品を改装する