検索条件コンポーネント

前提

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

機能説明

検索条件の設定と反映を区別して扱うことができます。
searchcondition内で起動した検索条件は、formがsubmitされるまで反映されません。
また、formのactionに遷移先urlを指定することで、検索条件を保ったまま画面遷移することもできます。

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

設定方法

必須設定

Htmlの修正

検索条件としたいコンポーネントをsearchconditionコンポーネントの中に入れます。
searchcondition内には必ずformを含めるようにしてください。

(ここでは属性名が data-[モード] とした例です。)

<div data-[モード]="searchcondition">
  <form method="get">
    <input type="search" name="q" id="q" value="" placeholder="検索キーワード" size="50">
    <input type="submit" name="" value="検索">
  </form>
  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
</div>

dom構造

Dom

searchconditionではdomの生成はありません。