How to Implement Voice search in Magento 1

The release of Web Speech API to Chrome and Firefox created some new interesting possibilities in how we interact with websites and, more importantly, how we access them. Web Speech API includes two components:

1. Speech Recognition
2. Voice Synthesis

The Magento Platform – How to Implement Voice Search

In this article, we are going to talk about Speech Recognition, and how we can implement basic Voice Search in the Magento 1 platform header search. Before we start, a demo of the functionality of Speech Recognition can be found here.

It will give you an idea on how to start searching, recording voice messages and checking results. In this post, our main focus will be on the steps you need to take to achieve this, rather than focusing on the code. However, we’ll will also provide the code during each step.

First, you need to create a module directory under app > code > local > ElectricBot and create a directory VoiceSearch.

Next, under app > design > frontend > base > default create the following layout and template files:

layout > voice_search.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs"><script>voice_search/voice_search.js</script><params>data-group="jquery"</params></action>
            <action method="addCss"><stylesheet>voicesearch/css/voice_search.css</stylesheet></action>
        </reference>
        <reference name="header">
            <block type="core/template" name="voice.search" after="top.search" template="voicesearch/voice_search.phtml"/>
        </reference>
    </default>
</layout>

template > voice_search > voice_search.phtml:

<!--search icon-->
sbcs
<?php if(Mage::helper('voicesearch')->isEnabled()): ?>
    <button class="voice-search-button" id="start_button" onclick="startButton(event)">
        <i id="start_img" class="fa fa-microphone" aria-hidden="true"></i>
    </button>
<?php endif; ?>
<!--search icon-->

Then, you need to create a few configuration fields in the admin area to allow the administrator to decide whether they want to keep this functionality enabled or not for their store. Depending on the module status the admin has chosen you can control in the template if the voice search icon will show. All of this is included in the module package that you can get once you send us a request at: hello@electricbot.com.

How it Works:

1. Click on the Mic icon which shows up in the header search field.
2. Speak for the search keyword and allow access to use your microphone.
3. Press enter to Search and wait to be redirected to the results page.

The Benefits of Speech Recognition:

According to the W3C Web Accessibility Initiative, this new feature will help:

• People with physical disabilities who can’t 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 type.
• People with temporary limitations, such as a broken arm.

Additionally, this will help people who prefer using voice commands (on mobile devices) rather than typing search input.
If you’ve completed the configuration with the steps shown above, it should look like this (default theme):

The Magento Certified Developers at ElectricBot can perform this configuration for you, as well as anything else you may need for your Magento platform based store. Get a free consultation with one of our developers and see how they can help you optimize and grow your online store.

About Electricbot -

Deprecated: Function the_author_description is deprecated since version 2.8.0! Use the_author_meta('description') instead. in /var/www/html/wp-includes/functions.php on line 6031
Transformative Ecommerce Web Development and Digital Marketing Agency- Specializing in branding, web design, web development, SEO, and strategic marketing solutions for Magento2, WP & WooCommerce, Shopify, other Ecommerce powered platforms, custom apps, and more!

Call- 1-201-565-3050