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