SearchstaxFacetsWidget for Vue

The SearchStax Site Search solution offers a Vue SearchstaxFacetsWidget component to display facets on your custom search page.

Facet Selection and Order

Facet lists are configured and ordered on the Site Search Faceting Tab.

Props

  • facetingType – Faceting mode: ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’
  • itemsPerPageDesktop – Facets to show per group on desktop
  • itemsPerPageMobile – Facets to show per group on mobile
  • specificFacets – Array of facet names to display

Slots

#desktopFacets

Custom template for desktop facets.

Slot props:

  • facetsTemplateDataDesktop – Facets data object
  • isNotDeactivated – Check if facet group is active
  • toggleFacetGroup – Toggle facet group active state
  • isChecked – Check if facet value is selected
  • selectFacet – Handler for facet select
  • showMoreLessDesktop – Show more/less facets handler
  • facetContainers – Object of facet DOM containers

#mobileFacets

Custom template for mobile facets.

Slot props:

  • facetsTemplateDataMobile – Facets data object
  • selectedFacetsCheckboxes – Selected facet values
  • Other handlers (same as #desktopFacets)

Usage

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
></SearchstaxFacetsWidget>

The **SearchstaxFacetsWidget** component displays the facet filters.

Props

  • facetingType – Faceting mode: ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’
  • itemsPerPageDesktop – Facets to show per group on desktop
  • itemsPerPageMobile – Facets to show per group on mobile
  • specificFacets – Array of facet names to display

Slots

#desktopFacets

Custom template for desktop facets.

Slot props:

  • facetsTemplateDataDesktop – Facets data object
  • isNotDeactivated – Check if facet group is active
  • toggleFacetGroup – Toggle facet group active state
  • isChecked – Check if facet value is selected
  • selectFacet – Handler for facet select
  • showMoreLessDesktop – Show more/less facets handler
  • facetContainers – Object of facet DOM containers

#mobileFacets

Custom template for mobile facets.

Slot props:

  • facetsTemplateDataMobile – Facets data object
  • selectedFacetsCheckboxes – Selected facet values
  • Other handlers (same as #desktopFacets)

Usage

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
></SearchstaxFacetsWidget>

Example

<SearchstaxFacetsWidget
:facetingType="'or'"
:itemsPerPageDesktop="3"
:itemsPerPageMobile="99"
>
<template
#desktopFacets="{ facetsTemplateDataDesktop, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers }"
>
<div
v-if="facetsTemplateDataDesktop?.hasResultsOrExternalPromotions"
class="searchstax-facets-container-desktop"
>
<div
v-for="facet in facetsTemplateDataDesktop.facets"
:key="facet"
class="searchstax-facet-container"
:class="{ 'active': isNotDeactivated(facet.name) }"
>
<div>
<div
class="searchstax-facet-title-container"
@click="toggleFacetGroup(facet.name)"
>
<div class="searchstax-facet-title"> {{ facet.label }} </div>
<div class="searchstax-facet-title-arrow active"></div>
</div>
<div class="searchstax-facet-values-container">
<div
v-for="(facetValue, key) in facet.values"
:key="facetValue.value + facetValue.parentName"
class="searchstax-facet-value-container"
:class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
:ref="el => { facetContainers[key + facet.name] = el }"
>
<div class="searchstax-facet-input">
<input
type="checkbox"
class="searchstax-facet-input-checkbox"
:checked="isChecked(facetValue)"
:disabled="facetValue.disabled"
@click="selectFacet(key + facet.name, $event, facetValue, true)"
/>
</div>
<div
class="searchstax-facet-value-label"
@click="selectFacet(key + facet.name, $event, facetValue, false)"
>{{ facetValue.value }}</div>
<div
class="searchstax-facet-value-count"
@click="selectFacet(key + facet.name, $event, facetValue, false)"
>({{ facetValue.count }})</div>
</div>
<div
class="searchstax-facet-show-more-container"
v-if="facet.hasMoreFacets"
>
<div
class="searchstax-facet-show-more-container"
@click="showMoreLessDesktop($event, facet)"
>
<div
v-if="facet.showingAllFacets"
class="searchstax-facet-show-less-button searchstax-facet-show-button"
>less</div>
<div
v-else
class="searchstax-facet-show-more-button  searchstax-facet-show-button"
>more</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template
#mobileFacets="{ facetsTemplateDataMobile, selectedFacetsCheckboxes, isNotDeactivated, toggleFacetGroup, isChecked, selectFacet, showMoreLessDesktop, facetContainers, openOverlay, unselectFacet, unselectAll, closeOverlay }"
>
<div
class="searchstax-facets-container-mobile"
v-if="facetsTemplateDataMobile?.hasResultsOrExternalPromotions"
>
<div class="searchstax-facets-pills-container">
<div
class="searchstax-facets-pill searchstax-facets-pill-filter-by"
@click="openOverlay"
>
<div class="searchstax-facets-pill-label">Filter By</div>
</div>
<div class="searchstax-facets-pills-selected">
<div
class="searchstax-facets-pill searchstax-facets-pill-facets"
v-for="facet in selectedFacetsCheckboxes"
:key="facet.value"
@click="unselectFacet(facet)"
>
<div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>
<div class="searchstax-facets-pill-icon-close"></div>
</div>
</div>
<div
class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
v-if="selectedFacetsCheckboxes.length"
@click="unselectAll"
>
<div class="searchstax-facets-pill-label">Clear Filters</div>
</div>
</div>
<div
class="searchstax-facets-mobile-overlay"
:class="{ 'searchstax-show': facetsTemplateDataMobile?.overlayOpened }"
>
<div class="searchstax-facets-mobile-overlay-header">
<div class="searchstax-facets-mobile-overlay-header-title">Filter By</div>
<div
class="searchstax-search-close"
@click="closeOverlay"
></div>
</div>
<div class="searchstax-facets-container-mobile">
<div
v-for="facet in facetsTemplateDataMobile?.facets"
:key="facet"
class="searchstax-facet-container"
:class="{ 'active': isNotDeactivated(facet.name) }"
>
<div>
<div
class="searchstax-facet-title-container"
@click="toggleFacetGroup(facet.name)"
>
<div class="searchstax-facet-title"> {{ facet.label }} </div>
<div class="searchstax-facet-title-arrow active"></div>
</div>
<div class="searchstax-facet-values-container">
<div
v-for="(facetValue, key) in facet.values"
:key="facetValue.value + facetValue.parentName"
class="searchstax-facet-value-container"
:class="{ 'searchstax-facet-value-disabled': facetValue.disabled }"
:ref="el => { facetContainers[key + facet.name] = el }"
>
<div class="searchstax-facet-input">
<input
type="checkbox"
class="searchstax-facet-input-checkbox"
:checked="isChecked(facetValue)"
:disabled="facetValue.disabled"
@click="selectFacet(key + facet.name, $event, facetValue, true)"
/>
</div>
<div
class="searchstax-facet-value-label"
@click="selectFacet(key + facet.name, $event, facetValue, false)"
>{{ facetValue.value }}</div>
<div
class="searchstax-facet-value-count"
@click="selectFacet(key + facet.name, $event, facetValue, false)"
>({{ facetValue.count }})</div>
</div>
<div
class="searchstax-facet-show-more-container"
v-if="facet.hasMoreFacets"
>
<div
class="searchstax-facet-show-more-container"
@click="showMoreLessDesktop($event, facet)"
>
<div
v-if="facet.showingAllFacets"
class="searchstax-facet-show-less-button searchstax-facet-show-button"
>less</div>
<div
v-else
class="searchstax-facet-show-more-button  searchstax-facet-show-button"
>more</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="searchstax-facets-mobile-overlay-done"
@click="closeOverlay"
>Done</button>
</div>
</div>
</template>
</SearchstaxFacetsWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.