コンテンツにスキップ

カスタマイズ

ユーザーはカスタマイズすることで高度な検索を実現することができます。

属性絞り込み機能の実装

属性絞り込み機能を使用するには、属性リソースファイルが必要です。
詳しくは、「属性リソースファイル」を参照してください。

次のような属性リソースファイルを作成します。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "ATTRIBUTE1"},
      {"label": "属性2", "name": "ATTRIBUTE2"}
    ]
  },
  {
    group: {"label": "絞り込みグループ2", "name": "group2"},
    attributes: [
      {"label": "属性3", "name": "ATTRIBUTE3"},
      {"label": "属性4", "name": "ATTRIBUTE4"},
      {"label": "属性5", "name": "ATTRIBUTE5"}
    ]
  }
];

サーバーに sitesearch_attr.js として設置します。

HTML の修正

head 要素に sitesearch_attr.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_attr.js"></script>

body 要素に属性絞り込みコンポーネントを追加します。

絞り込みグループ 1 の属性絞り込みコンポーネントを表示する場合、
絞り込みグループ 1 の name を識別子に含める形式で指定します。

  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="attributes-group1"></div>

あるいは、絞り込みグループ 2 の属性絞り込みコンポーネントも追加する場合、

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

という指定をすることにより、定義されたグループの属性絞り込みコンポーネントが表示されます。

表示バリエーションの変更

属性絞り込み機能において、表示バリエーションを変更する場合、属性リソースファイルを修正します。

例: type2 (開閉式) の見た目に変更する。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "ATTRIBUTE1"},
      {"label": "属性2", "name": "ATTRIBUTE2"}
    ],
    type: "type2"
  }
];

親子構造

属性絞り込みコンポーネントでは、親子構造を持った絞り込みを実現することができます。
既に属性絞り込み機能を導入している場合、リソースファイルの修正のみで行うことができます。

はじめに、属性 1 を選択した時に表示する子グループを属性リソースファイルに追加します。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "ATTRIBUTE1"},
      {"label": "属性2", "name": "ATTRIBUTE2"}
    ]
  },
  {
    group: {"label": "属性1の子", "name": "sub_ATTRIBUTE1"},
    attributes: [
      {"label": "属性1-1", "name": "ATTRIBUTE1-1"},
      {"label": "属性1-2", "name": "ATTRIBUTE1-2"}
    ]
  }
];

次に、属性 1 と新しく作成した子グループを紐付けます。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "ATTRIBUTE1", "sub_groups": ["sub_ATTRIBUTE1"]},
      {"label": "属性2", "name": "ATTRIBUTE2"}
    ]
  },
  {
    group: {"label": "属性1の子", "name": "sub_ATTRIBUTE1"},
    attributes: [
      {"label": "属性1-1", "name": "ATTRIBUTE1-1"},
      {"label": "属性1-2", "name": "ATTRIBUTE1-2"}
    ]
  }
];

属性絞り込みで属性 1 を選択した場合、更新後の画面で属性 1 の子グループが絞り込み候補として表示されます。

クエリでの絞り込み

属性リソースファイルでは、attributes パラメータの query キーで AND、 OR、 NOT を組み合わせた属性絞り込みを実現することができます。

例: 属性 1 を A1 かつ B1 で AND 検索する。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "A1", "query": {"AND": ["A1", "B1"]}},
      {"label": "属性2", "name": "A2"}
    ]
  }
];

query の詳細な指定方法は「クエリでの絞り込み」を参照してください。

また、attributes パラメータの refinements キーで条件を格納した配列を指定した属性絞り込みを実現することもできます。

例: 属性 1 を A1 かつ B1 で AND 検索する。

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "A1", "refinements": ["A1", "B1"]},
      {"label": "属性2", "name": "A2"}
    ]
  }
];

refinements の詳細な指定方法は「配列での絞り込み」を参照してください。

絞り込みの名前の変更

group の label に表示したい名前を設定します。

var sitesearchAttribute = [
  {
    group: {"label": "性別", "name": "group1"},
    attributes: [
      {"label": "男性", "name": "man"},
      {"label": "女性", "name": "woman"}
    ]
  }
];

絞り込みの接尾辞の変更

初期状態では絞り込みの最後には「の絞り込み」が表示されます。
メッセージリソースファイルの attributes の labelSuffix に表示したい値を設定します。

var sitesearchMessage = {
    attributes: {
        labelSuffix: 'で絞り込む'
    },    
};

