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

前提

機能説明¶

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

前提

ハッシュタグを利用するためには、別途オプション契約が必要です。

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

設定方法¶

必須設定¶

Htmlの修正

<div data-[モード]="hashtag-group1"></div>

リソースファイルの作成

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

ハッシュタグリソースファイルは、ハッシュタグの表示条件や並び替え条件を指定し、ハッシュタグコンポーネントで使用するためのファイルです。

以下にリソース例を示します。

var popfindConf = popfindConf || {};
popfindConf['data-[モード]'] = {
  uid: '[UID]',
  mode: '[モード]',
  hashtagResource: [
    {
      name: 'group1',
      sort: [{ key: 'count', order: 'desc' }],
      count: 5,
    },
  ],
}

hashtagResource の要素¶

hashtagsResource には、次のパラメータを指定できます。

キー名	型	デフォルト値	説明
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 を指定すると、そのコンテンツが持つハッシュタグを表示する。

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

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

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

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

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

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

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

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

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

query パラメータには、次のパラメータを指定できます。

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

補足

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

dom構造¶

Dom

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

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