Source: components/instant-search/instant-search-block/instant-search-result-block-view-all.js

import jQ from "jquery";

import BaseComponent from "../../base-component";
import Class from "../../../helpers/class";
import Utils from "../../../helpers/utils";
import Globals from "../../../helpers/globals";
import Settings from "../../../helpers/settings";
import Lables from "../../../helpers/labels";

/**
 * Instant search result - View All block
 * @extends BaseComponent
 */
class InstantSearchResultBlockViewAll extends BaseComponent {
	/**
	 * @constructs
	 */
	constructor() {
		super();
		/**
		 * The Instant search result data
		 * @type {Object}
		 * @default empty string
		 */
		this.data = '';
		/**
		 * This is jQuery object and contains the DYM-DOM as well
		 * @type {Object}
		 * @default null
		 */
		this.$element = null;
	}

	/**
	 * Get the raw HTML template of View All block
	 */
	getTemplate() {
		return `
			<li class="{{class.searchSuggestionHeader}}-view-all {{class.searchSuggestionHeader}}" aria-label="View All">
				<a href="{{viewAllUrl}}">{{label.suggestion.viewAll}}</a>
			</li>
		`;
	}

	/**
	 * Replace the brackets in raw html template with proper values
	 * @returns {String} HTML string
	 */
	compileTemplate() {
		var suggestionQuery = Utils.getValueInObjectArray('suggest_query', this.data);
		if (suggestionQuery !== '') return '';
		/**
		 * Build content when total_product > 0
		 * If the request is did_you_mean, get the number from suggest_total_product
		 */
		var totalProduct = Utils.getValueInObjectArray('total_product', this.data);
		var suggestTotalProduct = Utils.getValueInObjectArray('suggest_total_product', this.data);
		if (suggestTotalProduct !== '') totalProduct = suggestTotalProduct;
		// Check if total_product > display number of products
		var suggestionBlocks = Settings.getSettingValue('search.suggestionBlocks');
		var displayProductNumber = Utils.getValueInObjectArray('products', suggestionBlocks, 'type', 'number');
		if (totalProduct == 0 || totalProduct <= displayProductNumber) {
			return '';
		}
		// Build search page URL
		var viewAllUrl = Utils.reBuildUrlBaseOnLocale('/search?' + Globals.searchTermKey + '=' + Utils.encodeURIParamValue(Globals.currentTerm));
		return this.getTemplate()
			.replace(/{{class.searchSuggestionHeader}}/g, Class.searchSuggestionHeader)
			.replace(/{{label.suggestion.viewAll}}/g, Lables.suggestion.viewAll)
			.replace(/{{ count }}/g, totalProduct)
			.replace(/{{viewAllUrl}}/g, viewAllUrl);
	}

	/**
	 * Render the view All block
	 */
	render() {
		this.$element = jQ(this.compileTemplate());
	}

	/**
	 * Set data for View All component
	 * @param {Object} data the instant search result data
	 */
	setData(data) {
		if (data) {
			this.data = data;
		} else {
			this.data = null;
		}
	}
}

export default InstantSearchResultBlockViewAll;