全選択項目の接頭辞の変更

初期状態では全選択項目の先頭には「すべての」が表示されます。
メッセージリソースファイルの attributes の selectAllPrefix に表示したい値を設定します。

var sitesearchMessage = {
    attributes: {
        selectAllPrefix: '全'
    },    
};

URL / ファイル種別による属性絞り込み

URL やファイル種別、meta 要素で属性絞り込みを行うことができます。

URL から自動付与される属性

クロールしたコンテンツにおいて、以下の PF_ADDR: から始まる属性を指定することで、
URL から絞り込みを行うことができます。

属性名 絞り込みの内容
PF_ADDR:example.com example.com 以下のコンテンツで絞り込む。
PF_ADDR:example.com/popfind example.com/popfind 以下のコンテンツで絞り込む。
PF_ADDR:example.com/casestudy.php example.com/casestudy.php を絞り込む。
(casestudy.php?id=28 なども含まれます。)

ファイル種別から自動付与される属性

クロールされたコンテンツにおいて、以下の PF_FILETYPE: から始まる属性を指定することで、
ファイル種別から絞り込みを行うことができます。

属性名 絞り込みの内容
PF_FILETYPE:html HTML で絞り込む。
PF_FILETYPE:pdf PDF で絞り込む。
PF_FILETYPE:excel Excel で絞り込む。
PF_FILETYPE:word Word で絞り込む。
PF_FILETYPE:powerpoint PowerPoint で絞り込む。

meta 要素による属性絞り込み

クロール対象のコンテンツの head 要素内の meta 要素を記述することで、属性絞り込みに使用することができます。

<meta name="pf:attributes" content="[指定する属性名]">

複数の属性を定義したい場合、属性同士を「|(バーティカルバー)」で連結して記述します。

<meta name="pf:attributes" content="category:csr|lang:en">
属性名 絞り込みの内容
category:csr <meta name="pf:attributes" content="category:csr"> が書かれているページで絞り込む。
lang:en <meta name="pf:attributes" content="lang:en"> が書かれているページで絞り込む。

補足

カテゴリーと言語など、異なる種類の要素を含める場合、見やすさと値同士の衝突を防ぐため、[種別]:[値] のように記述することを推奨します。

meta 要素での検索結果のカスタマイズの実装

meta 要素は属性絞り込み機能以外に表示や並び順など検索結果のカスタマイズに利用することができます。
利用可能な meta 要素は、「利用可能な meta 要素」を参照してください。

例: meta 要素で pf:sort を設定する。設定した値は、sort フィールドの値として検索結果の並び順に利用される。

<meta name="pf:sort" content="999">

最終更新日絞り込み機能の実装

クロールしたコンテンツを最終更新日によって絞り込みを行うことが可能です。
最終更新日の値については「最終更新日の値」を参照してください。

簡単な利用方法

通常、最終更新日絞り込みを行うには、最終更新日リソースファイルを作成する必要がありますが、HTML の修正を行うだけでも「1 日以内」「7 日以内」「30 日以内」の絞り込みを表示することができます。

次のようにコンポーネントを配置してあるとします。

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

この時、表示したい箇所に lastmodifiedselector コンポーネントを挿入します。

  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
  <div data-[モード]="lastmodifiedselector"></div>
  <div data-[モード]="searchstatus"></div>
  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

「1 日以内」「7 日以内」「30 日以内」の絞り込みが表示されます。

最終更新日絞り込み機能の絞り込み範囲を変更する

最終更新日リソースファイルを使用することで、絞り込み範囲を変更することができます。

リソースファイルの作成

最終更新日リソースファイルを作成します。
詳しくは、「最終更新日リソースファイル」を参照してください。

     var sitesearchLastModified = [
      {
          group: {"label": "最終更新日による絞り込み", "name": "group1"},
          dateranges: [
            {label: "2019年から", from: "2019/01/01"},
            {label: "2020年から", from: "2020/01/01"},
            {label: "2021年から", from: "2021/01/01"},
          ]
      },
      {
          group: {"label": "最終更新日による絞り込み(年単位)", "name": "group2"},
          dateranges: [
            {label: "2019年", from: "2019/01/01", to: "2019/12/31"},
            {label: "2020年", from: "2020/01/01", to: "2020/12/31"},
            {label: "2021年", from: "2021/01/01", to: "2021/12/31"},
          ]
      },      
    ];

