support Голосовой поиск / Voice search

[BuslikDrev]

ИЗОБРАЖЕНИЯ

Скрытый текст

ИНФОРМАЦИЯ
Название модуля: Голосовой поиск - "Voice search"
Версия модуля: 1.0
Тип лицензии: Full (полная версия)
Тип установки: ocmod
Язык: Беларуская мова, English, Русский язык, Українська мова
Дата создания: 1.04.2021

Был протестирован на: OpenCart.cms 2.1.0.2.2 и OpenCart.pro 2.3.0.2.6 шаблон (default)
Название архива: Voice search v1.0 Full OpenCart 2.X-3.1.X.zip

ОБЛАДАТЕЛЯМ OpenCart.pro 2.x СКИДКА 20%

для получения скидки обратитесь к Admin

 

ДЕМОНСТРАЦИЯ

Скрытый текст

ДЕМО САЙТ
ДЕМО АДМИНКА
Логин: demo
Пароль: demo

ОПИСАНИЕ

Модуль предназначен для возможности задавать текст для поиска своим голосом, после распознавания речи модуль введёт слово и нажмёт на кнопку поиска.
Вывести кнопку звукозаписи можно для любого поля input в неограниченном количестве, как настроить смотрите FAQ ниже.
Используется эта технология: https://developer.mozilla.org/ru/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
Модуль хорошо сочетается с PWA и можно его загружать даже асинхронно т.к. написан на чистом javascript.

 

ВНИМАНИЕ!

Оригинальные файлы магазина не заменяет!
Нужен настроенный https протокол.

 

Модификатор "вносит изменения" в следующие файлы:

Скрытый текст

catalog/controller/common/header.php

УСЛОВИЯ СОГЛАШЕНИЯ
- Beta версии устанавливаете на свой страх и риск - бэкап базы данных (далее - БД) обязателен;
- Модуль (модификатор, дополнение, расширение, приложение) (далее - Модуль) можно устанавливать на 1 домен включая поддомены (одна покупка - один домен);
- Редактировать код можно только под нужды своего магазина;
- Распространение модуля запрещено;
- Техническая поддержка (далее - ТП) осуществляется только при появлении ошибки, бага, глюка (зависания) и не совместимости модуля с заявленными версиями Opencart и шаблонов на момент продажи, при установке на боевой сайт (рабочий хостинг);
- Адаптация модуля под другую версию Опенкарта, нестандартный шаблон и сторонние модули - платная;
- Автор модуля оставляет за собой право в любое время внести изменение в настоящее условие, описание и исходный код модуля;
- Автор модуля оставляет за собой право прекратить ТП пользователям по истечению 365 календарных дней со дня последнего обновления модуля (Full или Beta версии), или со дня окончания продления ТП, или при форс-мажорных обстоятельств;
- Автор не несёт ответственности за потерю или находку дохода пользователя из-за работы модуля;
- ТП осуществляется при условии соблюдения данного соглашения, пишите в личные сообщения.

Приобрести модуль можно ЗДЕСЬ!
Вопросы и пожелания можно задавать в данной теме.

 

 

FAQ

Внимание этот комментарий в будущем будет изменяться.

 

События для исполнения вашего кода, когда модуль загружен

window.addEventListener('busVoiceSearchBefore', function(e) {
	console.log('busVoiceSearch - запущен, можно установить своё условие запуска переопределив настройки модуля: ', busVoiceSearch.setting);
});

window.addEventListener('busVoiceSearch', function(e) {
	console.log('busVoiceSearch - запущен и пройдена проверка, значит можем использовать функции busVoiceSearch: ', window.busVoiceSearch);
});

window.addEventListener('busVoiceSearchAfter', function(e) {
	console.log('busVoiceSearch - запущен и пройдена проверка, а также выполнен код и возможно асинхронный код ещё выпоняется');
});

 

Список данных для настроек модуля (данные можно получить и через событие busVoiceSearchBefore переопределить):

busVoiceSearch.setting['lang-browser'] - получать язык браузера, а не сайта. По умолчанию отключено

busVoiceSearch.setting['lang'] - код языка получаемый из тега html, если нету, то из куков или браузера

busVoiceSearch.setting['lg'] - статус для размера экрана > 1200px

busVoiceSearch.setting['md'] - статус для размера экрана >= 992px и <= 1199px

busVoiceSearch.setting['sm'] - статус для размера экрана >= 768px и <= 991px

busVoiceSearch.setting['xs'] - статус для размера экрана < 768px

busVoiceSearch.setting['col'] - показывает какой размер экрана сейчас:

