Custom Facets and Sorting Code Examples | Yext Hitchhikers Platform
Squaring Off Filter Button
.yxt-FilterOptions-optionLabel:before {
border-radius: 0;
}
Filter Button Color
.yxt-FilterOptions-optionLabel:after {
border-right: .0625rem solid var(--yxt-color-brand-primary);
border-bottom: .0625rem solid var(--yxt-color-brand-primary);
}
SortOptions and Facets Side-by-Side
To have SortOptions and Facets eappear next to each other, you can add a div
that wraps the sorting and facets components in your ‘[[vertical]].html.hbs’ file and. For example I’ve called it Answers-searchOptions in the example below:
<div class="Answers-resultsWrapper">
<div class="Answers-resultsColumn">
{{> templates/vertical-map/markup/spellcheck }}
<div class="Answers-searchOptions">
{{> templates/vertical-map/markup/sortoptions }} --}}
{{> templates/vertical-map/markup/facets }}
</div>
Then you need to format it using display:flex
. If you are using the Code Editor, you would add this to the answers.scss
file:
&-searchOptions {
display: flex;
}
You’ll probably want to tweak the padding on the components so they’re more aligned, and you can use width or flex-basis to make the components take up different amounts of space if you want.
Feedback
<% elem.innerText %>