sexta-feira, 1 de maio de 2015

Script para detectar movimento abanar do celular utilizando jQuery - eCommerce entre outros

Enviado em 10:26 - por Diguinho - Marcadores :

Neste post eu quero explicar como implementar a detecção de trepidação do telefone usando jquery. Este script tem um conceito interessante e muito util, quando o usuario abana o dispositivo móvel ele passa de um produto para o outro somente utilizando o movimento. É muito fácil de usar adicione isso ao seu projeto de e-commerce, com certeza que esse recurso a experiência do usuário vai atrair as pessoas para mais vendas. Por favor, tente as demonstrações abaixo usando o seu dispositivo móvel, este trabalha com o acelerômetro do dispositivo.

Detect Shake in Phone using Jquery

Download            Demo 1        Demo 2

Tabela produtos 
Tabela de produtos contém todos os detalhes do produto.

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

JavaScript

Contém o código JavaScript, função $.shake e detecta a vibração do telefone com o callback 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

Contém o código PHP, pegando os detalhes do produto da tabela Produtos.

<?php
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 'Erro de conecção';
}
?>


Código HTML

Defini a meta tag viewport para a exibição no mobile :D.

<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">Apenas abane seu celular</div>
<div id="result"><?php echo $price;?></div>
</body>
<html>

ajax_discount.php
Esse codigo mostrará no visor o disconto do produto.

<?php
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 'Erro de conecção';
}
}
?>

db.php
Você precisa mudar as configurações do banco de dados, antes de tentar ativar a extensão php_pdo do arquivo php.ini.
<?php
function getDB() {
$dbhost="localhost";
$dbuser="username";
$dbpass="senha";
$dbname="database";
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
?>

Espero que seja util, obrigado e boa sorte.

Sobre o autor
Gabriel Medina é o autor deste blog, atualmente estuda eng. elétrica, ama jogar damas, assistir desenhos, filmes e séries, além de praticar esportes saudaveis.
Inscrever-se neste Blog via Email :

0 Comentários:

© 2017 Webzoon. Designed by Bloggertheme9
Powered by Blogger.
back to top