カスタムテンプレート

高度な設定で、検索時にJavascriptの処理を走らせることができるほか、highlightアニメーションやUIに関わるものをCSSと属性で変更しています。

設置カスタムエレメント

<mf-search-box
  lang="ja"
  ajax-url="{取得した検索API URL}"
  use-links
  use-links-category-text="カテゴリー絞り込み"
  submit-callback="mySubmitCallbackName"
></mf-search-box>
<mf-featured-contents></mf-featured-contents>
<mf-search-results
  highlight-color="#fbb189"
  use-related-keywords
></mf-search-results>

.mf-filters_use-links_category_buttons .mf-filters_use-links_button--selected{
  background-color: #fccbb0 !important;
}
.mf-filters .mf-filters_use-links .mf-filters_use-links_category .mf-filters_use-links_category_buttons button:hover{
  border-color: #f98a4e !important;
  color: #f98a4e !important;
}
.mf-filters_use-links_other_sort_buttons .mf-filters_use-links_button--selected{
  background-color: #fccbb0 !important;
}
.mf-filters .mf-filters_use-links .mf-filters_use-links_other_sort .mf-filters_use-links_other_sort_buttons button:hover{
  border-color: #f98a4e !important;
  color: #f98a4e !important;
}
.mf-filters_use-links_other_page-max_buttons .mf-filters_use-links_button--selected{
  background-color: #fccbb0 !important;
}
.mf-filters .mf-filters_use-links .mf-filters_use-links_other_page-max .mf-filters_use-links_other_page-max_buttons button:hover{
  border-color: #f98a4e !important;
  color: #f98a4e !important;
}
.mf-filters_use-links_other_img-size_buttons .mf-filters_use-links_button--selected{
  background-color: #fccbb0 !important;
}
.mf-filters .mf-filters_use-links .mf-filters_use-links_other_img-size .mf-filters_use-links_other_img-size_buttons button:hover{
  border-color: #f98a4e !important;
  color: #f98a4e !important;
}
.mf-search-bar_button{
  background-color: #f98a4e !important;
}
.mf-search-results_pagination .mf-search-results_pagination_button.active-page{
  background-color: #f98a4e !important;
  border-color: #f98a4e !important;
}

<script type="text/javascript">
 if (typeof window !== 'undefined') {
    window.mySubmitCallbackName = (results) => {
      alert("フルカスタムページのsubmit callbackの例です！");
    }
  }
</script>