カスタムテンプレート
高度な設定で、検索時に Javascript の処理を走らせることができるほか、highlight アニメーションや UI に関わるものを CSS と属性で変更しています。
設置カスタムエレメント
html
<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>
css
.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;
}
js
<script type="text/javascript">
if (typeof window !== 'undefined'){' '}
{
(window.mySubmitCallbackName = (results) => {
alert('フルカスタムページのsubmit callbackの例です!')
})
}
</script>