lg - > 1200px

md - >= 992px и <= 1199px

sm - >= 768px и <= 991px

xs - < 768px

busVoiceSearch.setting['ids'] - массив селекторов для поиска и привязки к html коду, подсчёт id начинается от нуля. По умолчанию это поле поиска, и массив такой: ['header input[name="search"]']. Поиск производится через document.querySelector(selectors)

busVoiceSearch.setting['button'] - функция для возможности изменить кнопку голосового поиска и её установку относительно элементу найденного по прописанному селектору в настройках ids. Функция получает такие данные, как element (результат document.querySelector), id (порядковый номер селекторов массива ids), selector (входные данные селекторов массива ids)

Пример функции по умолчанию:

Спойлер

busVoiceSearch.setting['button'] = function(element, id, selector) {
	var new_element = document.createElement('span');
	//new_element.id = 'bus-voice-search';
	new_element.innerHTML = '<i class="fa fa-microphone"></i>';
	new_element.style['position'] = 'absolute';
	new_element.style['padding'] = '10px';
	new_element.style['right'] = '90px';
	new_element.style['cursor'] = 'pointer';
	new_element.style['color'] = 'black';
	new_element.style['z-index'] = 2;
	element.parentNode.insertBefore(new_element, element.nextSibling);

	return [element, new_element];
}

 

 

busVoiceSearch.setting['button-html-on'] - html код или текст на который будет заменятся new_element.innerHTML = '<i class="fa fa-microphone"></i>'; когда началась запись звука. По умолчанию <i class="fa fa-circle"></i>

busVoiceSearch.setting['button-html-off'] - html код или текст на который будет заменятся new_element.innerHTML = '<i class="fa fa-microphone"></i>'; когда браузером запрещено использование микрофона. По умолчанию <i class="fa fa-microphone-slash"></i>

busVoiceSearch.setting['debug'] - дебаг режим, включает в разных местах модуля функцию console.log и выводит данные результатов событий или функций. По умолчанию отключено

 

Пример настройки кнопки для моего сайта с помощью модуля opencart аналитики:

<script><!--
// запускаем модуль для нужных нам экранов, например, только для мобильных
window.addEventListener('busVoiceSearchBefore', function(e) {
	busVoiceSearch.setting['lg'] = false;
	busVoiceSearch.setting['md'] = false;
	busVoiceSearch.setting['sm'] = false;
});

// устанавливаем свою кнопку в нужное нам место
window.addEventListener('busVoiceSearch', function(e) {
	busVoiceSearch.setting['ids'] = ['header input[name="search"]', 'main [class*="blog-search"] input[name="search"]'];
	busVoiceSearch.setting['button'] = function(element, id, selector) {
		if (id || selector == 'header input[name="search"]') {
			var new_element = document.createElement('span');
			//new_element.id = 'bus-voice-search-' + id;
			new_element.innerHTML = '<i class="fa fa-microphone"></i>';
			new_element.style['position'] = 'absolute';
			new_element.style['padding'] = '10px';
			new_element.style['right'] = '20%';
			new_element.style['cursor'] = 'pointer';
			new_element.style['color'] = 'black';
			new_element.style['z-index'] = 2;
			element.parentNode.insertBefore(new_element, element.nextSibling);
		}

		return [element, new_element];
	};
});
//--></script>

 

Готовые примеры настроек:

ШАБЛОН UNISHOP2

<script><!--
// запускаем модуль для нужных нам экранов, например, только для мобильных
window.addEventListener('busVoiceSearchBefore', function(e) {
	//busVoiceSearch.setting['lg'] = false;
	//busVoiceSearch.setting['md'] = false;
	//busVoiceSearch.setting['sm'] = false;
});

// устанавливаем свою кнопку в нужное нам место
window.addEventListener('busVoiceSearch', function(e) {
	busVoiceSearch.setting['ids'] = ['header input[name="search"]'];
	busVoiceSearch.setting['button'] = function(element, id, selector) {
		if (id || selector == 'header input[name="search"]') {
			var new_element = document.createElement('span');
			new_element.id = 'bus-voice-search-' + id;
			new_element.innerHTML = '<i class="fa fa-microphone"></i>';
			new_element.style['position'] = 'absolute';
			new_element.style['padding'] = '8px';
			new_element.style['right'] = '30px';
			new_element.style['cursor'] = 'pointer';
			new_element.style['color'] = 'black';
			new_element.style['z-index'] = 2;
			element.parentNode.insertBefore(new_element, element.nextSibling);
		}

		return [element, new_element];
	};
});
//--></script>