ヾ【EC-CUBE】ノ 3系の管理画面を少しでも使いやすく...

2018年09月26日

EC-CUBE 4系が発表されましたね！
マスターアップは 10月とのことで、私もさっそくデモを試してみました。

3系からかなり進化していて、すごく乗り換えたいです...。
なかでも管理画面は見やすく、使いやすくなっており、
4系を操作したあと、3系を操作するとすごくイライラします（笑）

ということで、少しでも 3系を快適に使いたく、
管理画面をカスタマイズしてみたので紹介します。

確認は 3.0.16 で行っています。

サイドナビのCSSを改善

3系のデフォルト、見辛いですよね。
4系だとそれを反省して（？）、綺麗になっています。

なので、3系でも真似をして綺麗にしてみました。

eccube3admin_css

変更点は、
・子ナビのボーダーを取り、
・どの親の配下であるかわかりやすくするために背景色を白へ、
・開いてる親の文字色とウェイトを変更しわかりやすく、
・さらに現在アクティブであるナビを強調しました。

CSSはこんな感じに。

<style>
    #side > .nav li {
        transition: background-color .3s;
    }
    #side > .nav li a {
        transition: color .3s, font-weight .3s;
    }
    #side > .nav li a .cb {
        transition: color .3s;
    }
    #side > .nav li.active > a {
        color: #3F5467;
        font-weight: 700;
    }
    #side > .nav li.active > a .cb {
        color: inherit;
    }

    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)).active {
        background-color: #fff;
    }
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li.active > a,
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li.active > a:hover  {
        background-color: #3F5467 !important;
        color: #fff;
    }
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li {
        border: none;
    }

    #side > .nav > li.active li.active {
        background-color: #fff;
    }
    #side > .nav > li > ul > li.active li.active > a,
    #side > .nav > li > ul > li.active li.active > a:hover  {
        background-color: #3F5467 !important;
        color: #fff;
    }
    #side > .nav > li > ul > li > ul {
        background-color: transparent !important;
    }
    #side > .nav > li > ul > li > ul > li {
        border: none;
    }
    #side > .nav > li > ul > li > ul > li > a:not(:hover) {
        background-color: transparent !important;
        opacity: 1;
    }
</style>

:not(:nth-child(6)) と :not(:nth-child(7)) は、
ナビゲーションの増減によって値が変わるのが注意です。
デフォルトの内容だとそのままで大丈夫です

上のCSSを dashboard.css の一番下に追記するか、
管理画面の default_frame.twig の <//head> 直前に書くとよいかと思います。

商品登録画面のアコーディオンをすべて開かせておく

個人的にどうして表示・非表示のアコーディオンになっているのかわからないのですが、
商品カテゴリやタグ、詳細な設定、フリーエリアなどなどがアコーディオンになっていて開閉できます。
基本的にページを表示したときはそれが閉じており、編集する場合はワンクリックが必要です。
商品が数個程度なら問題ないですが、数が増えてくるとドンドン煩わしくなってきます;;

そこで、編集ページを表示したときに全部開いている状態にしてみました。

<script>
  $(function() {
      // 最初から開ける
      $('#detail_wrap .toggle').click();
  });
</script>

この jQuery を管理画面の product.twig の {% endblock javascript %} 直前に追記します。

商品マスター、受注マスター、会員マスターの初期表示

2系でも同じ悩みがありましたが、商品・受注・会員のマスターの初期表示は、
最小限のフォーム欄と検索ボタンのみです。
一覧を表示させるには検索ボタンを押さなければなりません。
これも最初の数回は良くても、だんだんと面倒になってくる作業の一つです...。

4系では、これを不便に思っていたのか改善されておりましたが、
3系でも依然としてこの問題が残っていました。

3系でも検索ボタンを押さずに一覧を表示させたい！ということで、
PHP にちょっと追記してあげると解決できました。
当初は4系を参考にカスタマイズしようと試みましたが、ググってしてみると、
フォーラムに解決案がありました！ → https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=18643&forum=10

