表示件数変更コンポーネント¶

前提

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

機能説明¶

表示件数を変更するリンクを表示します。
識別子により表示バリエーションを選択し、見た目を変更することができます。
存在しないバリエーションやバリエーションが未指定の場合はtype1となります。

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

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

設定方法¶

必須設定¶

Htmlの修正

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

任意設定¶

表示用メッセージの変更

sitesearchMessage という変数に次のような指定を行うことで、表示文字列を変更することができます。

var sitesearchMessage = {
    countSelector: {
        label: '表示件数:',
        suffix: '件',
    },    
};

キー名	デフォルト値	説明
label	表示件数:	表示件数変更コンポーネントのラベル
suffix	件	表示件数コンポーネントで表示件数の後ろに表示

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

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

    resultsCountList: [10, 20, 30],
};

パラメータ名	データ型	デフォルト値	説明
resultCountList	配列	[10, 20, 30]	countSelectorコンポーネントにおいて、選択可能な表示件数のリスト

dom構造¶

Dom

表示件数変更コンポーネント¶

表示件数変更コンポーネントは表示バリエーション毎に DOM 構造が異なります。
各バリエーションの指定方法について詳しくは「コンポーネントリファレンス」をご参照ください。

type1¶

<div data-[モード]="countselector" class="_[モード]_component">
  <div class="_countselector _countselector_type1">
    <div class="_label">表示件数:</div>
    <select name="c">
      <!-- 設定した resultCount に応じて繰り返し表示 -->
      <option value="10" selected="">10 件</option>
      <option value="20">20 件</option>

      <!-- 以下繰り返し表示 -->
    </select>
  </div>
</div>

type2¶

<div data-[モード]="countselector-type2" class="_[モード]_component">
  <div class="_countselector _countselector_type2">
    <div class="_label">表示件数:</div>
    <!-- 設定した resultCount に応じて繰り返し表示 -->
    <div class="_count _current">10 件</div>
    <div class="_count"><a href="..." onclick="...">20件</a></div>

    <!-- 以下繰り返し表示 -->
  </div>
</div>

type3¶

<div data-[モード]="countselector-type3" class="_[モード]_component">
  <div class="_countselector _countselector_type3">
    <div class="_label">表示件数:</div>
    <!-- 設定した resultCount に応じて繰り返し表示 -->
    <div class="_count _current">
      <input
        type="radio"
        name="c"
        value="10"
        onchange="..."
        checked="checked"
      />
      <label for="...">10 件</label>
    </div>
    <div class="_count">
      <input type="radio" id="..." name="c" value="60" onchange="..." />
      <label for="...">20 件</label>
    </div>

    <!-- 以下繰り返し表示 -->
  </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.