カテゴリアイコンプラグイン for EC-CUBE 4

手軽にアイコンを登録できます。

カテゴリ拡張系プラグインをご検討の場合におすすめのプラグインはこちら

【提供機能】
　■カテゴリにアイコンを設定する機能
　　・カテゴリ5階層まで対応

　■デバイス単位での表示制御する機能
　　・スマートフォン表示 / 非表示
　　・PC表示 / 非表示

デモ

　ご購入前にこちらで動作をご確認頂けます。
　管理画面よりアイコンを設定しショップ側の挙動を是非ご確認ください。
　デモサイトは4.0ですが、4.1でも同様の挙動となります。
　※脆弱性対策のため、デモサイトではtwigの編集はできません。

(1)表示したいデバイスを設定する
下記画面で表示したいデバイスを設定してください。
両方表示、PCのみ表示、SPのみ表示などお好みの設定ができます。

画面名　　:オーナーズストア > プラグイン > プラグイン一覧　>　カテゴリアイコンプラグイン

(2)アイコンを登録する
下記画面で表示したいアイコンを設定してください。

画面名　　:オーナーズストア > プラグイン > プラグイン一覧　>　カテゴリアイコンプラグイン　>　カテゴリアイコン設定

(3)PCのスニペットを設定する
※本項目が不要な場合は飛ばして「(4)SPのスニペットを設定する」へ進んでください。
下記画面で設定してください。

　画面名　　:コンテンツ管理 > ブロック管理 > カテゴリナビ(PC)

①カテゴリ名の表示部分のスニペットを書き換える
○書き換え前
<a href="{{ url('product_list') }}?category_id={{ Category.id }}">
    {{ Category.name }}
</a>

○書き換え後
<a href="{{ url('product_list') }}?category_id={{ Category.id }}" class="l-categorynav_list_pc">
    <span id="category_icon_pc_{{ Category.id }}" class="l-categorynav_title">{{ Category.name }}</span>
</a>


②最終行に下記スニペットを追記する
{{ include('JoolenCategoryIcon4/Resource/template/default/category_icon_pc.twig', ignore_missing = true) }}



(4)SPのスニペットを設定する
下記画面で設定してください。

　画面名　　:コンテンツ管理 > ブロック管理 > カテゴリナビ(SP)

①カテゴリ名の表示部分のスニペットを書き換える
○書き換え前
<a href="{{ url('product_list') }}?category_id={{ Category.id }}">
    {{ Category.name }}
</a>

○書き換え後
<a href="{{ url('product_list') }}?category_id={{ Category.id }}" class="l-categorynav_list_sp">
    <span id="category_icon_sp_{{ Category.id }}" class="l-categorynav_title">{{ Category.name }}</span>
</a>


②最終行に下記スニペットを追記する
{{ include('JoolenCategoryIcon4/Resource/template/default/category_icon_sp.twig', ignore_missing = true) }}

無料連携プラグイン

<【無料】テンプレート編集サポートプラグイン>
　○プラグインテンプレート管理プラグイン for EC-CUBE 4
　　→一緒にご導入いただくことで、プラグインインストール時の初期コードを確認しつつ編集できます。
　　　誤って必要なhtmlタグを削除して保存してしまった場合や、一部元に戻したい場合に便利です。

カテゴリ拡張系プラグインをご検討の場合はこちらもおすすめです

<カテゴリにバナー画像とテキストを表示したい場合>
　○カテゴリバナー&テキストプラグイン for EC-CUBE 4
　　→カテゴリの表現の幅が広がります。
　　　バナー画像は複数登録した場合はスライダーで表示できます。

一般情報