메뉴얼

EC-CUBE 2.x

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

by TheVOS posted Apr 10, 2019
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
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 [ko]댓글 


List of Articles
카테고리 아니오 제목 날짜 조회 수
팁 & 노하우 나눔 39 페이스북위젯 삽입하기 file 2018.12.15 47
클래스 38 클래스의 사용 2019.10.03 93
클래스 37 클래스의 구조 2019.10.03 35
클래스 36 클래스와 객체의 기초 file 2019.10.03 56
메일 서비스 35 메일 사용자 설명서 2019.03.29 61
팁 & 노하우 나눔 34 구글 캘린더 합치기 1 file 2018.12.12 427
EC-CUBE 3系 33 관리 화면의 사이드 메뉴에 항목 추가하는 방법 file 2019.11.11 165
EC-CUBE 4系 32 管理機能一覧 2020.11.12 30
EC-CUBE 3.x 31 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ file 2019.04.10 863
EC-CUBE 2.x 30 商品数や階層に関係なく全カテゴリーを表示させる方法 file 2019.04.10 260
EC-CUBE 2.x » 商品名などで長くなったテキストを省略する方法 file 2019.04.10 45
EC-CUBE 2.x 28 商品ステータスを変更・追加する方法 file 2019.04.10 62
EC-CUBE 2系 27 単体テストガイドライン 2019.09.28 86
EC-CUBE 2系 26 リファクタリングガイドライン 2019.09.28 153
EC-CUBE 4系 25 フロント機能一覧 2020.11.12 33
EC-CUBE 3.x 24 デフォルトのtitleを任意のものに変更する方法 file 2019.04.10 228
EC-CUBE 2.x 23 サイトデザインをPCで統一させる方法 file 2019.04.10 52
EC-CUBE 2系 22 イベントセット販売プラグインマニュアル file 2019.11.07 131
EC-CUBE 3.x 21 titleの並びや区切り記号を変更する方法 file 2019.04.10 96
메뉴얼 20 THEVOS Youtube BOARD SKIN 사용 설명 2018.11.11 116
Board Pagination Prev 1 2 Next
/ 2