메뉴얼

EC-CUBE 3.x

titleの並びや区切り記号を変更する方法

by TheVOS posted Apr 10, 2019
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
원문출처 https://www.nxworld.net/cms/ec-change-ti...rator.html
EC-CUBE 3.X:titleの並びや区切り記号を変更する方法

EC-CUBE 3.Xは、デフォルトのテンプレートだとtitle表示が「ショップ名 / ページ名」という形になっていますが、それを任意の並びにしたり区切り記号を変更したりする方法です。

※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルトのテンプレートを使っている想定になります。

※変更した内容が反映されない場合は、管理画面の「コンテンツ管理 < キャッシュ管理」にある「キャッシュクリア」ボタンを押して再度確認してみてください。

公式サイトで公開されているデモを見ても確認できますが、例えばデフォルトだとtitleの表示がTOPページは「ショップ名 / TOPページ」、当サイトについてページでは「ショップ名 / 当サイトについて」といったように、先頭にショップ名が表示、区切り記号は「/」を使用、その後ページ名を表示という形になっています。
このままでも気にならないという人ももちろんいるでしょうが、並びと区切り記号を変更したいという時は以下を変更することで任意の表示にできます。

まず、デフォルトテンプレートではtitle部分を表示している記述はdefault_frame.twigというファイルになるので、その中にある下記のような記述(27行目辺り)を探します。

default_frame.twig

<title>{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}</title>

今回は例として「ショップ名 / ページ名」の表示を「ページ名 - ショップ名」に変更してみます。
上記の記述を下記のように変更し、{{ BaseInfo.shop_name }}{{ title }}といったショップ名やページタイトルをそれぞれ表示するタグの並びを入れ替え、区切り記号も「/」からサンプルコードのハイライト表示部分のように「-」を使う形に変更します。

default_frame.twig

<title>{% if subtitle is defined and subtitle is not empty %}{{ subtitle }} - {% elseif title is defined and title is not empty %}{{ title }} - {% endif %}{{ BaseInfo.shop_name }}</title>

上記変更後にページを確認(必要であればキャッシュクリアをしてから)すると各ページのtitle部分が「ページ名 - ショップ名」という形に変更されているのを確認でき、例えばTOPページの場合は「TOPページ - ショップ名」へ、当サイトについてページであれば「当サイトについて - ショップ名」といった形になります。

Facebook [ko]댓글 

