DICAS WEB MAIS: abril 2016

quarta-feira, 6 de abril de 2016

Cálculo de frete dos correios

Hoje eu trago um tutorial sobre como calcular o frete de um produto dos correios com jquery, com base no valor e peso do mesmo, utilizaremos uma API que retorna um arquivo Json, o que vai deixar nossa aplicação mais rápida, a api retorna o frete para envio sedex ou pac, você pode adaptar para seu tipo de website e fazer as devidas adaptações.

vamos começar mostrando como sera a url que utilizaremos, a API

http://developers.agenciaideias.com.br/correios/frete/json/cep origem/cep destino/peso/valor

o cep sempre formatado assim: 05311900

o peso : O valor mínimo para o cálculo do frete nos Correios é 300g, se o somatório dos pesos dos itens for diferente de zero e menor que 300g, o frete será calculado utilizando o valor mínimo (300g).

O valor máximo que pode ser utilizado no cálculo do frete é 30Kg (30.000g), se o somatório do peso dos itens ultrapassar este valor, o frete não será calculado e será assumido o valor zero.

valor : O valor máximo do somatório dos itens que pode ser utilizado no cálculo de frete é R$10.000,00, se este valor for ultrapassado o frete não será calculado e será assumido valor zero.

Vamos criar um formulário para receber o cep do usuario, este será o único dado necessário para calcular o frete que o cliente deve informar.

</form>

Quando clicar no botão calcular, receberemos o cep e jogamos em uma variável

