flashsearch.commonTemplates = { "fs-price": `

`, "fs-price-range": `

`, "fs-review-rate": `

`, "fs-custom-skeleton": ` `, }; flashsearch.searchResultsTemplates = { "fs-app": `

`, "fs-main": `

`, "fs-collection-page-heading": `

`, "fs-search-page-heading": `

{{ $t("searchPageHeading.searchResultsWithCount", {count: totalProducts, searchTerm: query}) }}

`, "fs-collection-header": `

{{header ? header : $t("searchResults.collectionPageHeader.products")}}

`, "fs-search-section": `

{{$t("searchResults.searchPageHeader.pageHeader", {count: totalProducts, searchTerm: query})}}

`, "fs-toolbar": ` `, "fs-sr-empty-page": `

`, // Filters "fs-filters-section-vertical": `

`, "fs-filters-section-horizontal": `

`, "fs-filters-section-horizontal-style-2": `

`, "fs-filters-section-filters-sidebar": `

`, "fs-filters-section-mobile": `

`, "fs-filter-by-each-filter": ` `, "fs-filter-by": `

Filtered by

`, "fs-filter-by-option": `

`, "fs-filters": ` `, "fs-filter": `

`, // Filter types "fs-filter-collection": `

`, "fs-filter-sub-collection": ` `, "fs-filter-list": `

`, "fs-filter-box": `

`, "fs-filter-range": `

{{filter.range.rangeFormat.replace("{0}", "").replace("{1}", "")}}

`, "fs-filter-review-rating": `

`, "fs-filter-stock-status": `

`, "fs-filter-swatch": `

`, "fs-filter-box-option": ` `, "fs-filter-list-option": ` `, "fs-filter-review-rating-option": ` `, "fs-filter-swatch-option": ` `, "fs-filter-option-amount": ` `, "fs-apply-filter-selections-btn": ` {{$t("searchResults.filter.applySelections")}} `, "fs-filter-actions": `

`, // End filter types "fs-filters-icon": `

`, "fs-button-clear-filter-option": ` `, "fs-button-clear-all-filter-options": ` `, "fs-button-view-more-filter-options": ` `, // End filters "fs-searchbox-mobile": ` `, "fs-total-products": `

`, "fs-search-results-sort-by": `

`, "fs-product-buttons": `

`, "fs-product-image": `

`, "fs-product-label": ` {{$t("general.productLabel.soldOut")}} {{$t("general.productLabel.new")}} {{saleLabelType === "percentage-label" ? $t("general.productLabel.salePercentage", {salePercentage: salePercentage}) : $t("general.productLabel.sale")}}

`, "fs-product-title": `

`, "fs-sr-review-rate": `

`, "fs-product-vendor": `

`, "fs-product-description": `

`, "fs-product-color": ` `, "fs-product-colors": `

`, "fs-product-sizes": `

`, "fs-wishlist": `

...

`, "fs-quick-view-item": `

`, "fs-search-results-grid-view-item": `

`, "fs-search-results-list-view-item": `

`, "fs-search-results-items": ` `, "fs-search-results-views": `

`, "fs-search-results-views-backup": `

`, "fs-custom-pagination": `

{{$t("searchResults.pagination.loadMoreTotal", {current: currentNumOfProducts, total: total})}}

`, "fs-skeleton-product-image": ` `, "fs-skeleton-product-title": ` `, "fs-skeleton-product-text": ` `, }; flashsearch.instantSearchTemplates = { "fs-app": `

`, "fs-instant-search": `

`, "fs-is-suggestions": `

`, "fs-is-collections": `

`, "fs-is-pages": `

`, "fs-is-product-items": `

`, "fs-is-product-item": `

{{$t("instantSearch.labels.sku")}}: {{sku}}

`, "fs-is-did-you-mean": `

`, "fs-instant-search-desktop": ` `, "fs-instant-search-mobile": `

`, "fs-highlighter": ` {{chunkItem.text}} `, "fs-highlight-text": ` `, "fs-is-suggestion-item": `

`, "fs-is-item": `

`, "fs-is-item-label": `

`, "fs-is-review-rate": `

`, "fs-is-searchbar-mobile": `

`, }; /* You can add any functions, variables ... like normal javascript codes And use it on every templates above Examples: - Define a function: function getImageSize() {}; - And using this function on templates: {{getImageSize(product.url)}} */ flashsearch.event.on("initSearchResults", function (app) { /* You can create a component and using it on search results templates. Examples: - Create a component for "Search results" area: app.createComponent("fs-my-custom", { template: `

this is my custom component

` }) - Then using it on search results templates: - Or event with more complex component with props: app.createComponent("fs-my-custom", { props: {msg: String}, template: `

here is my message: {{msg}}

` }) */ }); flashsearch.event.on("initInstantSearch", function (app) { /* You can create a component and using it on Instant search templates. Examples: - Create a component for "Instant search" area: app.createComponent("fs-my-custom", { template: `

this is my custom component

` }) - Then using it on Instant search templates: - Or event with more complex component with props: app.createComponent("fs-my-custom", { props: {msg: String}, template: `

here is my message: {{msg}}

` }) */ });

{{product.title}}

this is my custom component

here is my message: {{msg}}

this is my custom component

here is my message: {{msg}}

{{ collection.title }}

{{ $t("searchPageHeading.searchResultsWithCount", {count: totalProducts, searchTerm: query}) }}

{{$t("searchResults.searchPageHeader.pageHeader", {count: totalProducts, searchTerm: query})}}

{{$t("searchResults.toolbars.filters")}}

{{filter.label}}

{{filter.label}}

{{ collection.title }}

{{ $t("searchPageHeading.searchResultsWithCount", {count: totalProducts, searchTerm: query}) }}

{{$t("searchResults.searchPageHeader.pageHeader", {count: totalProducts, searchTerm: query})}}

{{$t("searchResults.toolbars.filters")}}

{{filter.label}} {{filter.tooltipContent}}

{{filter.label}} {{filter.tooltipContent}}

{{product.title}}

this is my custom component

here is my message: {{msg}}

this is my custom component

here is my message: {{msg}}

{{filter.label}}

{{filter.label}}