カスタムテンプレート

高度な設定で、検索時に 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>