価格絞り込みコンポーネント¶

前提

機能説明¶

価格絞り込みをするフォームを表示します。
このコンポーネントはEC向けの利用用途にのみ使用することができます。

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

設定方法¶

必須設定¶

Htmlの修正

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

任意設定¶

表示用メッセージの変更

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

var popfindMessage = {
    priceInput: {
        label: '価格の絞り込み',
        prefix: '',
        suffix: '円',
        range: '~',
        update: '更新',
        clear: 'クリア',
    },    
};

キー名	デフォルト値	説明
label	'価格の絞り込み'	価格絞り込みコンポーネントのラベル
prefix	''	価格絞り込みコンポーネントで入力ボックスの前に表示
suffix	'円'	価格絞り込みコンポーネントで入力ボックスの後に表示
range	'〜'	価格絞り込みコンポーネントで入力ボックスの間に表示
update	'更新'	パラメータpriceInputUpdateEventsがclickの際に表示される更新ボタンのラベル
clear	'クリア'	パラメータpriceInputUpdateEventsがclickの際に表示されるクリアボタンのラベル

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

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

    priceInputUpdateEvents: ['blur'],
};

パラメータ名	データ型	デフォルト値	説明
priceInputUpdateEvents	配列 (blur,clickから選択)	['blur']	価格絞り込みコンポーネントを更新するタイミングを指定 blurはフォーカスが外れたタイミングで更新される clickはボタンが表示され、ボタンを押下したタイミングで更新される

dom構造¶

Dom

価格絞り込みコンポーネント¶

<div data-[モード]="priceinput" class="_[モード]_component">
  <div class="_priceinput">
    <div class="_label">価格の絞り込み</div>
    <div class="_form">
      <div class="_pricegroup">
        <!-- 標準のメッセージリソースでは、prefixは使用せずsuffixを使用しています -->
        <span class="_prefix"></span>
        <input class="_min" name="pmin" type="number" min="0" value="" />
        <span class="_suffix">円</span>
      </div>
      <span class="_range">〜</span>
      <div class="_pricegroup">
        <!-- 標準のメッセージリソースでは、prefixは使用せずsuffixを使用しています -->
        <span class="_prefix"></span>
        <input class="_max" name="pmax" type="number" min="0" value="" />
        <span class="_suffix">円</span>
      </div>
    </div>
    <div class="_submit">更新</div>
  </div>
</div>