Voice Commerce

Is voice commerce the next big thing in Online Shopping?

What is Voice commerce (vCommerce) actually means?

Well, Voice commerce is a user interaction with a commercial website that incorporates voice recognition technology. Rather than the traditional point-and-click method of making choices, the user speaks into a microphone and makes selections as spoken words and phrases. This adds an ease-of-access to the consumer of today and has made the communication between the human and the device more flexible.

How to Make vCommerce works for E-commerce?

As the accuracy of voice search or voice recognition becomes more precise, consumers and e-commerce retailers will reap benefits and its popularity will continue to rise. Presently there are smart-homes devices with voice-controlled personal assistants like Apple’s HomePod powered by Siri, Amazon’s Echo powered by Alexa, Google Home to Ali Baba’s Tmall Genie are waiting to unleash the next disruption in e-commerce, Amazon is clearly leading the disruptive voice-commerce wave.

Who is benifited?

  • People with physical disabilities who cannot use the keyboard or mouse.
  • People with chronic conditions, such as repetitive stress injuries (RSI), who need to limit or avoid using the keyboard or mouse.
  • People with cognitive and learning disabilities who need to use voice rather than to type.

How to implement the voice search with Magento 2?

Introduction of Web Speech API to Chrome and Firefox brings new possibilities of voice interaction with websites and, more importantly, accessibility.

Web Speech API includes two main components: Speech Recognition and Voice Synthesis. In this tutorial, we are going to use the Speech Recognition API to implement basic Voice Search in Magento 2 header search.

Note: This Web Speech API is supported on Google Chrome (enabled by default), Opera and on Mozilla Firefox (needs to be enabled in about:config) with global support of 60%, according to the caniuse.com data at the time of writing of this article.

First, in the web/js folder, we need to create a JavaScript file where we will add our Speech Recognition functionality. We have created a file called voiceSearch.js with the following code which attaches an event to the button (that we’ll add to our template), listens to a speech, parses the speech, outputs interim results to the search text input, outputs final results to the search input and submits the search form after user has done speaking.

define([
        'jquery',
        'domReady!'
    ], function ($) {
	'use strict';
	var $voiceSearchTrigger = $("#voice-search-trigger");
	var $miniSearchForm = $("#search_mini_form");
	var $searchInput = $("#search");
	window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
	function _parseTranscript(e) {
		return Array.from(e.results).map(result => result[0]).map(result => result.transcript).join('')
	}
 
	function _transcriptHandler(e) {
		$searchInput.val(_parseTranscript(e));
		if (e.results[0].isFinal) {
			$miniSearchForm.submit();
		}
	}
 
	if (window.SpeechRecognition) {
		var recognition = new SpeechRecognition();
		recognition.interimResults = true;
		recognition.addEventListener('result', _transcriptHandler);
	} else {
		alert("Speech Recognition is not supported in your browser or it has been disabled.");
	}
 
	function startListening(e) {
		e.preventDefault();
		$searchInput.attr("placeholder", "Listening...");
		recognition.start();
	}
 
	return function() {
		$voiceSearchTrigger.on('click touch', startListening);
	}
});

Now we need to add voiceSearch.js to requirejs-config.js in order to load the file.

var config = {
    map: {
        '*': {
            'voiceSearch': 'js/voiceSearch'
        }
    }
};

After that, we will have to override our form.mini.phtml file which is located in <Vendor>/<theme>/Magento_Search/templates/form.mini.phtml. Search for the div element with the class of control and add the button with the id of voice-search-trigger and call the voiceSearch when search input has been loaded. You can see the example of the edited code below.

<div class="control">
	<button class="action primary" id="voice-search-trigger"><?= /* @escapeNotVerified */ __('Voice Search') ?></button>
	<input id="search"
		data-mage-init='{"quickSearch":{
		"formSelector":"#search_mini_form",
		"url":"<?= /* @escapeNotVerified */ $helper->getSuggestUrl()?>",
		"destinationSelector":"#search_autocomplete"},
		"voiceSearch":{}
		}'
		type="text"
		name="<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
		value="<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
		placeholder="<?= /* @escapeNotVerified */ __('Search entire store here...') ?>"
		class="input-text"
		maxlength="<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
		role="combobox"
		aria-haspopup="false"
		aria-autocomplete="both"
		autocomplete="off"/>
	<div id="search_autocomplete" class="search-autocomplete"></div>
	<?= $block->getChildHtml() ?>
</div>

With a few CSS alterations, you could now see the result of voice search enabled in your store. Hope you enjoyed this article feel free to share this post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.