Hello Magento Friends,
In today’s blog, I am going to reveal How to Implement Voice Search in Magento 2.
Search is the most commonly used functionality of your website by visitors. If the user cannot find what they are looking for easily, they will get frustrated and leave the site. Along with making the search easy, it should be quick as well to not waste users’ time.
Let your customers swiftly look for products from your site by typing the first 3 letters of the product and get the relevant results without page refreshing. For that use Ajax Search for Magento 2.
Similarly, there are other ways to make the search functionality easy and quick. Include a voice search function in your Magento web store.
Contents
Following people or conditions would depend on the voice search facility and find it essential for a better user experience.
Step 1: First you need to add the default.xml file in the following path
app\code\Vendor\Extension\view\frontend\layout
Then add the code as follows
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="top.search">
<block name="top.search.voice.input"
template="Vendor_Extension::voice.phtml">
<arguments>
<argument name="title" xsi:type="string" translate="true">Voice Search</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page> Step 2: After then add voice.phtml in the following path
app\code\Vendor\Extension\view\frontend\templates\voice.phtml
And add code as given below
<?php $helper = $this->helper('Vendor\Extension\Helper\Data'); ?>
<button id="search-voice-input"
class="action voice-input hidden"
type="button"
title="voice-command"
data-mage-init='{
"Vendor_Extension/js/voice-search":{
"storeLocale": "<?= /* @noEscape */ $helper->getConvertedLocaleCode() ?>",
"skipSuggestions": <?= /* @noEscape */ (int) 0 ?>
}
}'>
<?= __("Voice Search"); ?>
</button> Step 3: Next, add voice-search.js in the following path
app\code\Vendor\Extension\view\frontend\web\js\voice-search.js
Then include the code mentioned below
define([
'jquery',
'mage/translate',
'Magento_Customer/js/customer-data',
'jquery-ui-modules/widget'
], function ($, $t, customerData) {
$.widget("magecomp.voiceSearch", {
options: {
searchInput: '#search',
activeClass: 'recording active',
storeLocale: 'en-US',
skipSuggestions: 0,
},
recognition: null,
active: false,
_init: function () {
if (('webkitSpeechRecognition' || 'SpeechRecognition') in window) {
this._initVoiceSearch();
}
},
_initVoiceSearch: function () {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
this.recognition = new SpeechRecognition();
this.recognition.lang = this.options.storeLocale;
this.recognition.onaudioend = this._onAudioEnd.bind(this);
this.recognition.onaudiostart = this._onAudioStart.bind(this);
this.recognition.onend = this._onEnd.bind(this);
this.recognition.onerror = this._onError.bind(this);
this.recognition.onnomatch = this._onNoMatch.bind(this);
this.recognition.onresult = this._onResult.bind(this);
this.recognition.onsoundend = this._onSoundEnd.bind(this);
this.recognition.onsoundstart = this._onSoundStart.bind(this);
this.recognition.onspeechend = this._onSpeechEnd.bind(this);
this.recognition.onspeechstart = this._onSpeechStart.bind(this);
this.recognition.onstart = this._onStart.bind(this);
this.element.on({
mousedown: this._onMouseDown.bind(this),
click: this._onClick.bind(this),
touchstart: this._onClick.bind(this),
});
$(this.element).removeClass('hidden');
},
_onMouseDown: function (event) {
event.preventDefault(); // Prevent stealing focus to prevent issues with mageQuickSearch widget
},
_onClick: function (event) {
this.active ? this.stopSpeechRecogniton() : this.startSpeechRecognition();
},
startSpeechRecognition: function () {
this.recognition.start();
this.active = true;
$(this.element).addClass(this.options.activeClass);
},
stopSpeechRecogniton: function () {
this.recognition.stop();
this.active = false;
$(this.element).removeClass(this.options.activeClass);
},
_onAudioEnd: function () {
// Open for extension
},
_onAudioStart: function () {
// Open for extension
},
_onEnd: function () {
this.stopSpeechRecogniton();
},
_onError: function (event) {
var message = this._getErrorMessage(event);
this._addPageMessage(
$t(message),
'error'
);
},
_onNoMatch: function (event) {
this._addPageMessage(
$t('Unable to recognise that phrase. Please try again.'),
'warning'
);
},
_onResult: function (event) {
var last = event.results.length - 1,
voiceInput = event.results[last][0].transcript;
if (voiceInput) {
this._searchVoiceInput(voiceInput);
} else {
this._onNoMatch(event);
}
},
_onSoundEnd: function () {
// Open for extension
},
_onSoundStart: function () {
// Open for extension
},
_onSpeechEnd: function () {
this.stopSpeechRecogniton();
},
_onSpeechStart: function () {
// Open for extension
},
_onStart: function () {
// Open for extension
},
_searchVoiceInput: function (voiceInput) {
var $search = $(this.options.searchInput)
$search.val(voiceInput);
if (this.options.skipSuggestions) {
$search.closest('form').submit();
} else {
$search.trigger('input');
}
},
_getErrorMessage: function (event) {
var errorCode = event.error,
logError = false,
message = '';
switch (errorCode) {
case 'no-speech':
message = 'No speech was detected.';
break;
case 'not-allowed':
message = 'Unable to start voice search. Please check your browser permissions and allow this website to use the microphone.';
break;
case 'language-not-supported':
message = 'Unfortunately, your language is not supported by speech to text services at this time.';
break;
case 'aborted':
message = 'Voice capture has been aborted.';
break;
case 'audio-capture':
message = 'Voice capture has failed.';
break;
case 'network':
message = 'Network connectivity is required for voice input.';
break;
default:
message = 'An error has occurred with the speech to text services.';
logError = true;
break;
}
if (logError && event.message) {
console.error(event.message);
}
return message;
},
_addPageMessage: function (message, type) {
var customerMessages = customerData.get('messages')() || {},
messages = customerMessages.messages || [];
messages.push({
text: message,
type: type
});
customerMessages.messages = messages;
customerData.set('messages', customerMessages);
}
});
return $.magecomp.voiceSearch;
}); Step 4: Lastly, add Data.php in the following path
app\code\Vendor\Extension\Helper\Data.php
And add the below-mentioned code snippet
<?php
namespace Vendor\Extension\Helper;
use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Framework\App\Helper\Context;
use Magento\Framework\Locale\Resolver as LocaleResolver;
class Data extends AbstractHelper
{
public function __construct(
Context $context,
LocaleResolver $localeResolver
) {
$this->localeResolver = $localeResolver;
parent::__construct($context);
}
public function getConvertedLocaleCode(): string
{
return str_replace('_', '-', $this->getStoreLocale());
}
public function getStoreLocale(): string
{
return $this->localeResolver->getLocale();
}
} As of now, you know How to Implement Voice Search in Magento 2 and execute it for your store. If you face any hardship while implementing the code, connect with me through the comment box. Share the tutorial with your friends to help them with voice search implementation. Stay updated with us for more!
Happy Coding!
In this guide, we'll explore how to integrate ChatGPT, an AI-powered chatbot, with a Laravel…
In the world of business, understanding financial metrics is crucial for making informed decisions and…
Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…
In this era, businesses are always on the lookout for ways to engage with their…
Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
View Comments
This work on Firefox browser, Edge and opera browser