追記するコードはたったこれだけ、

if (!$page_no) {
    $page_no = 1;
}

ファイルと場所は、
・CustomerController.php
・OrderController.php
・ProductController.php
の if (is_null($page_no) && $request->get('resume') != Constant::ENABLED) { の直前になります。

これでマスターのページを開いたときに一覧が表示されます！
ただ修正後、F5更新だとうまく行かなかったので、
一度だけ検索ボタンを押す必要があるみたいで、そこだけ注意が必要です。

タグ：: 管理画面カスタマイズ

ヾ【JS】ノ jQueryプラグイン「fitSidebar」とヘッダー固定時に余白を入れる方法

2018年09月14日

サイドバーを追従（固定）させるjqueryプラグイン「fitSidebar」を使用しています。
最近では css の position: sticky; だけで固定にすることができますが、縦長の場合は見切れてしまい、下の方にあるコンテンツがいちばん最後までスクロールしないと見れない問題があり、ちょっと気になります。
fitSidebar だとスクロールに合わせてコンテンツも移動するので大変便利です。
それぞれ用途に合わせて使い分けています。

そこで fitSidebar を使っていて、更にヘッダーも固定の場合、ページの下に行って、上に戻るときに、サイドバーの頭が見切れてしまう問題にぶつかりましたので、余白を設けるカスタマイズを行ってみました。

サンプル（jquery-plugin-fitSidebar-headerfixed-top-margin.html）

ヾ【EC-CUBE】ノ 3系商品、カテゴリー、規格を初期化する

2018年09月05日

以前 2.13系の記事を書きましたが、
今回はその 3系バージョンになります。

ググったところ、情報がなかったので・・・
手探りながらやってみました。

試したバージョンは 3.0.16 になります。

※データそのものが初期化されるので、
　運用中には絶対に実行しないでくださいm(_ _)m
　※また自己責任でお願いいたします。

商品を初期化

TRUNCATE TABLE `dtb_product`;
ALTER TABLE `dtb_product` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_category`;
ALTER TABLE `dtb_product_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_class`;
ALTER TABLE `dtb_product_class` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_image`;
ALTER TABLE `dtb_product_image` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_stock`;
ALTER TABLE `dtb_product_stock` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_tag`;
ALTER TABLE `dtb_product_tag` AUTO_INCREMENT = 1;

カテゴリーを初期化

TRUNCATE TABLE `dtb_category`;
ALTER TABLE `dtb_category` AUTO_INCREMENT = 1;

規格を初期化

TRUNCATE TABLE `dtb_class_category`;
ALTER TABLE `dtb_class_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_class_name`;
ALTER TABLE `dtb_class_name` AUTO_INCREMENT = 1;

PhpMyAdminの場合？

詳しくないので解説できませんが、データにロックがかかっているために、
上のSQLだけでは実行できませんでした。

SET FOREIGN_KEY_CHECKS=0;

というのを先頭に添える必要があります。

まとめると...

SET FOREIGN_KEY_CHECKS=0;

TRUNCATE TABLE `dtb_product`;
ALTER TABLE `dtb_product` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_category`;
ALTER TABLE `dtb_product_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_class`;
ALTER TABLE `dtb_product_class` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_image`;
ALTER TABLE `dtb_product_image` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_stock`;
ALTER TABLE `dtb_product_stock` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_tag`;
ALTER TABLE `dtb_product_tag` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_class_category`;
ALTER TABLE `dtb_class_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_class_name`;
ALTER TABLE `dtb_class_name` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_category`;
ALTER TABLE `dtb_category` AUTO_INCREMENT = 1;

これを3系をインストール後に行うと、商品やカテゴリー・規格のが初期化され、
IDを1から始めることができました！

※データそのものが初期化されるので、
　運用中には絶対に実行しないでくださいm(_ _)m
　※また自己責任でお願いいたします。