• Q: [EC-CUBE 2.x] EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法 TheVOS 2019.10.03
    A:

    지금 직장에서 참여하는 EC-CUBE이지만, 넷상에는 아직 정보가 적습니다.

    예를 들어 플러그인 작성에 원래 폼을 만들어도 SC_FormParam 클래스 를 사용하여 어떻게 확인하면 좋은 것인지 조사해도 좀처럼 나오지 않습니다.
    그래서 내가 독자적으로 조사한 속에서 조금씩 정보 제공 싶다고 생각합니다.

    ※ : EC-CUBE 버전은 2.12.2의 것을베이스로하고 있습니다.

    SC_FormParam의 기본적인 사용법

    SC_FormParam 클래스를 사용하려면 확장 지인 SC_FormParam_Ex 클래스를 인스턴스화하고 사용할 수 있습니다. 여기에서 POST 된 데이터를 설정하자.

    $ objFormParam = new SC_FormParam_Ex ();
    $ objFormParam-> setParam ($ _ POST);
    

    다음 내용의 유효성 검사 규칙을 추가합니다.
    여기에서는 예로 이름 (성, 이름)과 이메일 주소를 필수 입력하고 이메일 주소는 제대로 된 형식으로되어있는 것만 받아들이도록하려고합니다.

    $ objFormParam-> addParam ( '성' , 'sei' , '' , '' , array ( 'EXIST_CHECK' , 'NO_SPTAB' ));
    $objFormParam->addParam('名', 'mei', '', '', array('EXIST_CHECK','NO_SPTAB'));
    $objFormParam->addParam('メールアドレス', 'email', '', '', array('EMAIL_CHECK'));
    

    後半に挙げる「オプション」が必要な検証ルールについては、次のようにaddParam()の3番目の引数に設定します。

    //姓を3文字以内にしたい場合$objFormParam->addParam('姓, 'sei', 3, '', array('MAX_LENGTH_CHECK'));

    そして最後に検証作業。
    エラーがあると$arrErr変数にエラーが配列で格納されます。

    $arrErr = $objFormParam->checkError();
    

    検証ルールの最後のパラメーターにある配列型の文字のところがポイントなんですけど、ここに様々なルールを追加していくことでいろんな検証ルールを作ることができます。 以下に検証ルール一覧を載せてみたので実際に組み合わせて試してみてください。

    $objFormParam->addParam()の4番目の引数は入力値をmb_convert_kana()で変換するための変換オプション文字列を指定します。 変換オプションを指定した場合は、checkError()を実行する前に「$objFormParam->convParam()」を実行する必要があるので注意してください。

    SC_FormParam検証ルール一覧

    チェック項目 定数名 オプション エラー条件
    必須入力の判定 EXIST_CHECK   値の受け取りがない場合エラーを返す
    数字の判定 NUM_CHECK   入力文字が数字以外ならエラーを返す
    メールアドレス形式の判定 EMAIL_CHECK   メールアドレス形式でないならエラーを返す
    メールアドレスに使用できる文字の判定 EMAIL_CHAR_CHECK   メールアドレスに使用できない文字が含まれていたらエラーを返す
    携帯メールアドレスの判定 MOBILE_EMAIL_CHECK   SC_Helper_Mobile_Ex::gfIsMobileMailAddress()による判定結果でエラーを返す
    英字の判定 ALPHA_CHECK   入力文字が半角英字以外ならエラーを返す
    英数字の判定 ALNUM_CHECK   入力文字が英数字以外ならエラーを返す
    英数記号の判定 GRAPH_CHECK   入力文字が英数記号以外ならエラーを返す
    カタカナの判定 KANA_CHECK   入力文字がカナ以外ならエラーを返す
    カタカナの判定2 KANABLANK_CHECK   入力文字がカナ以外ならエラーを返す (タブ、スペースは許可する)
    URL形式の判定 URL_CHECK   URLを正規表現で判定する。デフォルトでhttp://があってもOK
    IPアドレスの判定 IP_CHECK   IPアドレスでない場合エラーを返す。改行コードが含まれている場合には配列に変換
    ドメインチェック DOMAIN_CHECK   ドメインの形式が正しくなければエラーを返す
    スペース、タブのみの判定 SPTAB_CHECK   スペース、タブ、改行のみの入力の場合エラーを返す
    スペース、タブの判定 NO_SPTAB   入力文字がスペース、タブ、改行を含んでいたらエラーを返す
    数字(非ゼロ)の判定 ZERO_CHECK   数値入力値で0が入力された場合エラーを返す
    ゼロで開始されている数値の判定 ZERO_START   0で始まる数値が入力されていたらエラーを返す
    ファイルの存在チェック FILE_EXISTS   入力パスのファイルが見つからなければエラーを返す
    ディレクトリ内のファイル存在チェック FIND_FILE ディレクトリ 指定ディレクトリ内に入力パスのファイルが見つからなければエラーを返す(デフォルトでIMAGE_SAVE_REALDIR)
    ディレクトリ存在チェック DIR_CHECK   입력 된 경로 문자의 디렉토리가 없으면 오류를 반환
    파일 이름의 판정 FILE_NAME_CHECK   입력 문자가 숫자, '_', '-'이외라면 오류를 반환
    파일 이름의 판정 (업로드 이외의 경우) FILE_NAME_CHECK_BY_NOUPLOAD   입력 문자가 숫자, '_', '-'이외라면 오류를 반환
    최대 문자 제한의 판정 MAX_LENGTH_CHECK 최대 길이 입력이 지정 문자보다 크면 오류를 반환
    최소 길이 제한의 판정 MIN_LENGTH_CHECK 최소 길이 입력이 지정 문자 미만이면 오류를 반환
    자리수의 판정 NUM_COUNT_CHECK 자리수 입력 문자의 수를 지정하게 자릿수 않으면 오류를 반환
    필수 선택 판정 SELECT_CHECK   풀다운 등으로 선택되어 있지 않으면 오류를 반환
    소문자로 변환 CHANGE_LOWER   입력 문자를 소문자로 변환
    다운로드 파일의 존재 확인 DOWN_FILE_EXISTS   DOWN_SAVE_REALDIR에 입력 경로의 파일이 없으면 오류를 반환

    도움이 되었으면 좋겠습니다.
    아직 EC-CUBE 구조를 잘 모르는 사람은 다음과 같은 책에서 배운보십시오.

  • Q: [EC-CUBE 2.x] 商品数や階層に関係なく全カテゴリーを表示させる方法 TheVOS 2019.04.10
    A:
    EC-CUBE 2.X:商品数や階層に関係なく全カテゴリーを表示させる方法

    EC-CUBEの備忘録。
    デフォルトのテンプレートだとサイドに表示されている商品カテゴリーですが、商品登録がない場合はカテゴリー名が表示されず、商品が登録されていたとしても親カテゴリーのページでなければ子カテゴリー名は表示されないようになっています。
    これを商品数や表示ページに関わらず、すべてのカテゴリーを常に全表示させる方法です。

    ※EC-CUBEのバージョンはVersion 2.12.4で動作確認しています。

    カテゴリーが全て表示されない

    画像はデフォルトのテンプレートのトップページをキャプチャしたものです。
    現在表示されているのはサンプルとして予め登録されている「食品」と「レシピ」という2つのカテゴリーですが、実は表示されてないだけで「雑貨」というカテゴリーも予め登録されています。
    また「食品」というカテゴリーですが、こちらは予め「なべ」と「お菓子」という子カテゴリーが登録されています。

    実際存在しているカテゴリーなのに表示されないのは、「雑貨」の場合は商品が登録されていないため。
    「なべ」と「お菓子」の場合は、親となる「食品」ページではなく現在トップページを表示しているという理由で、それぞれカテゴリーが表示されないようになっています。
    これを常に全てのカテゴリーが表示されるようにする方法です。

    まず/data/Smarty/templates/default/frontparts/bloc内のcategory.tplを変更します。

    category.tpl

    <!--{if $arrTree[cnt].display == 1}-->
    

    37行目辺り(ライセンスコメント含め)に「表示フラグがTRUEなら表示」というコメントがあり、そのすぐ下に上記のような記述があると思います。
    これを下記のハイライト表示部分のようにor trueを追記したものにします。

    category.tpl

    <!--{if $arrTree[cnt].display == 1 or true}-->
    

    ここまで行い表示を確認すると、先ほどはトップページでは出ていなかった子カテゴリーも表示されるようになります。
    次に商品数がない場合でもカテゴリーが表示されるようにします。
    /data/class/pages/frontparts/bloc内のLC_Page_FrontParts_Bloc_Category.phpを変更します。

    LC_Page_FrontParts_Bloc_Category.php

    $this->arrTree = $this->lfGetCatTree($this->tpl_category_id, true);
    

    74行目辺り(ライセンスコメント含め)に「カテゴリツリーの取得」というコメントがあり、そのすぐ下に上記のような記述があると思います。
    これを以下のハイライト表示部分のように、trueとなっていたものをfalseに変更します。

    LC_Page_FrontParts_Bloc_Category.php

    $this->arrTree = $this->lfGetCatTree($this->tpl_category_id, false);
    
    カテゴリーが全て表示される

    上記それぞれを変更して表示確認すると、画像のように先ほどは表示されていなかったカテゴリーが全て表示されるようになっているのを確認できます。

  • Q: [EC-CUBE 2.x] 商品名などで長くなったテキストを省略する方法 TheVOS 2019.04.10
    A:
    EC-CUBE 2.X:商品名などで長くなったテキストを省略する方法

    引き続きEC-CUBEの備忘録です。
    商品のタイトルや紹介文が指定した文字数以上になったときに「...」などを表示して、見栄えを揃える方法です。
    jQueryを使うとかCSSのtext-overflowなんかでも同じ事はできますが、Smartyを使って実装するものになります。

    ※EC-CUBEのバージョンはVersion 2.12.3になります。

    一部の商品の文字が長くて、バランスが悪くなる...

    画像はデフォルトのテンプレートで登録されているサンプル商品の「アイスクリーム」のタイトルと説明文を長くしたものです。
    見栄えを気にしないのであればこのままでも良いですが、他の商品とのバランスも考えてタイトル、商品説明文をそれぞれ2行で収まるぐらいの文字数になるよう設定し、更に省略された部分は「…」を表示させるようにします。

    今回サンプルとして変更するこの部分は「おすすめ商品」というブロックで表示されているので、管理画面の「デザイン管理 → PC → ブロック設定 → おすすめ商品」からテンプレートを変更します。
    FTPなどの場合は/data/Smarty/templates/default/frontparts/bloc/内のrecommend.tplが該当ファイルになります。

    recommend.tpl

    <div class="productContents">
      <h3>
        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
      </h3>
      <p class="sale_price">
        <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込): <span class="price"><!--{$arrProduct.price02_min_inctax|number_format}--> 円</span>
      </p>
      <p class="mini comment"><!--{$arrProduct.comment|h|nl2br}--></p>
    </div>
    

    上記はコードの一部を抜き出したもので、h3がタイトルを出力している部分、p class="mini comment"が紹介文を出力している部分になります。
    これをそれぞれ下記のように変更します。

    recommend.tpl

    <div class="productContents">
      <h3>
        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|mb_substr:0:20|h}--><!--{if $arrProduct.name|mb_strlen > 20}-->...<!--{/if}--></a>
      </h3>
      <p class="sale_price">
        <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込): <span class="price"><!--{$arrProduct.price02_min_inctax|number_format}--> 円</span>
      </p>
      <p class="mini comment"><!--{$arrProduct.comment|mb_substr:0:30|h|nl2br}--><!--{if $arrProduct.comment|mb_strlen > 30}-->...<!--{/if}--></p>
    </div>

    上記コードに変更(ハイライト部分が変更箇所)することで、タイトルは最大文字数が20文字でそれ以上は「…」を表示、商品説明は最大文字数が30文字でそれ以上は「…」が表示されるようになり、見栄えを確認すると以下のようになります。

    長すぎるテキストを省略して、「...」を表示

    文字数を変更する場合はそれぞれ数値を任意のものに変更し、省略時に表示したいテキストもifの部分で変更ができます。
    今回はトップページに表示されている「おすすめ商品」をサンプルにしましたが、Smartyであれば商品一覧などの他のテンプレートでも実装できます。

  • Q: [EC-CUBE 2.x] サイトデザインをPCで統一させる方法 TheVOS 2019.04.10
    A:
    EC-CUBE 2.X:サイトデザインをPCで統一させる方法

    EC-CUBEはもともとスマートフォンやモバイル用のテンプレートが用意されており、それぞれのデバイスで閲覧すると各テンプレートに振り分けらるようになっているのですが、それを無効にする方法です。
    この機能自体は良いと思うのですが、例えばモバイルまで手が回らないとか、単純に別テンプレートにする必要がないというときに。

    ※EC-CUBEのバージョンはVersion 2.12.3になります。

    iPhoneでの閲覧時

    画像はiPhoneでのサイト閲覧時をキャプチャしたもので、このように専用のテンプレートで表示されています。
    スマートフォンっぽい感じなのは良いですが、PCのデザインの雰囲気とかなり離れている場合は微妙です...。
    また、デフォルトでは思いっきりEC-CUBEのロゴが表示されていたりもします。(ここらへんはちゃちゃっとスマートフォン用のテンプレートを直せば良い話ですが)

    一番好ましいのはもちろんスマートフォンやモバイルのテンプレートもしっかりカスタマイズするのが好ましいですが、納期や予算の問題などでしない(できない)場合は、いっそのこと全てPC用のテンプレートにするのも手だと思います。

    今回は手っ取り早くできる方法で、具体的には予め設定されているユーザーエージェントを切るという方法になります。
    /data/class/内にあるSC_Display.phpというファイルの133行目あたりから下記のような記述があります。

    SC_Display.php

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param   $reset  boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE) {
      if (is_null(SC_Display_Ex::$device) || $reset) {
        $nu = new Net_UserAgent_Mobile();
        $su = new SC_SmartphoneUserAgent_Ex();
        if ($nu->isMobile()) {
          SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
        } elseif ($su->isSmartphone()) {
          SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
        } else {
          SC_Display_Ex::$device = DEVICE_TYPE_PC;
        }
      }
      return SC_Display_Ex::$device;
    }
    

    上記コードの一部を下記のように一部コメントアウトし、ユーザーエージェントを無効にします。
    これにより全てのデバイスで閲覧時にはPCのデザインで表示されるようになります。

    SC_Display.php

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param   $reset  boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE) {
      if (is_null(SC_Display_Ex::$device) || $reset) {
        $nu = new Net_UserAgent_Mobile();
        $su = new SC_SmartphoneUserAgent_Ex();
    //    if ($nu->isMobile()) {
    //      SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
    //    } elseif ($su->isSmartphone()) {
    //      SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
    //    } else {
            SC_Display_Ex::$device = DEVICE_TYPE_PC;
    //    }
      }
      return SC_Display_Ex::$device;
    }
    

    変更・アップロード後に再度スマートフォンやモバイルからアクセスすれば、PCのテンプレートで表示されるのが確認できます。
    上記ではスマートフォンとモバイルの両方のユーザーエージェントを無効にしていますが、モバイルはそのまま専用テンプレートで表示したいという場合は、スマートフォン部分のみ(DEVICE_TYPE_SMARTPHONE)をコメントアウトするなどしてください。

    ちなみに、以下のようにして単純に条件分岐の記述を取っ払って全てDEVICE_TYPE_PCにする方法でもいけます。
    ただ、確実に今後必要でない場合などはこの方法で良いですが、後々テンプレートを適応させる可能性が少しでもあるのであれば先程のコメントアウトを用いたほうがいいかと思います。

    SC_Display.php

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param   $reset  boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE) {
      return DEVICE_TYPE_PC;
    }
    

  • Q: [EC-CUBE 2.x] 商品ステータスを変更・追加する方法 TheVOS 2019.04.10
    A:
    EC-CUBE 2.X:商品ステータスを変更・追加する方法

    EC-CUBE自体をまだあまり触ったこともなければ、そんなに頻繁に使わないのもあって、しばらくすると簡単なことでもいろいろと忘れてしまうので備忘録。
    デフォルトだと「NEW」とか「残りわずか」などで登録されている商品ステータスを任意のものに変更・追加する方法です。

    ※EC-CUBEのバージョンはVersion 2.12.3になります。

    デフォルトの商品詳細ページ

    画像はEC-CUBEのデフォルトテンプレートの商品詳細ページです。
    現在「NEW」「残りわずか」「ポイント2倍」「オススメ」「限定品」とアイコンが出ているこの部分のテキストや画像を任意のものに変更します。

    商品ステータスのテキストを変更する

    テキストと画像のどちらを先に変えてももちろん問題ないですが、今回はテキストから変更します。
    デフォルトの画像を変えるだけの場合は、ここの部分は飛ばしてください。

    EC-CUBEの管理画面にログイン後、メニューにある「システム設定 → マスターデータ管理」を選択します。
    マスターデータ管理ページにいくと、プルダウンがあるので「mtb_status」を選択します。
    選択後にプルダウン横の「選択」ボタンを押すと下記のようなページになります。

    マスターデータ管理のmtb_status選択時

    見たまま、もともと登録されているものを変更したい場合は、IDと値の部分をそれぞれ変更します。
    これ以外で新たに登録したい場合は、その下にある「追加のデータ」部分に任意でIDと値(テキスト)を設定します。
    今回はサンプルとして「ID:6 値:テスト」を追加します。
    設定が終わったら、一番下にある「この内容で登録する」ボタンで商品ステータスのテキストが変更できます。
    変更後は、管理画面の商品登録ページなどにも商品ステータスの変更や追加がされています。

    商品ステータスの画像を変更する

    EC-CUBEの管理画面にログイン後、メニューにある「システム設定 → マスターデータ管理」を選択します。
    マスターデータ管理ページにいくと、プルダウンがあるので「mtb_status_image」を選択します。
    選択後にプルダウン横の「選択」ボタンを押すと下記のようなページになります。

    マスターデータ管理のmtb_status_image選択時

    テキスト変更のときと同様で、もともと登録されているものを変更したい場合はIDと値の部分をそれぞれ変更します。
    これ以外で新たに登録したい場合は、その下にある「追加のデータ」部分に任意でIDと値(画像へのパス)を設定します。
    今回はサンプルとしてID:1で登録されている「NEW」の画像をデフォルトから任意のものへ変更し、先程新たに追加した「テスト」にも画像を設定します。

    まずID:1の「NEW」アイコンの画像を変更します。
    値でimg/icon/ico_01.gifとなっている部分をimg/icon/ico_new.gifへ変更します。
    次に新たに追加した「テスト」にもアイコンを設定します。
    IDには先程登録した6を記述し、値にはimg/icon/ico_test.gifというように画像へのパスを記述します。
    設定が終わったら、一番下にある「この内容で登録する」ボタンで商品ステータスの画像が変更できます。

    ※IDは「mtb_status」に対応したものを記述してください。

    ※画像のパスは環境によって変更してください。

    ※デフォルトのテンプレート(Version 2.12.3)でテキスト名や画像名はそのままで、画像のみを差し替えたい場合は/html/user_data/packages/default/img/icon内に画像があるので、ここで同名のファイル名で上書けば変更されます。
    また、新たにアップする画像もデフォルトのテンプレートの場合にはここに画像を入れます。

    ※画像サイズが変わる場合は、各テンプレート(detail.tpllist.tplなど)で指定されているwidthheightも変更する必要があります。

    商品ステータス変更後の商品詳細ページ

    画像は商品ステータス変更後の商品詳細ページで、「NEW」の画像がオレンジのものから赤へと変更されており、「TEST」というアイコンが新たに追加されています。

Board Pagination Prev 1 Next
/ 1