モーダルコンポーネント

前提

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

機能説明

子要素に指定したコンポーネントをモーダルウィンドウで表示できるようにします。

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

設定方法

必須設定

Htmlの修正

モーダルウィンドウ内に表示したいコンポーネントを
modalコンポーネントの中に入れます。
(ここでは属性名が data-[モード] とした例です。)

<div data-[モード]="modal">
  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
</div>

任意設定

表示用メッセージの変更

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

var sitesearchMessage = {
    modal: {
        status: '全%1$s件がヒット',
        groupstatus: '全%1$sアイテム(%2$sSKU)を表示',
        open: '詳細',
        close: 'x',
        submit: '更新',
    },    
};

キー名	デフォルト値	説明
status	全%1$s件がヒット	モーダルコンポーネントのヘッダーの内容。%1$sにはヒット件数が入る
groupstatus	全%1$sアイテム(%2$sSKU)を表示	グループ検索時のモーダルコンポーネントのヘッダの内容。 %1$s にはグルーピング時のヒット件数、%2$s には非グルーピング時のヒット件数が入る
open	詳細	モーダルコンポーネントを開くボタンの文字列
close	×	モーダルコンポーネントを閉じるボタンの文字列
submit	更新	モーダルコンポーネント内での更新ボタンの文字列

dom構造

Dom

モーダルコンポーネント

<div data-[モード]="modal" class="_[モード]_component">
  <div class="_modal">
    <!-- 非表示時には _hide というクラス名を持つ -->
    <!-- 表示時には _show というクラス名を持つ -->
    <div class="_window _hide">
      <div class="_wrap">
        <div class="_head">
          <div class="_close">×</div>
          <!-- ヒット件数が表示される -->
          <div class="_status">全<span class="_hits">○○○</span>件がヒット</div>
        </div>
        <div class="_body">
          <h3>詳細検索</h3>

          <!-- モーダルコンポーネント内に記述されたコンポーネントが表示される -->
        </div>
        <div class="_foot">
          <div class="_button _submit">更新</div>
        </div>
      </div>
    </div>
    <div class="_button _open">詳細検索</div>
  </div>
</div>