TAG •

  • Q: [EC-CUBE 4.x] EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까? 2019.11.14
    A:

    설치 한 디렉토리에 .env라는 파일이 있습니다.

    거기에 DATABASE_URL라는 항목이 있습니다.


    「 DATABASE_URL = mysql://사용자 이름:암호@호스트 이름/데이터베이스 이름 」 형식으로 저장되어 있습니다.

    Facebook [ko]댓글 

  • 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 [ko]댓글 

  • 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 [ko]댓글 

  • 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 [ko]댓글 

  • Q: [EC-CUBE 3.x] デフォルトのtitleを任意のものに変更する方法 2019.04.10
    A:
    EC-CUBE 3.X:デフォルトのtitleを任意のものに変更する方法

    EC-CUBE 3.Xでデフォルトでtitle部分に表示されるものを任意で削除・変更したり、あらかじめ用意されているページのページ名(テンプレート名)を任意のものに変更する方法です。

    ※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルトのテンプレートを使っている想定になります。

    ※変更した内容が反映されない場合は、管理画面の「コンテンツ管理 < キャッシュ管理」にある「キャッシュクリア」ボタンを押して再度確認してみてください。

    「TOPページ」の表記を消す

    デフォルトのテンプレートをそのまま使用している場合、TOPページのtitleは「ショップ名 / TOPページ」という表示になっています。
    これはこれで今見てるのがTOPページだとわかりやすいのですが、個人的にはわざわざTOPページという表記は必要ないと思うので消してみます。

    まず、デフォルトテンプレートではtitle部分を表示している記述はdefault_frame.twigというファイルになるので、その中にある下記のような記述(27行目辺り)を探します。

    default_frame.twig

    <title>{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}</title>
    

    上記記述を見つけたら、ここに条件分岐を追記していきます。
    具体的にはtitleの中にTOPページの場合にという条件文を記述(コードハイライト部分)し、TOPページにはショップ名のみを表示させ、その他のページにはデフォルトで使われているショップ名とページ名が表示されるようにします。

    default_frame.twig

    <title>
    {% if PageLayout.url == "homepage" %}
      {{ BaseInfo.shop_name }}
    {% else %}
      {{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}
    {% endif %}
    </title>
    

    ※インデントと改行はソースがわかりやすいように入れているだけなので、必要なければ取り除いて問題ないです。

    上記変更後にページを確認(必要であればキャッシュクリアをしてから)すると、TOPページのtitleはショップ名のみが表示されているのを確認でき、他のページに関してはこれまで通りショップ名とページ名が表示されているのを確認できます。

    デフォルトのページ名を変更する

    これは自分がやり方を知らないだけの可能性もありますが、EC-CUBEは新たに自分で作成したページは任意のページ名をつけることができますが、例えば「当サイトについて」や「プライバシーポリシー」のように、あらかじめ用意されているものについては任意のページ名に変更することができません。
    上で紹介したように条件分岐を利用してテンプレート側で直接変更ということもできなくはないですが、その方法だと表側だけ任意のものに変更されて、管理画面のページ管理などでは結局元の名称のままでページ名(テンプレート名)が表示されてしまい微妙です...。

    これを表でtitleとして表示されるのはもちろん、管理画面でもちゃんと任意で付けたページ名で表示されるようにしたいという時にはデータベースの記述を変更することで可能になります。

    ※データベースは間違った個所を変更してしまったりすると最悪の場合元に戻せないなど起こりうるので、不安な人はあらかじめバックアップをとるなどして作業してください。

    ここでは「当サイトについて」というページ名を「会社概要」というページ名に変更する形で紹介します。

    まず、phpMyAdminなどでデータベースにアクセスして自身の環境でEC-CUBEで利用しているデータベースの情報を開き、その中にある「dtb_page_layout」というテーブルを表示します。
    テーブルの詳細画面が表示されるとデフォルトであればズラッと各ページの情報や項目が表示されると思うので、その中にある「page_name」の項目を探して、且つ「当サイトについて」と記述されている部分を探します。
    あとは、一覧画面で直接もしくは更に詳細ページに移動してから「当サイトについて」と表示されているところを「会社概要」に変更すれば、表側のtitleや管理画面のページ管理などのページ名表示が変更されているのを確認できます。

    今回は例として「当サイトについて」を変更する形で紹介しましたが、同じようにすれば例えば「プライバシーポリシー」を「個人情報保護方針」にするだとか、「MYページ」という表記はすべて「マイページ」といったカタカナ表記のみにしたいといったことが可能です。

    Facebook [ko]댓글 

  • Q: [EC-CUBE 3.x] titleの並びや区切り記号を変更する方法 2019.04.10
    A:
    EC-CUBE 3.X:titleの並びや区切り記号を変更する方法

    EC-CUBE 3.Xは、デフォルトのテンプレートだとtitle表示が「ショップ名 / ページ名」という形になっていますが、それを任意の並びにしたり区切り記号を変更したりする方法です。

    ※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルトのテンプレートを使っている想定になります。

    ※変更した内容が反映されない場合は、管理画面の「コンテンツ管理 < キャッシュ管理」にある「キャッシュクリア」ボタンを押して再度確認してみてください。

    公式サイトで公開されているデモを見ても確認できますが、例えばデフォルトだとtitleの表示がTOPページは「ショップ名 / TOPページ」、当サイトについてページでは「ショップ名 / 当サイトについて」といったように、先頭にショップ名が表示、区切り記号は「/」を使用、その後ページ名を表示という形になっています。
    このままでも気にならないという人ももちろんいるでしょうが、並びと区切り記号を変更したいという時は以下を変更することで任意の表示にできます。

    まず、デフォルトテンプレートではtitle部分を表示している記述はdefault_frame.twigというファイルになるので、その中にある下記のような記述(27行目辺り)を探します。

    default_frame.twig

    <title>{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}</title>
    
    

    今回は例として「ショップ名 / ページ名」の表示を「ページ名 - ショップ名」に変更してみます。
    上記の記述を下記のように変更し、{{ BaseInfo.shop_name }}{{ title }}といったショップ名やページタイトルをそれぞれ表示するタグの並びを入れ替え、区切り記号も「/」からサンプルコードのハイライト表示部分のように「-」を使う形に変更します。

    default_frame.twig

    <title>{% if subtitle is defined and subtitle is not empty %}{{ subtitle }} - {% elseif title is defined and title is not empty %}{{ title }} - {% endif %}{{ BaseInfo.shop_name }}</title>
    
    

    上記変更後にページを確認(必要であればキャッシュクリアをしてから)すると各ページのtitle部分が「ページ名 - ショップ名」という形に変更されているのを確認でき、例えばTOPページの場合は「TOPページ - ショップ名」へ、当サイトについてページであれば「当サイトについて - ショップ名」といった形になります。

    Facebook [ko]댓글 

  • 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 [ko]댓글 

  • 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 [ko]댓글 

  • 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 [ko]댓글 

  • 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 [ko]댓글 

  • Q: [EC-CUBE 3.x] 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ 2019.04.10
    A:
    EC-CUBE 3.X:新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ

    EC-CUBE 3.Xではもともと用意されているページを利用するだけでなくオリジナルで新規ページを追加することもできるのですが、その場合作成したページのURLに「user_data」が付与されています。
    この「user_data」という部分をURLから消す方法とそれに関連して新規作成したページのURLをテンプレートタグを使って出力する方法です。

    ※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルトのテンプレートを使っている想定になります。

    新規作成したページURLから「user_data」を消す

    EC-CUBEは例えばプライバシーポリシーや特定商取引法に基づく表記などのようにECサイトであれば必要なページはある程度最初から用意されており、さらに表示させる要素やスタイル調整などもある程度できるようにはなっていますが、それらを利用する以外にもオリジナルのページを新たに作成できるようにもなっています。

    ただ、オリジナルページはコンテンツをはじめ、名称・URL・ファイル名なども自由に決めることができるようになってはいるのですが、デフォルトではURLに「user_data」というのが付与されます。
    特にこだわり等もなければそのままでいいですが、できれば消したいという要望がほとんどなので、この「user_data」を消してみます。
    URLから「user_data」を消す方法としては、ファイル移動・DB操作・.htaccessを利用などのいろいろと方法はあるのですが、ここではルーティングを変更する方法を紹介します。

    まずsrc/Eccube/ControllerProviderにあるFrontControllerProvider.phpを開き、41行目に辺りにある下記の記述を見つけます。

    FrontControllerProvider.php

    
    	// user定義
    	$c->match('/'.$app['config']['user_data_route'].'/{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '[0-9a-zA-Z_]+')->bind('user_data');
    	
    	

    上記記述を見つけたら、$c->match('/'.$app['config'] ~の部分を削除もしくはコメントアウトして、その代わりに下記を記述します。

    FrontControllerProvider.php

    
    	// user定義
    	$c->match('/' . '/{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '[0-9a-zA-Z_]+')->bind('user_data');
    	
    	

    上記を記述後に作成したページを確認すると、例えば「example」というURLで作成したページの場合はデフォルトでは「http://example.com/html/user_data/example」のようになっていますが、それが「http://example.com/html/example」というように「user_data」がないURLになっているのを確認できます。

    この方法は以下EC-CUBEのフォーラムで紹介されていた方法です。

    URLを出力するテンプレートタグ

    a要素でリンクを設定する際など、例えばお問い合わせページであれば「http://example.com/contact」とか「/contact」のような記述で設定するのでも一応ページ遷移もできはするのですが、こういったCMSなどはURLを出力するテンプレートタグなどが用意されていることがほとんどですし、それらを利用していなかったことで後々大変になることもあったりするので、基本的にはそちらを利用するべきです。

    EC-CUBEでURLを出力するテンプレートはそれぞれ下記のような記述になり、下記は上からTOPページ・お問い合わせ・商品一覧のURLを出力させるものになります。
    基本的には赤文字部分の中をページ毎に変更し、デフォルトのテンプレートとして用意されている商品一覧やプライバシーポリシーのようにURLの中にディレクトリが複数あるような場合は_を利用して記述します。

    
    	<!-- TOPページ -->
    	<a href="{{ url('homepage') }}">TOP</a>
    
    	<!-- お問い合わせ -->
    	<a href="{{ url('contact') }}">お問い合わせ</a>
    
    	<!-- 商品一覧 -->
    	<a href="{{ url('product_list') }}	">商品一覧</a>
    	
    	

    上の流れで行くと新規作成したページも{{ url('xxx') }}と記述して「xxx」の部分を作成した際に決めたURLにすれば問題ないように感じますが、実はこれだと意図した形には出力されず、例えば「example」というURLにしたからといって{{ url('example') }}と記述してもリンク先は404となってしまいます。
    新規作成したページのURLを出力したい時はこれまでとは少し違った記述方法になり、例えば「example」というURLにしたページのURLを出力するときは下記のように記述をします。

    	
    	<a href="{{ url(app.config.user_data_route, {'route': 'example'}) }}">サンプル</a>
    	
    	

    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