$("#botao").click(function () {

var cep = $("#cep").val();

verificamos se foi informado algum cep

if (cep != "") {

Quanto aos dados de cep de origem (de onde vai ser postado o produto), o peso e o valor nós informaremos por variaveis, estes dados podem vir de um banco de dados se quiser

var cep_origem = "05311900";

var peso = "0.300";

var valor = "200.00";

Montamos a url que irá retornar o arquivo json

var url = "http://developers.agenciaideias.com.br/correios/frete/json/"+ cep_origem +"/"+ cep +"/"+ peso +"/" +valor;

Recebemos o json e lemos jogando os valores no paragrafo resultado

$.getJSON(url, function(retorno) {

$("#resultado").html("SEDEX: R$"+ retorno.sedex + "<br>" + " PAC: R$"+retorno.pac);

});

Vou deixar o código completo e o arquivo para download

<!DOCTYPE html>

<head>

<title> frete correios </title>

$(document).ready(function () {

$("#botao").click(function () {

var cep = $("#cep").val();

if (cep != "") {

var cep = $("#cep").val();

var cep_origem = "05311900";

var peso = "0.300";

var valor = "200.00";

var url = "http://developers.agenciaideias.com.br/correios/frete/json/"+ cep_origem +"/"+ cep +"/"+ peso +"/" +valor;

$.getJSON(url, function(retorno) {

$("#resultado").html("SEDEX: R$"+ retorno.sedex + "<br>" + " PAC: R$"+retorno.pac);

});

} else {

$("#resultado").text("Informe o cep");

}

});

</script>

</head>

<body>

</form>

</body>

</html>

clique aqui para baixar o código completo

Olá vou premiar você por acompanhar este blog abaixo você pode baixar gratuitamente o ebook

COMO CRIAR INFORPRODUTOS E GANHAR MUITO DINHEIRO

BAIXE GRATIS SEU EBOOK

segunda-feira, 4 de abril de 2016

exibir tags ao digitar em campo de texto input jquery

Olá amigos hoje trago para vocês um tutorial bem interessante, sobre o jquery, vamos fazer um exemplo bem simples se talvez você já qeubrou cabeça pra fazer aquelas tag´s que surgem quando o usuario digita um termpo por exemplo "javascript".

Bom, se quiser algo mais avançado, sugiro que continue acompanhando o blog porque irei postar um código bem diferente deste futuramente, algo que seja mais interessante e integrado ao php, mas neste exemplo vou trazer um digamos: "quebra galho" para você que quer algo bem simples e que nem utilize o php, basta você colocar as palavras em um array, ou melhor as tag´s.

vamos começar !!!

primeiro criamos um array com as tags que seram sugeridas para o usuario:

var sugst = ["html", "jquery", "php", "css", "javascript"];

Capturamos o que foi digitado pelo usuario e jogamos em uma variável:

$("#tags").keyup(function () {
var valor = $(this).val();

Detectamos se o usuario digitar a vírgula, este será o caractere separador de tags

if (valor.indexOf(",") != -1) {
var junta = valor.split(",");

perceba que a variavel junta separa pelo caractere virgula a nossa string valor.

Para que tudo ocorra bem, é essencial que gravemos em uma variavel tudo o que o usuario digitou anteriormente, caso cotrario teremos uma substituição de conteúdo e não é isso que queremos.

var ant = $("#exibe").html();

Para tanto a variavel ant armazenará o valor html do nosso paragrafo onde estão sendo exibidas as tags.

Vamos atualizar o valor do paragrafo de id "exibe" e sempre colocando o qu ele já possui, mesmo estando vazio, tudo dará certo:

$("#exibe").html(ant + "<span>" + junta[0] + "</span>");
$(this).val("");

Bom e apagamos o conteúdo do nosso campo input

Nosso exemplo podia até parar aqui, mas o objetivo deste nosso código jquery é sugerir palavras ou tags para o usuario.

portanto precisamos fazer uma pequena busca no nosso array

if (sugst[i][0].indexOf(valor) != -1) {

neste caso, vou buscar pela primeira letra que o usuario digitar, porém claro precisaremos criar um laço que percorrerá todo o nosso array.

for (i=0; i <= 5; i++) {
if (sugst[i][0].indexOf(valor) != -1) {

var a = sugst[i];
$("#sugestao").html("<span class='btn'>" + a + "</span>");

E aqui o que fizemos?

Bom eu apenas guardei a nossa busca na variavel a e joguei dentro de um paragrafo com id "sugestao" que ficará abaixo do nosso campo de texto, perceba também que atribui ao mesmo a classe "btn", pois quero fazer um script que fará com que esta tag seja inserida na lista de tags pois ela foi sugerida, agora se o usuario deseja colocar, temos que dar esta possibilidade a ele.

$(".btn").click(function () {
var ant2 = $("#exibe").html();
$("#exibe").html(ant2 + "<span>" + a + "</span>");
$("#tags").val("");
$(this).hide();
});
}

A mesma coisa que fizemos na hora de inserir as tags pelo metodo keyup.

Vou deixar aqui o código completo:

<!DOCTYPE html>
<html lang="pt_br">
<head>
<title> Tags </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
var sugst = ["html", "jquery", "php", "css", "javascript"];
$("#tags").keyup(function () {
var valor = $(this).val();

if (valor.indexOf(",") != -1) {
var junta = valor.split(",");
var ant = $("#exibe").html();
$("#exibe").html(ant + "<span>" + junta[0] + "</span>");
$(this).val("");

}

for (i=0; i <= 5; i++) {
if (sugst[i][0].indexOf(valor) != -1) {
var a = sugst[i];
$("#sugestao").html("<span class='btn'>" + a + "</span>");
$(".btn").click(function () {
var ant2 = $("#exibe").html();
$("#exibe").html(ant2 + "<span>" + a + "</span>");
$("#tags").val("");
$(this).hide();
});
}
}

});

});
</script>
<style>
span {background-color:blue; padding:2px; font-size:16px; font-weight:bolder; margin-left:5px; color:#fff;}
</style>
</head>
<body>
<p id="exibe"></p>
<p> <input type="text" name="tags" id="tags" autoComplete="Off"> </p>
<p id="sugestao"></p>
</body>
</html>

E aqui você pode baixar o exmplo completo

Fique conectado ao blog, temos muitos outros códigos muito interessantes para você

sábado, 2 de abril de 2016

Mascara de Telefone com jquery

Muitas pessoas podem ter problemas ao tentar criar uma máscara com Jquery, bom felizmente existe um plugin muito bom e prático para fazer este tipo de tarefa. o jQuery Mask

bastando para isso fazer isso aqui:

$("#telefone").mask("(99)9999-9999");

Fazendo isso já temos uma mascara do tipo telefone, que só recebe números de 1 a 9 e deve obedecer a esta regra que criamos, quando o usuário clicar no campo ficará assim:

( )____-____

Nosso tutorial não se resume a isso, eu quero fazer um algo a mais aqui, bom, alguns estados agora tem o 9º digito, então para este tipo de telefone teremos que ter esta outra máscara:

$("#telefone").mask("(99)99999-9999");

Agora veio um pequeno problema, pois se o usuário digitar o telefone sem o nono digito, automaticamente o jquery vai apagar o campo, portanto vamos ver uma pequena solução para este problema, quero lhe apresentar o evento .focusout() do jquery, ele é acionado assim que um campo perde o foco, neste caso usaremos para aramzenar a informação digitada pelo usuário e joga-la novamente nos seu devido lugar, depois você pode fazer uma verificação no jquery ou php para ver se o usuario digitou o telefone corretamente.

bom vamos primeiramente pegar o que foi digitado pelo usuário e jogar em uma variavel:

$("#telefone").keyup(function() {
var tel = $(this).val();

Agora com o evento focusout vamos jogar novamente o que foi digitado pelo usuário

$(this).focusout(function() {
$("#telefone").val(tel);

Se você entende de Jquery sabe muito bem como tudo isso aqui funciona, até já sabe implementar isso em suas aplicações, mas vou deixar aqui o código completo e logo abaixo você pode baixar este exemplo completo para estudo ou implementação em suas aplicações:

<!DOCTYPE html>
<html lang="pt_br">
<head>
<title> exemplo jquery </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#telefone").mask("(99)99999-9999");
$("#telefone").keyup(function() {
var tel = $(this).val();
$(this).focusout(function() {
$("#telefone").val(tel);
});
});

});
</script>
</head>
<body>
<form>
<p> Nome <input id="nome" type="text" name="nome"> </p>
<p> Email <input id="email" type="email" name="email"> </p>
<p> Telefone <input id="telefone" type="text" name="telefone"> </p>
<p> Mensagem </p>
<p> <textarea name="msg" cols="20" rows="10"></textarea> </p>
<p> <input type="button" id="botao" name="enviar" value="Enviar"> </p>
</form>
</body>
</html>

Clique aqui para baixar o arquivo completo

Navegador php

Vou partilhar com vocês um pequeno script que faz uma navegação simples na sua página, basta ter as páginas em uma pasta modulos e ele vai exibir o conteúdo das mesmas na área onde você inseriu este código, para fazer a chamada basta colocar no href do link a variavel pag e o nome da página chamada

ex: <a href="?pag=home"> Inicio </a>

Daí será exibida a página home.php o código está logo abaixo:

<?php
$filename = "modulos/".$pag.".php";
if ($pag == "") {
$filename = "modulos/home.php";
}
if (file_exists($filename)) {

include_once $filename;
} else {

echo "<p class='no'> Página não encontrada </p>";
}
?>

Você pode jogar suas páginas na pasta módulos apenas com o conteúdo html, você não precisa incluir nelas o <!DOCTYPE> apenas o conteudo que será exibido na area de conteúdo do seu website.

você pode baixar o exemplo completo no link Clique aqui