CS-Cart.jp開発者ドキュメント
  • はじめに
  • Getting Started
    • CS-Cart開発者向け注意事項
    • CS-Cartの構成
    • デバッグ方法
  • コア
    • Hooks
    • コントローラー
      • Pre&Post コントローラー
    • データベース
      • データベースの構造と命名規則
      • データベース・プレイスホルダー
      • 他のデータベースへの接続
    • ショップフロント
      • ブロック
      • blockメインスキーマ—
      • Dynamic Objects
      • ajaxリクエストの使用方法
      • 特別なCSSセレクター
      • マイクロフォーマット Microformats
      • 通知システム
      • ツールチップ
    • 設定
    • コア関数
    • イベントの通知
    • 言語変数
    • スキーマー
  • アドオン開発
    • フック
      • PHPフック
      • テンプレートフック
    • アドオンチュートリアル
      • 「Hello World」チュートリアル
      • Advanced Add-on チュートリアル
      • 商品リスト、詳細ページのカスタムテンプレートを作成
      • 支払方法の開発
    • アドオンの管理プロセス
    • Add-on スキーマー
      • アドオンの互換性
      • 他のアドオンとの競合・依存設定
    • APIの拡張
    • スキーマーの拡張
    • アドオンのディレクトリ構造
    • アドオンの言語変数
    • .poファイルによる言語ファイルの作成
  • テーマ開発
    • テーマ開発の概要
    • テーマの複製
    • レイアウトの管理
    • トップパネルとヘッダー
    • テーマを使用したショップの設定の変更
    • CSS
    • テーマの言語変数
    • メディアファイル
    • 親テーマ
    • スタイルとビジュアルエディター
    • レイアウトエディター
    • テンプレート
  • デバッグ
    • デバッガー
    • ファイルエディター
GitBook提供
このページ内
  • ツールチップとは
  • 使用法
  • ツールチップの追加方法
  • 共通のフォームフィールドへのツールチップ追加
  • 1.変数の名前のみを含んだツールチップ
  • 2.変数の名前とテンプレートを含んだツールチップ
  • ツールチップ用の用語変数表示
  • 例
  • アドオンの設定のためにツールチップを追加
  1. コア
  2. ショップフロント

ツールチップ

ツールチップとは

ツールチップはページ上の追加情報を表示するインターフェース要素です。

ユーザーはアイテムをクリックすることなく、カーソルを乗せるとそのアイテムについての追加情報が書かれているツールチップが表示されます。

使用法

CS-Cartのツールチップは管理パネルのフォームフィールドへ説明ボックスを追加するために使用します。

<画像>

ツールチップの追加方法

ツールチップは共通のフォームフィールドとアドオンでは異なる方法で定義されています。

それぞれの場合を説明します。

共通のフォームフィールドへのツールチップ追加

これらのツールチップは特別な言語変数を定義することで追加されます。このようなツールチップ変数には2つのタイプがあります:

共通フォームへのツールチップは特別な言語変数を定義することで追加されます。 このツールチップ変数は2つのタイプがあります:

  1. このツールチップを追加するための変数の名前のみを含むタイプ

  2. このツールチップを追加するため変数が使用されるテンプレートの変数の名前のみを含む、またはこの変数が使用されるテンプレート

1.変数の名前のみを含んだツールチップ

これらは以下の構造を持っています: 「ttc_LANGVAR_NAME. Where LANGVAR_NAME」 はこのツールチップを追加するための変数の名前です。 このようなツールチップ変数を定義する場合、ツールチップは_LANGVAR_NAME_ が使用されている全てのフォームに表示されます。

2.変数の名前とテンプレートを含んだツールチップ

これらは以下の構造を持っています

tt_TEMPLATE_NAME LANGVAR_NAME.LANGVAR_NAME とはこのツールチップを追加するための変数の名前です。 TEMPLATE_NAME はこの変数が使用されたテンプレートです。 このツールチップは定義されたテンプレートのみに表示されます。 これは異なるページの同じフィールド名で同じツールチップが表示されないようにするために役立ちます。

ツールチップ変数がどのように形成されるかの例:

tt_views_products_update_list_price = tt_ + TEMPLATE_NAME + _ + LANGVAR_NAME = tt_ + views_products_update + _ + list_price_

ツールチップ用の用語変数表示

目的のページに直接ツールチップ用のすべての言語変数を表示することが可能です。

これらを表示するには、選択したページのURLに以下のパラメータを追加してください:stt(ツールチップを表示する)とctpl(キャッシュをクリアする)

例えば、以下のページに全てのツールチップを表示するには:

http://example.com/admin.php?dispatch=products.update&product_id=180

↓

http://example.com/admin.php?dispatch=products.update&product_id=180&stt&ctpl

2つの言語変数をもつポップアップボックスはそれぞれ並んで表示されます。 変数値がすでに定義されている場合は、同じポップアップボックスでも表示されます。

<画像>

変数表示モードを無効にするには、ページのキャッシュをクリアしてください:

https://example.com/admin.php?dispatch=products.update&product_id=180&ctpl

`*

例

例として、商品の詳細ページでNameフィールドに選択したテンプレートのにのみ表示されるツールチップを追加してみましょう:

http://example.com/admin.php?dispatch=products.update&product_id=180
  • ページを開き、URLの最後に&stt&ctpl を追加してください。

https://example.com/admin.php?dispatch=products.update&product_id=180&stt&ctpl
  • 目的のファイル名(この例のネームフィールド)にマウスポインターを合わせ、tt_ とともに言語変数をコピーします:tt_views_products_update_name

Go to Administrtation > Languages > Translations and click + to add the new language variable.

  • _一般設定 > 言語 > 言語変数_へ移動し、+をクリックして新しい言語変数を追加します

tt_views_products_update_name ), 言語変数フィールドでは前の手順( tt_views_products_update_name ) から変数を入力できます 値フィールドではツールチップのテキストを入力します。

最後に登録をクリックします。

<画像>

  • 商品詳細ページを開いてツールチップが正確に表示されるか確認します。

アドオンの設定のためにツールチップを追加

アドオン用のツールチップは_addon.xml file_ (/app/addons/add-on_name) で定義されています。

設定用のツールチップを追加するには、このXMLに値を定義します。 ツールチップの翻訳はタグに定義されています:

<tooltip>Tooltip text</tooltip>
<tt_translations>
        <item lang="es">Tooltip translation</item>
</tt_translations>
...

例えば

Anti FraudアドオンのコードではMaxmind license keyフィールドにHelloツールチップを追加する際はこのようになります:

<settings>
    <sections>
        <section id="general">
            <name>General</name>
            <items>
                <item id="anti_fraud_key">
                    <name>Maxmind license key</name>
                    <type>input</type>
                    <default_value/>
                    <translations>
                        <item lang="ja">MaxMindのライセンスキー</item>
                        <item lang="es">Clave de licencia de MaxMind</item>
                        <item lang="fr">Clé de licence Maxmind</item>
                        <item lang="da">Maxmind licens nøglen</item>
                        <item lang="el">Αριθμός-κλειδί Maxmind</item>
                        <item lang="ro">Liciență cheie Maxmind</item>
                        <item lang="ru">Лицензионный ключ Maxmind</item>
                        <item lang="sl">Maxmind licenčni ključ</item>
                        <item lang="zh">Maxmind 许可证钥匙</item>
                    </translations>
                    <tooltip>Hello</tooltip>
                    <tt_translations>
                        <item lang="es">Hola</item>
                    </tt_translations>
                </item>
...
前へ通知システム次へ設定

最終更新 7 か月前