サーバーに sitesearch_lastmodified.js として設置します。

HTML の修正

head 要素に sitesearch_lastmodified.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_lastmodified.js"></script>

body 要素に最終更新日絞り込みコンポーネントを追加します。

最終更新日による絞り込み の絞り込みグループを表示する場合は group の name である group1 を識別子に含める形式で指定します。

  <div data-[モード]="lastmodifiedselector-group1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

注意

リソースファイルを読み込ませた場合、グループ名を省略した最終更新日絞り込みコンポーネントの利用には先頭グループが使用されます。

属性絞り込みグループ間の OR 結合

属性絞り込み機能はデフォルトでは、group 同士を AND で結合されます。
OR で繋ぎたい、data-overwrite-group 属性を利用できます。
data-overwrite-group 属性に同じ値が設定された group は、OR で結合されます。

たとえば、以下のような HTML があるとします。

<div data-[モード]="attribute-group1"></div>
<div data-[モード]="attribute-group2"></div>

この場合、group1 と group2 は AND で結合されます。
group1 と group2 を OR で結合したい場合、以下のように data-overwrite-group 属性に同じ値を設定します。

<div data-[モード]="attribute-group1" data-overwrite-group="group"></div> 
<div data-[モード]="attribute-group2" data-overwrite-group="group"></div>

注意

data-overwrite-group に指定する値は、既存の group 名と重複しないようにしてください。

通常の検索結果とは別に、事前に管理画面からデータを登録することにより、特定の条件にマッチした「おすすめリンク」と呼ばれるレコードを表示することができます。

前提

利用には、おすすめリンク UID が必要になります。

データのアップロード

おすすめリンクデータファイルを作成します。
詳しくは、「おすすめリンクデータファイル」を参照してください。

管理画面より作成したおすすめリンクデータファイルをアップロードします。

リソースファイルの作成

おすすめリンクリソースファイルを作成します。
詳しくは、「おすすめリンクリソースファイル」を参照してください。

// おすすめリンク設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-recommendlinks"] = {
  uid: "[おすすめリンク UID]",
  mode: "[モード]",
  recommendLinkResource: [
    {
      group: {label: "おすすめリンク", name: "group1"},
      count: 5,
    }
  ]
};

サーバーに sitesearch_recommend.js として設置します。

HTML の修正

head 要素に sitesearch_recommend.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_recommend.js"></script>

body 要素におすすめリンクコンポーネントを追加します。

  <div data-recommendlinks="recommendlinks-group1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

特定のおすすめリンクのみを表示する

おすすめリンクデータファイルに出し分けフラグを設定して、フラグの設定されたリンクのみを表示させることができます。

  1. 設定データファイルの sections に出し分けフラグを登録する。

    設定データファイルの sections フィールドに、出し分け用の文字列を登録します。
    (この文字列は表示には使用されません。)

  2. おすすめリンクリソースファイルに出し分けフラグを指定する。

    例:
    おすすめリンク1 の表示は example が設定されたリンクのみ表示する。
    おすすめリンク2 の表示は出し分けフラグが設定されていないリンクのみ表示する。

    // おすすめリンク設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-recommendlinks"] = {
  uid: "[おすすめリンク UID]",
  mode: "[モード]",
  recommendLinkResource: [
    {
      group: {"label": "おすすめリンク1", "name": "group1"},
      count: 5,
      section: "example",
    },
    {
      group: {"label": "おすすめリンク2", "name": "group2"},
      count: 5,
    }
  ]
};

関連キーワード機能の実装

事前に管理画面からデータを登録することにより、特定のキーワードで検索された時に「関連キーワード」を表示し、元のキーワードをより絞り込んだり、別の検索キーワードに変えた検索結果に誘導することができます。

データのアップロード

関連キーワード登録ファイルを作成します。
詳しくは、「関連キーワード登録ファイル」を参照してください。

管理画面より作成した関連キーワード登録ファイルをアップロードします。

HTML の修正

標準的な動作で利用する場合、関連キーワードリソースファイルを作成する必要はありません。
body 要素に関連キーワードコンポーネントを追加します。

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

管理画面で登録した関連キーワードが表示されます。

表示件数や選択時の動作を変更する場合

関連キーワードリソースファイルを使用することで、表示件数や選択時の動作を変更することができます。

リソースファイルの作成

関連キーワードリソースファイルを作成します。
詳しくは、「関連キーワードリソースファイル」を参照してください。

