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

機能説明¶

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

前提

ハッシュタグの利用は 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'	'AND'	複数のハッシュタグを選択した際の検索の挙動を指定する 'AND' の場合、ハッシュタグは AND 検索、'OR' の場合は、 OR 検索として実行される。
query	絞り込み型	undefined	ハッシュタグの絞り込み条件を指定する。設定可能なエントリについては「絞り込み型で指定可能な値」を参照
clickHook	関数	undefined	ハッシュタグをクリックした際に実行される関数を指定する。詳細は「clickHook」を参照
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>