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]コメント 


List of Articles
カテゴリー 番号 タイトル 日付 閲覧数
EC-CUBE 3.x 39 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ file 2019.04.10 1216
EC-CUBE 2.x 38 EC CUBEで商品ごとに支払い方法を簡単に分ける file 2019.10.28 683
EC-CUBE 2系 37 EC-CUBE2.13カスタマイズ:新しいページを追加する file 2019.11.11 661
EC-CUBE 2系 36 EC-CUBE 2系の「もっと見る」を簡潔に 2020.01.02 638
EC-CUBE 4系 35 EC-CUBE4系で管理画面に新規メニュー項目を追加する方法 file 2019.10.28 517
ヒント&ノウハウ共有 34 구글 캘린더 합치기 1 file 2018.12.12 504
EC-CUBE 2.x 33 EC-CUBE에서 모든 페이지에서 로그인 체크하기 2019.11.11 470
EC-CUBE 4.x 32 EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까? 2019.11.14 401
EC-CUBE 2.x 31 商品数や階層に関係なく全カテゴリーを表示させる方法 file 2019.04.10 270
EC-CUBE 3.x 30 デフォルトのtitleを任意のものに変更する方法 file 2019.04.10 242
EC-CUBE 3系 29 관리 화면의 사이드 메뉴에 항목 추가하는 방법 file 2019.11.11 182
EC-CUBE 2系 28 リファクタリングガイドライン 2019.09.28 179
EC-CUBE 2系 27 EC-CUBE標準規約 2019.09.28 164
EC-CUBE 2系 26 EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる 2020.01.02 152
EC-CUBE 2系 25 イベントセット販売プラグインマニュアル file 2019.11.07 152
EC-CUBE 2系 24 ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説! file 2019.10.10 151
EC-CUBE 2.x 23 EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法 2019.10.03 137
マニュアル 22 THEVOS Youtube BOARD SKIN 사용 설명 2018.11.11 129
CSS 21 Css 텍스트 외곽선 처리하기, Stroke 2019.11.28 128
EC-CUBE 2系 20 単体テストガイドライン 2019.09.28 120
Board Pagination Prev 1 2 Next
/ 2