Добавление товара в корзину по QR коду

Данное решение создавалось для павильона быстрого питания, чтобы обеспечить возможность быстрого формирования заказа в зале и передачи его на кухню. А также это решение дало возможность создавать счета для онлайн-оплаты и оплачивать их сразу на мобильном

Меню выглядит так:

Как работает сканирование QR:

• Отройте эту страницу в браузере мобильного телефона, оснащенного задней камерой и разрешите странице доступ к камере.
• Нажмите на значок QR-кода, размещенный под кнопкой корзины
• Наведите на QR-код товара, он будет автоматически добавлен в корзину

Скрипт для сканирования QR

Плагин для доступа к камере через JS и распознавания QR

<script src='https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js'></script>

Стили для офоромления контейнера вывода изображения с камеры

<style>
#enscart_qr_wrapper {
    text-align: center;
    position: fixed;
    top: 150px;
    right: 20px;
    z-index: 1140;
    width: 60px;
    cursor: pointer;
    background-color: #eee9;
    border-radius: 5px;
}

</style>

Обработчки для инициализации плагина камеры и добавления товара в корзину при успешном распознании QR

<script>
document.addEventListener("EasyNetShopLoaded", function(event) { 
	let ens_QRReader = '<div id="ens_reader" style="display:none;"></div>';
	var html5QrCode;
	var qrCodeSuccessCallback;
	var config;
	ens_jQuery('body').append(ens_QRReader).ready(function () {
	    
		html5QrCode = new Html5Qrcode("ens_reader");
		qrCodeSuccessCallback = (decodedText, decodedResult) => {
			if (ens_jQuery(".easynetshop-modalcontainer").css('display') == 'none'){
				easynetshop_buy(decodedText);
				$( "#ens_reader" ).hide();
				html5QrCode.stop();
			}
		};
		config = { fps: 1, qrbox: { width: 350, height: 350 } };
    	});



    let ens_QRscanButton = '<div id="enscart_qr_wrapper"><img src="https://lk.easynetshop.ru/box/scan-qr-code.svg" width="40"></div>';
    ens_jQuery('body').append(ens_QRscanButton).click(function(){
	if ($('#ens_reader').is(":hidden")) {
		$( "#ens_reader" ).show();
		html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
	} else {
		$( "#ens_reader" ).hide();
		html5QrCode.stop();
	}
	
    });

}, false);
</script>