메뉴얼

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]댓글 


  • Q: [팁 & 노하우 나눔] 페이스북위젯 삽입하기 2018.12.15
    A:

    페이스북 위젯을 삽입하는 방법을 알아보겠습니다.

     

    1. 페이스북 위젯을 설정하는 곳으로 갑니다. ( https://developers.facebook.com/docs/plugins/page-plugin )

     

    2. 원하는 위젯모양을 만듭니다. 밑의 이미지를 보시면 쉽게 이해가 되실꺼예요.

     

    1.jpg

     

    3. 설정이 끝나면 하단 Get Code 를 누릅니다.

     

    4. IFRAME 코드를 복사하여 원하시는 곳에 삽입하면 완료!! 

     

    2.jpg

     


    Facebook [ko]댓글 

  • Q: [팁 & 노하우 나눔] 구글 캘린더 합치기 2018.12.12
    A:

    구글 캘린더로 일정관리를 하는 사람이라면 한번쯤 여러개로 나눠진 캘린더를 하나로 합쳐야 할 때가 생깁니다.

    저같은 경우는 처음에 일정관리에 심취해서 캘린더 수를 아주 자세하게 여러개로 나눠 놨었죠.

    그러나 최근에서야 단순함의 미학과 효율성에 눈을 뜨게 되었고, 10개가량 되던 캘린더들을 합쳤습니다. 딱 세개로.

    자 그럼,


    구글 캘린더 합치는 방법을 알아 봅시다.


    STEP1 캘린더 내보내기, Export


    1) 내보내고 싶은 캘린더 우측 삼각형 메뉴를 내려서 "Calendar Settings" 클릭


    2) 캘린더설정에서 Export Calendar 클릭하면,



    3) 캘린더이름_알수없는문자들@group.calendar.google.com.ics 라는 파일이 생성됩니다.



    STEP2 캘린더 읽어오기, Import


    1) 캘린더설정에서 Import Calendar 클릭하고,

    2) ics파일을 선택,

    3) Import 클릭하면


    4) 이벤트 갯수만큼 읽어오기 성공했다는 문구가 뜨면 끝.



    STEP3 캘린더 지우기, Unsubscribe


    1) 캘린더설정에서 Unsubscribe 클릭하면 없애고 싶은 캘린더가 사라집니다.

    이 없앤 캘린더를 복구하는 방법도 있습니다만 이 글에서는 다루지 않도록 할게요.



    여기까지 구글 캘린더 합치는 방법을 알아 봤습니다.

    Facebook [ko]댓글 

Board Pagination Prev 1 Next
/ 1