Add search functionality in the order history list page of website

Requirement is to include a search function in the order history list page of website, so that user can search a specific order by PO Number or SO Number.

Solution:

Create an extension and extend the “OrderHistoryListView”. Adding example below.

Javacsript entrypoint file

//Extending OrderHistoryListView to add the functionality "search by po or so" in the order history list page.
				_.extend(OrderHistoryListView.prototype, {
					template: jj_order_history_list_tpl,
					initialize: _.wrap(OrderHistoryListView.prototype.initialize, function (fn) {
						fn.apply(this, _.toArray(arguments).slice(1));
						var self = this;
						this.searchCollection = [];
					}),
					events: _.extend(OrderHistoryListView.prototype.events, {
						'change [data-action="searchByPO"]': 'searchPONumber',
						'keyup [data-action="searchByPO"]': 'searchPONumber'
					}),
					searchPONumber: _.debounce(function (e) {
						this.searchByPO(e);
					}, 1000),
					searchByPO: function (e) {
						var self = this;
						if (_.isEmpty(self.searchCollection)) {
							self.searchCollection = self.collection.models;
						}
						var InputSearchNumber = e.target.value;
						this.inputFilter = InputSearchNumber;
						this.collection.models = _.filter(self.searchCollection, function (searchModel) {
							return ((searchModel.otherrefnum).includes(InputSearchNumber) || (searchModel.tranid).includes(InputSearchNumber))
						})
						this.render();
					},
					getContext: _.wrap(OrderHistoryListView.prototype.getContext, function (fn) {
						var context = fn.apply(this, _.toArray(arguments).slice(1));
						let container = SC.Application(Object.keys(SC._applications)[0]);
						var self = this;
						if (!_.isEmpty(this.inputFilter)) {
							_.defer(function () {
								$("#searchPO").val(self.inputFilter);
								$("#searchPO").focus();
							})
						}
						let currentView = container.getLayout().currentView;
						if (currentView.el.className == "OrderListView") {
							context.showSearchPO = true;
						} else {
							context.showSearchPO = false;
						}
						return context;
					})
				})

Template file

{{#if showBackToAccount}}
<a href="/" class="order-history-list-button-back">
	<i class="order-history-list-button-back-icon"></i>
	{{translate 'Back to Account'}}
</a>
{{/if}}
<section class="order-history-list">
	<header class="order-history-list-header">
		<h2>{{pageHeader}}</h2>
	</header>
	<div class="order-history-list-header-nav">
		<div class="order-history-list-header-button-group">
			{{#if openIsActive}}
			<span class="order-history-list-header-button-open-active">{{translate 'Open'}}</span>
			{{else}}
			<a href="/open-purchases" class="order-history-list-header-button-open">{{translate 'Open'}}</a>
			{{/if}}
			{{#if isSCISIntegrationEnabled}}
			{{#if inStoreIsActive}}
			<span class="order-history-list-header-button-instore-active">{{translate 'In Store'}}</span>
			{{else}}
			<a href="/instore-purchases" class="order-history-list-header-button-instore">{{translate 'In Store'}}</a>
			{{/if}}
			{{/if}}
			{{#if allIsActive}}
			<span class="order-history-list-header-button-all-active">{{translate 'All'}}</span>
			{{else}}
			<a href="/purchases" class="order-history-list-header-button-all">{{translate 'All'}}</a>
			{{/if}}
		</div>
	</div>
	<div data-view="ListHeader" {{#if openIsActive}}style="display:none;" {{/if}}></div>
	{{#if showSearchPO}}
	<div class="list-header-view-searchPO">
		<div class="list-header-view-sorts">
			<div class="list-header-view-filters">
				<div class="list-header-view-datepicker-container-input">
					<input class="list-header-view-accordion-body-input" data-action="searchByPO"
						class="list-header-view-searchPO" id="searchPO" value="{{value}}"
						placeholder="Serach by PO or SO" />
				</div>
			</div>
		</div>
	</div>
	{{/if}}
	{{#if collectionLengthGreaterThan0}}
	<div class="order-history-list-recordviews-container">
		<table class="order-history-list-recordviews-actionable-table">
			<thead class="order-history-list-recordviews-actionable-header">
				<tr>
					<th class="error">
						<span>{{translate 'SO Number'}}</span>
					</th>
					{{#each columns}}
					<th class="order-history-list-recordviews-actionable-{{type}}-header">
						<span>{{label}}</span>
					</th>
					{{/each}}
					<th class="order-history-list-recordviews-actionable-actions-header">
						<span>{{translate 'Tracking Number'}}</span>
					</th>
				</tr>
			</thead>
			<tbody class="order-history-list" data-view="Order.History.Results"></tbody>
		</table>
	</div>
	{{else}}
	{{#if isLoading}}
	<p class="order-history-list-empty">{{translate 'Loading...'}}</p>
	{{else}}
	<div class="order-history-list-empty-section">
		<h5>{{translate 'You don\'t have any purchases in your account right now.'}}</h5>
		{{#unless allIsActive}}
		<p>{{translate 'To see a list of all your past purchases, you can go to the tab <a href="/purchases"
				class="">All</a>.'}}</p>
		{{/unless}}
		{{#if isSCISIntegrationEnabled}}
		{{#if openIsActive}}
		<p>{{translate 'If you are looking to review some past purchases made in one of our brick and mortar stores,
			please check the tab <a href="/instore-purchases" class="">In Store</a>.'}}</p>
		{{/if}}
		{{/if}}
	</div>
	{{/if}}
	{{/if}}
	{{#if showPagination}}
	<div class="order-history-list-case-list-paginator">
		<div data-view="GlobalViews.Pagination"></div>
		{{#if showCurrentPage}}
		<div data-view="GlobalViews.ShowCurrentPage"></div>
		{{/if}}
	</div>
	{{/if}}
</section>



{{!----
Use the following context variables when customizing this template:

pageHeader (String)
collectionLengthGreaterThan0 (Boolean)
isLoading (Boolean)
showPagination (Boolean)
showBackToAccount (Boolean)
isSCISIntegrationEnabled (Boolean)
allIsActive (Boolean)
openIsActive (Boolean)
inStoreIsActive (Boolean)

----}}