We can custom text for loading error messages that will be there for few seconds by extending the view and template in the template we can pass the variable and with the condition if that variable is there then it will display custom text or it will display default text.
Java script:
_.extend(ProductLineStockView.prototype, {
getContext: _.wrap(ProductLineStockView.prototype.getContext, function (fn) {
try {
var original = fn.apply(this, _.toArray(arguments).slice(1));
let outOfStockMessage = original.model.get("outofstockmessage") !== "" ?
original.model.get("outofstockmessage") : original.model.get("parentItem")?.outofstockmessage;
original.stockInfo.outOfStockMessage = outOfStockMessage !== "" && outOfStockMessage ? outOfStockMessage : original.stockInfo.outOfStockMessage;
let currentUrl = window.location.href;
original.isFavorites = currentUrl.includes("favourites");
return original;
} catch (e) {
console.log('An error occurred while displaying Out-Of-Stock message.', e);
}
}),
});
HTML:
<div class="product-line-stock">
{{#if isNotAvailableInStore}}
<div class='product-line-stock-msg-not-available'>{{#if isFavorites}} {{translate "Your favorite item is loading..."}} {{else}} {{translate 'This item is no longer available'}} {{/if}}</div>
{{else}}
{{#if showOutOfStockMessage}}
<p class="product-line-stock-msg-out">
<span class="product-line-stock-icon-out">
<i></i>
</span>
<span class="product-line-stock-msg-out-text">{{stockInfo.outOfStockMessage}}</span>
</p>
{{/if}}
{{#if showInStockMessage}}
<p class="product-line-stock-msg-in">
<span class="product-line-stock-icon-in">
<i></i>
</span>
{{stockInfo.inStockMessage}}
</p>
{{/if}}
{{/if}}
</div>