«Facilitador de Consulta de Precios»
Simplifica la Búsqueda de Precios con Nuestro Verificador de Precios
Nuestro verificador de precios está diseñado para simplificar la búsqueda de precios tanto para clientes como para el personal de tu tienda. Con solo acercar el código de barras al lector, podrán acceder de manera instantánea a información vital como el precio, la descripción y cualquier oferta asociada al artículo.
Echale un vistazo clic en la imagen para ver la demo:
Ventajas Destacadas:
- Precios Siempre al Día: Mantén la tranquilidad de que los datos de tus productos están siempre actualizados y precisos.
- Instalación sin Complicaciones: Nuestros verificadores se adaptan con facilidad a diferentes ubicaciones: lineales, cabeceras, columnas y paredes.
- Aprovecha tus Dispositivos Existentes: Ahorra dinero al utilizar tabletas o smartphones en lugar de costosos dispositivos específicos.
- Elimina la Necesidad de Etiquetar: Facilita la consulta de precios en áreas desafiantes de etiquetar y brinda un rendimiento excepcional en zonas con gran cantidad de productos.
- Fomenta Compras por Impulso: Colocar el producto al alcance de la mano influye positivamente en las decisiones de compra impulsiva por parte de los clientes.
Para aprovechar todas estas ventajas, solo requieres el software especializado SpegaSoft Facil Gestion. Nuestro software se adapta a una variedad de negocios, desde despensas hasta ferreterías, suministros industriales, centros de bricolaje y almacenes de material de construcción.
Simplifica la experiencia de compra y optimiza la eficiencia en tu negocio con nuestro verificador de precios y el software SpegaSoft Facil Gestion. ¡Comienza a ofrecer una experiencia de compra más informada y eficaz hoy mismo!
Forma de implementación:
A continuación te brindamos el código HTML, CSS y JS del cual se compone la vista o interface del verificador de precios. El cual es completamente modificable a tus necesidades.
Lo primero que necesitas es encontrar el archivo Visor_Precios.html que se encuentra dentro de la carpeta Facil Gestion: C:\Facil Gestion.
Luego de encontrarlo, deberas abrirlo con algun editor de codigo o texto por ejemplo: «Bloc de Notas» o cualquier otro.
Link archivo Visor_Precios.html para descargarlo.
Codigo:
<!DOCTYPE html>
<html lang="es">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background: #141414;background-size:100% 100%;
}
.precio {
box-shadow: 0 0 40px #fff;
}
.text {
overflow: hidden;position: absolute;
background: rgba(0, 0, 0, 0.6);
padding: -50px;
text-align:center;
left:0px;
right: 0px;
margin-left: -225px;
min-width: 650px;
bottom:0px;
margin-top: -20px;
}
p{
display: inline-block;
vertical-align: top;
margin: 0;
}
.word {
position: absolute;
width: 620px;
opacity: 0;
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: #FF7F27;
}
.belize {
color: #2980b9;
}
.pomegranate {
color: #c0392b;
}
.green {
color: #16a085;
}
.midnight {
color: #ffffff;
}
.contenedor {
width: 90%;
height: auto;
overflow: hidden;
margin: 20px auto;
padding: 20px;
text-align: center;
}
.estilo-x0 {
font-family: 'Russo One', sans-serif;
font-size: 3vw;
text-align:center;
shadow: #ffffff ;
}
.estilo-x1 {
font-family: 'Russo One', sans-serif;
font-size: 5vw;
text-align:center;
shadow: #ffffff ;
}
.estilo-x2 {
font-family: 'Russo One', sans-serif;
font-size: 9vw;
text-align:center;
}
html, body {
height:100%;
text-align: center;
}
/* your styles go here */
.btn {
font-weight: 400;
border: 1px solid transparent;
padding: 0.45rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.bg-azul {
background-color: #385A8D !important;
}
.text-naranja {
color: #FF7F27 !important;
}
</style>
<script>
function Consulta(e) {
if (e.which == 13 || e.which == 1) {
var xhr = new XMLHttpRequest(),
method = "GET";
IP = "http://192.168.0.220" // MODIFICAR LA IP POR LA PC QUE NECESITAS
url = IP+"/(VER)"+$("#codigo").val();
//alert(url);
$("#nombre").text("Cargando ...");
$("#precio").hide();
$("#precio2").hide();
$("#precio3").hide();
$("#info-precio").hide();
$("#info-precio2").hide();
$("#info-precio3").hide();
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
$("#nombre").text("");
$("#precio").text("");
$("#codigo").val("");
var info = JSON.parse(xhr.responseText);
//alert(xhr.responseText); // DESCOMENTAR PARA VER LOS VALORES RECIBIDOS
if(info.errorGetData) {
// NO ENCONTRO EL PRODUCTO
$("#nombre").text("PRODUCTO NO ENCONTRADO");
}else{
$("#nombre").text(info.nombre);
if(info.oferta.enoferta) {
$("#precio").text("$ " + info.oferta.precio);
}else{
$("#precio").show();
$("#precio2").show();
$("#precio3").show();
$("#info-precio").show();
$("#info-precio2").show();
$("#info-precio3").show();
$("#precio").text("$ " + info.precios.precio);
$("#precio2").text("$ " + info.precios.precio2);
$("#precio3").text("$ " + info.precios.precio3);
}
}
}
};
xhr.send();
};
}
document.getElementById("buscar_codigo").focus();
</script>
</head>
<body class="bg-azul">
<div>
<input autofocus id="codigo" type="text" placeholder="CODIGO DE BARRAS" onkeyup="Consulta(event);">
</div>
<div>
<nombre class="estilo-x1 text-center text-white align-middle" id="nombre">PASA EL PRODUCTO PARA VER SU PRECIO</nombre>
</div>
<div>
<precio3 class="precio span estilo-x2 bg-white text-center text-naranja badge-pill align-middle shadow shadow-lg" id="precio"></precio3>
<span class="estilo-x0 text-white" id="info-precio3"> EFECTIVO</span>
</div>
<div>
<precio2 class="precio span estilo-x1 bg-white text-center text-naranja badge-pill align-middle" id="precio2"></precio2>
<span class="estilo-x0 text-white" id="info-precio2"> TARJETA</span>
</div>
<div>
<precio1 class="precio span estilo-x1 bg-white text-center text-naranja badge-pill align-middle" id="precio3"></precio1>
<span class="estilo-x0 text-white" id="info-precio"> OTRO</span>
</div>
<div class="text" style="color:white;font-weight: 600;font-size: 40px;">
<p style="color:white">Spegasoft es</p>
<p>
<span class="word wisteria">Calidad.</span>
<span class="word belize">Servicio.</span>
<span class="word pomegranate">Seguridad.</span>
<span class="word green">Responsabilidad.</span>
<span class="word midnight">Seriedad.</span>
</p>
</div>
</body>
<script>
var words = document.getElementsByClassName("word");
var wordArray = [];
var currentWord = 0;
words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = "letter behind";
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = "letter out";
}, i*80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = "letter in";
},340+(i*80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML = "";
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement("span");
letter.className = "letter";
letter.innerHTML = content.charAt(i);
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 5000);
</script>
</html>Acceso via wifi:
Desde dispositivo conectado a la red wifi, abrir el navegador e ingresa la siguiente url: IP-de-PC/verificador Ej: 192.168.0.220/verificador
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.