ツールチップ

ツールチップとは

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

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

使用法

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

＜画像＞

ツールチップの追加方法

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

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

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

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

共通フォームへのツールチップは特別な言語変数を定義することで追加されます。このツールチップ変数は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>
...

Previous通知システム Next設定

Last updated 10 days ago