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
Benefits of Voice Search for Magento 2 Store:
Following people or conditions would depend on the voice search facility and find it essential for a better user experience.
- People with disabilities cannot use a keyboard or mouse.
- People with temporary limitations like broken arms or hands.
- People with learning disabilities use voice instead of typing.
- People who prefer voice instead of typing to make the task quicker.
Steps to Implement Voice Search in Magento 2:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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(); } } |
Conclusion:
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!
This work on Firefox browser, Edge and opera browser