var sitesearchRelatedKeyword = [
  {
      group: {label: "その他のキーワード", name: "group1"},
      count: 5,
      keepRefinements: true,
  }
];

サーバーに sitesearch_relatedkeyword.js として設置します。

HTML の修正

head 要素に sitesearch_relatedkeyword.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_relatedkeyword.js"></script>

キーワードランキング機能の実装

過去に検索された事の多いキーワードをランキング形式で表示することができます。

前提

利用には、キーワードランキング UID が必要になります。

データのアップロード

キーワードランキングファイルを作成します。
詳しくは、「キーワードランキングファイル」を参照してください。

管理画面より作成したキーワードランキングファイルをアップロードします。

リソースファイルの作成

キーワードランキングリソースファイルを作成します。
詳しくは、「キーワードランキングリソースファイル」を参照してください。

// キーワードランキング設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-kwranking"] = {
  uid: "[キーワードランキング UID]",
  mode: "[モード]",
  keywordRankingResource: [
    {
      group:{label: "注目ワード", name: "group1"},
      count: 5,
    }
  ]
};

サーバーに sitesearch_kwranking.js として設置します。

HTML の修正

head 要素に sitesearch_kwranking.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_kwranking.js"></script>

body 要素にキーワードランキングコンポーネントを追加します。

  <div data-kwranking="keywordranking-group1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

レコメンド (popwiz) 機能の実装

レコメンド用のタグを埋め込むことでページにレコメンドを表示することができます。

前提

レコメンド機能オプション の契約が必要です。
レコメンド機能オプションは 2024 年 12 月で新規受付を終了しました。

リソースファイルの作成

レコメンド (popwiz) リソースファイルを作成します。
詳しくは、「レコメンド (popwiz) リソースファイル」を参照してください。

// レコメンド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-popwiz"] = {
  uid: "[UID]",
  mode: "[モード]",
  popwizResource: [
    {
      group: { label: "レコメンド", name:"group1" },
      layoutOrder: ["thumbnail", "title"],
      type: "type1",
      count: 3,
      popwiz_id: "[対象とするコンテンツ URL]",
    }
  ]
};

サーバーに sitesearch_popwiz.js として設置します。

HTML の修正

head 要素に sitesearch_popwiz.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_popwiz.js"></script>

body 要素にレコメンドコンポーネントを追加します。

  <div data-popwiz="popwiz-group1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

ハッシュタグ機能の実装

ハッシュタグ機能を利用することで、ユーザーが選択したハッシュタグに基づいて商品を絞り込むことができます。

前提

ハッシュタグの利用は GENIEE HASHTAG の加入が必要です。

リソースファイルの作成

ハッシュタグリソースファイルを作成します。
詳しくは、「ハッシュタグリソースファイル」を参照してください。

// ハッシュタグ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-hashtag"] = {
  uid: "[UID]",
  mode: "[モード]",
  hashtagResource: [
    {
      name: "group1",
      sort: [{ key: "count", order: "desc" }],
      count: 5,
    },
  ],
}

サーバーに sitesearch_hashtag.js として設置します。

HTML の修正

head 要素に sitesearch_hashtag.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_hashtag.js"></script>

body 要素に要素内にハッシュタグコンポーネントを追加します。

  <div data-hashtag="hashtag-group1"></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>
  <div data-[モード]="..."></div>

特定の条件に絞り込んだハッシュタグを表示する

hashtagResource に itemId を記述することで、特定のコンテンツに紐づくハッシュタグを表示することができます。

例: コンテンツに紐づくハッシュタグを表示する。

popfindConf["data-hashtag"] = {
  uid: "[UID]",
  mode: "[モード]",
  hashtagResource: [
    {
      name: "group1",
      sort: [
        { key: "count", order: "desc" }
      ],
      count: 5,
      itemId: "[対象とするコンテンツ URL]"
    }
  ]
};

検索結果追加表示機能の実装

検索結果利用時に特定のパラメータを設定することで「追加で表示」ボタンを表示できます。
クリックすると非同期で検索結果が追加されます。

基本的な利用方法

  1. extraResultsCount パラメータを 1 以上に設定してください。
  2. html に searchresults を含めてください。
  3. ページを表示すると、検索結果の下部に「追加で表示」ボタンが表示されます。
  4. 「追加で表示」ボタンをクリックすると、extraResultsCount 分追加で表示されます。
    (追加で表示できる検索結果がない場合、ボタンが非表示になります。)

