EC-CUBE 2.x

商品名などで長くなったテキストを省略する方法

by TheVOS posted Apr 10, 2019
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
Extra Form
原文出所 https://www.nxworld.net/cms/ec-omitting-text.html
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であれば商品一覧などの他のテンプレートでも実装できます。

Facebook [ja]コメント 


  • Q: [EC-CUBE 2.x] EC-CUBE에서 모든 페이지에서 로그인 체크하기 2019.11.11
    A:

    EC-CUBE는 Ver 2.12.6 환경입니다.


    지정 방법

    EC-CUBE는 로그인 판정 결과를 tpl_login라는 변수로 설정하고 일부 페이지가 기본적으로 존재합니다.

    예를 들어, 아래와 같이 소스를 grep하면 tpl_login에 값을 설정하는 부분을 찾을 수 있습니다.

    1
    2
    3
    4
    5
    6
    7
    $ grep -rn "\$this\->tpl_login =" *
    data/class/pages/products/LC_Page_Products_Detail.php:240:            $this->tpl_login = true;
    data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Login.php:43:        $this->tpl_login = false;
    data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Login.php:72:            $this->tpl_login = true;
    data/class/pages/shopping/LC_Page_Shopping_Payment.php:95:            $this->tpl_login = '1';
    data/class/pages/shopping/LC_Page_Shopping_Confirm.php:129:            $this->tpl_login = '1';
    data/class/pages/cart/LC_Page_Cart.php:200:            $this->tpl_login = true;

    위의 이름에서 짐작이 붙는 것처럼, 상품 상세 페이지 로그인 블록, 장바구니 페이지, ... 등 특정 페이지를 표시 할 때 사용되는 클래스인데,이 페이지에서는 변수 tpl_login에 설정된 로그인 있는지 (true) 아닌지 (false) 결과에 따라 다음과 같이 템플릿의 표시를 분리 할 수 ​​있습니다.

    1
    2
    3
    4
    5
    <!--{if $tpl_login}-->
    ログイン中です。
    <!--{else}-->
    ログインしていません。
    <!--{/if}-->

    그런데, 이것을 특정 페이지에 한정하지 않고 어떤 페이지에서도 사용할 수 있도록하자.

    페이지 볼 때마다 호출되는 LC_Page라는 기본 클래스 LC_Page (data/class/pages/LC_Page.php)가 있습니다. 그 확장 클래스인 LC_Page_Ex (data/class_extends/page_extends/LC_Page_Ex.php)에 다음과 같은 코드를 추가합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    public function init()
    {  
        parent::init();
        // ログイン判定
        $objCustomer = new SC_Customer_Ex();
        if ($objCustomer->isLoginSuccess() === true) {
            $this->tpl_login = true;
        }  

    이제 어떤 페이지에서나 tpl_login에 로그인 판정 결과가 저장 되도록 되었습니다.

    마찬가지로 LC_Page_Ex에 어떤 처리든 추가하면 전체 페이지 공통으로 정보를 설정하는 것이 가능합니다.  

    알아두면 유용한 곳이 많을 듯합니다.

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] EC CUBEで商品ごとに支払い方法を簡単に分ける 2019.10.28
    A:
    EC CUBEで支払い方法を分けるのに大きなカスタマイズが必要だと思っていましたが、
    以下の設定で簡単に振り分けが出来ましたのでご紹介します。

    まずEC CUBE管理画面にログインし、システムデータ>マスターデータに進みます。
    マスターデータから「mtb_product_type」を選択します。

    ffd01.JPG
    デフォルトでは1と2が設定されていますので、追加のデータにIDと値を記載します。

    ffd02.JPG

    追加できたら基本情報>支払い方法に進み任意の設定を追加します。ffd03.JPG

    その後配送方法設定に進み、それぞれの取扱商品種別&取扱支払方法を設定した配送方法を作ります。
    同じ名称は設定できないようなので「ゆうパック」「郵パック」のようにしました。

    ffd04.JPG
    ffd05.JPG

    もし別々の商品を同じカゴにいれた場合は別々に決済をしてもらう形になります。
    カスタマイズなしでここまでできるのは便利だな~とおもいました!

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法 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内に入力パスのファイルが見つからなければエラーを返す

    お役に立てば幸いです。

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] 商品数や階層に関係なく全カテゴリーを表示させる方法 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);
    
    カテゴリーが全て表示される

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

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] 商品名などで長くなったテキストを省略する方法 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であれば商品一覧などの他のテンプレートでも実装できます。

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] サイトデザインをPCで統一させる方法 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;
    }
    

    Facebook [ja]コメント 

  • Q: [EC-CUBE 2.x] 商品ステータスを変更・追加する方法 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」というアイコンが新たに追加されています。

    Facebook [ja]コメント 

Board Pagination Prev 1 Next
/ 1