ハッシュタグコンポーネント¶

機能説明¶

ハッシュタグを表示します。
検索結果コンポーネントと共に使用することで、検索結果を特定の条件で絞り込むことができます。

前提

ハッシュタグの利用は GENIEE HASHTAG の加入が必要です。

識別子にグループ名が含まれます。
表示にはグループ名に対応したハッシュタグリソースが必要です。
グループ識別子を指定しない場合、ハッシュタグリソースの先頭の定義が使用されます。
存在しないグループ名を指定した場合、コンソールに警告が表示されます。

設定方法¶

必須設定¶

Htmlの修正

<div data-hashtag="hashtag-group1"></div>

リソースファイルの作成

ハッシュタグリソースファイル¶

ハッシュタグリソースファイルは、ハッシュタグの表示条件や並び替え条件を指定し、ハッシュタグコンポーネントで使用するためのファイルです。
ハッシュタグ機能を使用しない場合、このファイルを作成、読み込みする必要はありません。

ハッシュタグ設定タグを記述します。

// ハッシュタグ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-hashtag"] = {
  uid: "[UID]",
  mode: "[モード]",
  hashtagResource: [
    {
      name: "group1",
      sort: [{ key: "count", order: "desc" }],
      count: 5,
    },
  ],
}

設定パラメータ一覧¶

パラメータ名	データ型	デフォルト値	説明
asyncUpdate	真偽値	false	非同期モードを使うかどうか非同期モードでは状態変更時に画面の再読み込みが発生しません。すべての設定タグに同じ設定を行ってください。

hashtagResource のエントリ一覧¶

キー名	型	デフォルト値	説明
name	文字列	'default'	ハッシュタグコンポーネントを識別子付きで呼び出す際のコンポーネント識別子の一部となる。URL パラメータにも使用される。
sort	配列	[{ key: “count”, order: “desc” }]	ハッシュタグの並び順を指定する。指定方法は「並び順の指定と指定可能な値」を参照
count	数値	5	ハッシュタグの最大表示件数 (ただしハッシュタグの総数を超える値を設定しても、総数分しか表示されない。)
location	文字列	''	ハッシュタグをクリックした際の遷移先 URL。未指定の場合は、遷移しない。
newTab	真偽値	false	クリック時に新しいタブで遷移するかどうかを指定する。true の場合、新しいタブで遷移する。
operator	'AND' または 'OR' または 'ONLY'	'AND'	複数のハッシュタグを選択した際の検索の挙動を指定する。'AND' の場合は AND 検索、'OR' の場合は OR 検索として実行される。'ONLY' の場合は1つのハッシュタグのみ選択可能（ラジオボタン相当）となり、選択中のタグを再クリックすると選択が解除される。
query	絞り込み型	undefined	ハッシュタグの絞り込み条件を指定する。設定可能なエントリについては「絞り込み型で指定可能な値」を参照
clickHook	関数	() => true,	ハッシュタグをクリックした際に実行される関数を指定する。詳細は「clickHook」を参照
urlKey	文字列	undefined	location 遷移時に使用する URL パラメータのキー名を指定する。未指定の場合はデフォルトの `ht` が使用される。複数グループを扱う場合は各グループに異なる urlKey を設定することを推奨する。
itemId	文字列	undefined	コンテンツ URL を指定すると、そのコンテンツが持つハッシュタグを表示する。

別の指定方法

モードが sitesearch の場合、以下の記述となります。

var sitesearchHashtag = [
  {
    name: "group1",
    sort: [{ key: "count", order: "desc" }],
    count: 5,
  }
];

並び順の指定と指定可能な値¶

sort を指定することで、ハッシュタグの並び順を指定できます。
並び順は配列に指定された順に決定されます。

sort: [
  { key: "count", order: "desc" },
  { key: "key", order: "asc" },
]

キー名	説明
key	並び順の基準となるキー
order	ハッシュタグの順序を指定する。指定可能な値は asc (昇順) または desc (降順)

key には、次の値を指定できます。

キー名	説明
count	そのハッシュタグで絞り込まれた際のヒット件数で並ぶ。
key	ハッシュタグを ASCII 順で並ぶ。

絞り込み型で指定可能な値¶

query を指定することで、ハッシュタグを特定の条件に絞り込むことができます。

これにより、特定の商品・カテゴリに関連するハッシュタグのみを表示することができます。
実装例については、「特定の条件に絞り込んだハッシュタグを表示する」を参照してください。

キー名	型	説明
_searchKeyword	文字列	キーワード検索対象フィールド全てへのフリーワード検索
フィールド名	フィールドの型に依る	フィールドに対しての検索。検索可能フィールドについては、お問い合わせください。
AND	配列(複数の検索条件)	AND を行う。検索条件のいずれも真になる時は真、それ以外は偽となる。
OR	配列(複数の検索条件)	OR を行う。検索条件のいずれかあるいは全てが真になる時は真、いずれも偽の時は偽となる。
NOT	単体の検索条件	NOT (NAND) を行う。検索条件のいずれも真になる時は偽、それ以外は真となる。

補足

検索条件直下の要素は、暗黙の AND が指定されているとみなします。

DOM 構造¶

Dom

ハッシュタグコンポーネント¶

<!-- グループの値を"group1" とする -->
<div data-hashtag="hashtag-group1">
  <div class="gs_hashtags">
    <div class="gs_hashtags_list">
      <!-- ここから繰り返し表示 -->
      <!-- 選択中のハッシュタグの場合、selectedクラスが付与される -->
      <div class="gs_hashtag selected">xxxx</div>
      <!-- ここまで繰り返し表示 -->
    </div>
  </div>
</div>