As per the default behavior, the search will return only the parent item, even if we are specifically searching for a particular one. To display the corresponding matrix item and navigate to the Product Detail Page (PDP) with options corresponding to the searched SKU, customization is required. We need to create an extension to extend the item search view and its related methods.
The code has been added:
_.extend(ItemsSearcherView.prototype, {
onItemSelected: _.wrap(ItemsSearcherView.prototype.onItemSelected, function (fn) {
this.$el.preventDefault();
var item_id = this.$(fn.target).data('itemid');
this.options.selectedItem = 79622;
this.trigger(
'itemSelected',
{
selectedItem: this.collection.get(item_id),
collection: this.collection.models,
currentQuery: this.options.query,
isResultCompleted: this.options.ajaxDone
}
);
}),
getSuggestionItemTemplate: _.wrap(ItemsSearcherView.prototype.getSuggestionItemTemplate, function (fn) {
var itemid = _.toArray(arguments).slice(1)[0];
var modelChild = undefined;
var self = this;
if ((self.collection.models).length > 0) {
modelChild = getKeyitem(self, itemid);
}
var item_view_options = _.extend({}, this.options.itemViewOptions, {
model: modelChild ? modelChild.currentItem : undefined,
query: this.options.query,
areResults: !!this.collection.length,
isAjaxDone: this.options.ajaxDone,
childItem: modelChild ? modelChild.childItem : undefined
}),
items_searcher_item = new this.options.itemView(item_view_options);
items_searcher_item.render();
return items_searcher_item.$el;
}),
getItemIds: _.wrap(ItemsSearcherView.prototype.getItemIds, function (fn) {
var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
var query = (this.options.query).trim();
var queryStr = this.options.query;
query = (query).split(/s/).join('');
var data = [];
_.each(this.collection.models, function (currentItem) {
currentItem._urls = currentItem.model ? currentItem.model.get('_url') : null;
currentItem._names = currentItem.model ? currentItem.model.get('_name') : null;
queryStr = queryStr.replace(/[^a-zA-Z_]/g, '');
queryStr = query.toLowerCase();
var name = currentItem.get('_name');
name = name.replace(/[^a-zA-Z_]/g, '');
name = name.toLowerCase();
var itemId = currentItem.get('itemid');
itemId = itemId.replace(/s/g, '');
itemId = itemId.toLowerCase();
var itemset = currentItem.get('matrixchilditems_detail') ? currentItem.get('matrixchilditems_detail') : null;
var listItem = [];
if (itemId != query.toLowerCase() && name != queryStr) {
if (!!itemset) {
if (itemset.length > 0) {
listItem = itemset.map(function (item) {
return {
internalid: item.internalid,
itemid: item.itemid,
upccode: item.upccode
};
});
} else {
listItem = {
internalid: currentItem.get('internalid'),
itemid: currentItem.get('itemid'),
upccode: currentItem.get('upccode')
};
}
}
data.push(listItem);
}
});
var itemArray = Array.prototype.concat.apply([], data);
var result = itemArray.map(function (item, index) {
var existingname = 1;
if (isNaN(query)) {
var row_ben_name = item.itemid;
existingname = row_ben_name.toLowerCase().search(query.toLowerCase()) !== -1;
if (existingname) {
return item.internalid;
}
} else {
var row_ben_name = item.upccode;
existingname = row_ben_name.toLowerCase().search(query.toLowerCase()) !== -1;
if (existingname) {
return item.internalid;
}
}
});
result = result.filter(function (element) {
return element !== undefined;
});
if ((isNaN(query)) && (result.length == 0) && (itemArray.length > 0)) {
result = itemArray.map(function (item) {
return item.internalid;
});
}
if (result.length > 4)
result.slice(0, 4);
return result.slice(0, 4);
})
});
function getKeyitem(self, value, query) {
var modelChild = undefined;
var query = (self.options.query);
var queryStr = query.replace(/[^a-zA-Z_]/g, '');
queryStr = query.toLowerCase();
query = query.replace(/s/g, '');
_.each(self.collection.models, function (currentItem) {
var name = currentItem.get('_name');
name = name.replace(/[^a-zA-Z_]/g, '');
name = name.toLowerCase();
var itemId = currentItem.get('itemid');
itemId = itemId.replace(/s/g, '');
itemId = itemId.toLowerCase();
if (itemId === query.toLowerCase() || name === queryStr) {
modelChild = {
currentItem: currentItem,
childItem: null
};
return modelChild;
}
else if (!!currentItem.get('matrixchilditems_detail')) {
if (currentItem.get('matrixchilditems_detail').length > 0) {
_.find(currentItem.get('matrixchilditems_detail'), function (childItem) {
if (childItem.internalid == value) {
modelChild = {
currentItem: currentItem,
childItem: childItem
};
return modelChild;
}
});
} else {
if (currentItem.get('internalid') == value) {
modelChild = {
currentItem: self.collection.get(value),
childItem: null
};
return modelChild;
}
}
}
});
return modelChild;
}
_.extend(ItemsSearcherItemView.prototype, {
getContext: _.wrap(ItemsSearcherItemView.prototype.getContext, function (fn) {
var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
try {
var option = this.options;
var matrixparent = option.childItem;
if (this.model && matrixparent) {
var colorSet = this.model.get('options').models;
var baseUrl = this.model.get('_url');
var newUrl = "";
newUrl += baseUrl + '?quantity=1';
for (var i = 0; i < colorSet.length; i++) {
var optionRequired = colorSet[i].get('itemOptionId');
var selectedOptionValue = matrixparent[optionRequired];
var itemOptionValue = colorSet[i].get('values');
itemOptionValue = _.reject(itemOptionValue, function (item) {
return item.label != selectedOptionValue;
});
var optionUrl = itemOptionValue[0].url.split('?')[1];
newUrl += "&" + optionUrl;
}
var thumbnail = this.model.get('_thumbnail');
var itemName = matrixparent.custitemmatrixchildwebdisplayname ? matrixparent.custitemmatrixchildwebdisplayname : matrixparent.itemid;
this.model.set('storedisplayname2', itemName);
this.model.set('_name', matrixparent.custitemmatrixchildwebdisplayname);
this.model.set('_url', newUrl);
return {
model: this.model,
thumbnail: this.options.areResults ? thumbnail : {},
currentQuery: _(this.options.query).escape(),
isItemSelected: !!this.model,
hasResults: this.options.areResults,
isAjaxDone: this.options.isAjaxDone
};
} else {
return originalRet;
}
} catch (e) {
console.log('err@ItemsSearcherItemView', e);
return originalRet;
}
})
});