ボタンクリック時にスクロールする

extraClickHook を設定することで、ボタンクリック時にスクロールさせることができます。

  • 追加で見るボタンが画面最下部になるようにスクロールする。

    extraClickHook: (btn) => {
    btn.scrollIntoView({ behavior: 'smooth', block: 'end' });
}

  • 追加で表示された要素が画面最上部になるようにスクロールする。

    extraClickHook: (btn, items) => {
    items[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
}

ボタンに表示される文字列を変更する

メッセージリソースファイルの searchResults.extra を変更することで表示内容を変更できます。

var sitesearchMessage = {
    searchResults: {
        extra: "もっと見る",
    }
}

スマホと PC で表示を分ける

スマホと PC で表示を分けたい場合は CSS のメディアクエリを利用してください。

以下は、スマホでは追加で見るボタン、PC では pagenator を表示する例です。

  1. html で表示を切り替えたい要素に任意のクラスを追加する。

    <div data-[モード]="searchresults"></div>
<div data-[モード]="pagenator" class="_sp_hidden"></div>

  2. CSS でメディアクエリを記述する。

    /* 画面幅が 800px 以下のとき、pagenator を非表示にする (スマホ想定) */
@media screen and (max-width: 800px) { 
    ._sp_hidden {
        display: none;
    }
}

/* 画面幅が 801px 以上のとき、もっと見るボタンを非表示にする (PC 想定) */
@media screen and (min-width: 801px) {
    ._extraresults {
        display: none;
    }
}

クイックプレビュー機能の実装

検索結果として表示された HTML や PDF を素早く確認することができます。
サーチ設定タグの quickPreview パラメータを有効にします。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  quickPreview: true
};

補足

layoutOrder を指定する場合、thumbnail を必ず含めて設定してください。

補足

本機能は HTML, PDF のレコードに対して有効になり、プレビューされるサイトの設定によっては閲覧できない場合があります。
また、本機能は mobileMaxWidth パラメータの影響を受け、モバイル判定された場合はプレビューボタンが表示されません。

事前に絞り込まれた検索結果の実装

設定パラメータにより、事前に検索キーワードや属性で絞り込まれた結果を表示することができます。
設定項目は、「設定パラメータリファレンス」を参照してください。

注意

本パラメータや、属性絞り込みコンポーネントの組み合わせによって、検索結果が全てゼロ件になる条件を作成することが可能になります。
利用の際には、実際に使用するコンポーネントなどを考慮して矛盾が発生しないようにご注意ください。

例1: 検索キーワード「テスト」で絞り込む。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalSearchKeyword: "テスト"
};

例2: 属性「ABC1234」で絞り込む。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalAttribute: ["ABC1234"],
};

例3: 属性「A ANDNOT (B OR C)」で絞り込む。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  additionalAttribute: ["A"],
  additionalNotAttribute: ["B","C"],
};

モーダルウィンドウへの実装

ページにコンポーネントを配置するのに加え、モーダルウィンドウ内にもコンポーネントを配置することができます。

次のようにコンポーネントを配置してあるとします。

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

モーダルウィンドウ内に表示したいコンポーネントを modal コンポーネントの中に入れます。
これによりモーダルコンポーネントを配置した場所に「詳細検索」ボタンが表示され、そのボタンをクリックするとモーダルウィンドウ内にコンポーネントが表示されます。

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

表示メッセージの変更

一部の表示メッセージは、メッセージリソースファイルを作成・設置することにより上書きすることができます。

リソースファイルの作成

メッセージリソースファイルを作成します。
詳しくは、「メッセージリソースファイル」を参照してください。

var sitesearchMessage = {
  "sortOrderSelector": {
    "label": "変更したメッセージ"
  }
};

サーバーに sitesearch_mess.js として設置します。

HTML の修正

head 要素に sitesearch_mess.js を追加します。

<script type="text/javascript" charset="UTF-8" src="js/sitesearch_mess.js"></script>

ページ番号リンクの変更

ページ番号変更コンポーネントは、デフォルトでは現在のページ番号と、前後へのリンクを表示しています。
CSS を指定することで、ページ番号や、最初のページへのリンクを表示することができます。

ページ番号のリンクを表示する

ページへのリンクの数は pagenationCount パラメータに従います。
詳しくは、「設定パラメータリファレンス」を参照してください。

