Cómo saber si el usuario está agitando el teléfono con jQuery

En este artículo quiero explicarte cómo implementar la detección de sacudidas (shake) en el teléfono utilizando jquery. Mediante el uso de esto he implementado un concepto muy interesante que, agitando el dispositivo móvil, obtendrás un descuento en un producto. Será muy sencillo añadir esta función a tu tienda online, además que, lo atractivo de la experiencia, atraerá a más gente a utilizar el ecommerce, lo que se traduce, lógicamente, en más ventas. Lo dicho, en este tutorial aplicaremos la detección de sacudidas para este menester, pero tu puedes utilizarlo para la función que quieras. ¿Te ha quedado claro? ¿Empezamos con el lío? Vamos a ello.

Tabla de productos

Tabla que contendrá todos los detalles de los productos

CREATE TABLE `products` (
`product_id` int AUTO_INCREMENT,
`product_name` varchar(150),
`product_img` text,
`price` float,
`discount` int,
PRIMARY KEY (`product_id`)
);

Javascript

Contendrá el código javascript, claro está. La función $.shake detecta las sacudidas en el dispositivo móvil y lo reporta a la función phoneShake()

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ios-shake.js"></script>
<script type="text/javascript" src="js/jquery.ui.shake.js"></script>
<script type="text/javascript">
$(document).ready(function() {

setInterval(function()
{
$('#shake').shake();
}, 3000);

function phoneShake()
{
var productID=$(".product_id").attr('id');
var url='ajax_discount.php';
var data='product_id='+productID;

$.ajax({
type:"POST",
url:url,
data:data,
dataType:"json",
success:function(data)
{
$('#shake').hide();
$('#result').html(data);
}
});
}

$.shake({
callback: function()
{
phoneShake();
}
});
});
</script>

Código PHP

Contendrá el código PHP. Obtiene la información del producto de la tabla products.

require 'db.php';
$product_id='1';
$sql = "SELECT product_name,product_img,price FROM products WHERE product_id=:product_id";

try {
$db = getDB();
$stmt = $db->prepare($sql);
$stmt->bindParam("product_id", $product_id);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;

foreach($products  as $row)
{
$product_name=$row->product_name;
$product_img=$row->product_img;
$price=$row->price;
}
}
catch(PDOException $e)
{ 
echo 'Connection Error';
}

Código HTML

Atención al meta tag viewport para la vista móvil

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
//JavaScript
</head>
<body>
<div id="<?php echo $product_id;?>" class="product_id">
<img src="<?php echo $product_img;?>" /> 
</div>
<div id="shake">Just shake your phone</div>
<div id="result"><?php echo $price;?></div>
</body>
<html>

ajax_discount.php

Esto mostrará el descuento de un producto.

require 'db.php';
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST")
{
$product_id=$_POST['product_id'];
$sql = "SELECT discount,price FROM products WHERE product_id=:product_id";

try {
$db = getDB();
$stmt = $db->prepare($sql);
$stmt->bindParam("product_id", $product_id);
$stmt->execute();
$discount = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;
echo '{"product_discount": ' . json_encode($discount) . '}';
}
catch(PDOException $e)
{
echo 'Connection Error';
} 
}

db.php

Archivo que albergará los datos de conexión a la base de datos. Recuerda habilitar la extensión PDO para PHP. Esto se puede hacer modificando el archivo php.ini de tu configuración de PHP.

function getDB() {
$dbhost="localhost";
$dbuser="username";
$dbpass="password";
$dbname="database";
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}

Fuente: 9lessons.info

Guardar

Guardar

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.