グループ表示変更コンポーネント

前提

ポップファインド設定タグ・タグマネージャーが既に導入されていること。

機能説明

グループ表示を変更するリンクを表示します。
ポップファインドサーバーにグルーピングに使用するデータを登録した上で、useGroupingにtrueを設定した場合のみ利用可能です。

表示バリエーション
type1: ラジオボタン型
type2: プルダウン型
type3: リンクテキスト型

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法

必須設定

Htmlの修正

<div data-[モード]="groupingselector-type1"></div>

関連する設定パラメータの追加

var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
    uid: "[UID]",
    mode: "[モード]",
    inputId: "q",

    useGrouping: true,
}; 

パラメータ名	データ型	デフォルト値	説明
useGrouping	真偽値	false	グループ検索機能を利用するかどうかの設定。trueを指定した場合、グループのキーでまとめられた結果が表示される

dom構造

Dom

グループ表示変更コンポーネント

type1

<div class="_groupingselector _groupingselector_type1">
  <div class="_label">グループ表示:</div>
  <form>
    <div class="_grouping _current">
      <input
        type="radio"
        id="..."
        name="g"
        value="y"
        onchange="..."
        checked="checked"
      />
      <label for="...">する</label>
    </div>
    <div class="_grouping">
      <input type="radio" id="..." name="g" value="n" onchange="..." />
      <label for="...">しない</label>
    </div>
  </form>
</div>

type2

<div class="_groupingselector _groupingselector_type2">
  <div class="_label">グループ表示:</div>
  <select name="g" onchange="...">
    <option value="y" selected>する</option>
    <option value="n">しない</option>
  </select>
</div>

type3

<div class="_groupingselector _groupingselector_type3">
  <div class="_label">グループ表示:</div>
  <div class="_grouping _current">する</div>
  <div class="_grouping">
    <a href="..." onclick="...">しない</a>
  </div>
</div>

サンプル

type1(省略時)

ラジオボタン型

See the Pen this by BST developer (@bsearchtech)on CodePen.

type2

プルダウン型

See the Pen this by BST developer (@bsearchtech)on CodePen.

type3

リンクテキスト型

See the Pen this by BST developer (@bsearchtech)on CodePen.