._pagenator ._nav._page {
  display:inline-block !important;
}

最初のページへのリンクを表示する

._pagenator ._nav._first {
  display:inline-block !important;
}

検索キーワードの文字コード変換

UTF-8 以外の文字コードで検索を行うことができます。
対応している文字コードについては、「URL パラメータリファレンス」を参照してください。

例: Shift_JIS を使用する。

  <form class="" method="get">
    <input type="text" name="q" id="q" value="" placeholder="検索キーワード">
    <input type="hidden" name="charset"  value="Shift_JIS">
    <input type="submit" name="" value="検索">
  </form>

URL パラメータ名の変更

標準では予約された URL パラメータ名を使用しますが、
設定パラメータにより、それらの値を変更することができます。

設定パラメータについては、「設定パラメータリファレンス」を参照してください。、
予約されている URL パラメータについては、「URL パラメータリファレンス」を参照してください。

例: ページ番号を示す値「ssp」を「page」に変更する。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputId: "q",
  userQueryParamNames: {
    resultPage: "page"
  }
};

表示完了後の処理の実行

表示時に DOM を更新するため、表示が完了しない時点の処理は失敗することがあります。
表示完了後に処理を行う場合、フック関数を利用してください。
フック関数について、「フック関数リファレンス」を参照してください。

例: 表示完了になったときにブラウザのコンソールにメッセージを表示する。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputid: "q",
  allUpdateHook: function() { console.log('allUpdated'); }
};

フィールドの別名の定義

データ項目 (フィールド) に別名を定義することができます。
たとえば、価格を格納する price というフィールドに地域ごとの個別の価格がある場合、東京の価格は price_tokyo 、大阪の価格は price_osaka に格納しておき、ページにその地域の価格を表示することができます。
ユーザーがフィールドの別名をインタビューシートに記入の上、GENIEE に提示する必要があります。

  fieldsAlias: {
    [フィールド]: "[フィールドの別名]",
  },

例: 東京のページ

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  fieldsAlias: {
    price: "price_tokyo",
  },
};

例: 大阪のページ

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  fieldsAlias: {
    price: "price_osaka",
  },
};

CSS の読み込みの停止

デザインのカスタマイズのために読み込みを停止させたい場合、
設定タグの styleSheetAutoLoading パラメータに false を設定してください。

設定可能な設定タグ

  • サーチ設定タグ
  • おすすめリンク設定タグ
  • キーワードランキング設定タグ
  • レコメンド設定タグ
  • ハッシュタグ設定タグ

例: サーチ設定タグ

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputid: "q",
  styleSheetAutoLoading: false
};

検索結果画面ごとの統計表示

検索結果画面にスクリーン ID を指定することで、スクリーン ID ごとに統計情報を見ることができます。
screenId パラメータの値には以下のような種類のキーワードを指定することができます。識別しやすい文字列を指定してください。

  • 言語
  • ドメイン

screenId パラメータの指定がなければ、値には「default」が指定されます。

たとえば、言語ごとに統計を取りたい場合、screenId パラメータで言語のキーワードを指定します。

// サーチ設定タグ (英語コンテンツを対象とした検索結果画面)
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  screenId: "en"
};

// サーチ設定タグ (日本語コンテンツを対象とした検索結果画面)
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  screenId: "jp"
};

管理画面での統計画面の操作は、管理画面マニュアルを参照してください。

機能を充実させるため、フロントエンドで Cookie および LocalStorage を使用しています。
利用者のプライバシーの権利を尊重し、Cookie および LocalStorage の利用は許可あるいは拒否を選択することができます。
拒否によりユーザビリティーに関わる一部の機能が提供されなくなることにご注意ください。

種類 名前 目的 サジェスト向け EC 検索向け サイトサーチ向け
LocalStorage bst.cid.0 長期的なユーザ識別 ○ ○ ○
Cookie bst.sid.0 短期的なユーザ識別 ○ ○
LocalStorage popfind_[uid]_comparison 比較機能選択履歴 ○
LocalStorage popfind_[uid]_checked 検索結果選択履歴 ○ ○
Cookie bst.ih.0 入力履歴 ○
LocalStorage bstDisableBrowserStorage Cookie および LocalStorage の使用を切り替える ○ ○ ○

Cookie および LocalStorage の利用を拒否するには useBrowserStorage を false に設定してください。
以下のように設定を行います。

// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  useBrowserStorage: false,
};