Enviar dados de formulário do Elementor Pro para função PhP e responder

A tempos venho trabalhando com Elementor Pro e tem ajudado muito nas entregas que temos feito aqui na agência em termos de agilidade no desenvolvimento. Nos últimos anos entregamos alguns sistemas de gestão e utilizamos Elementor Pro para construir as interfaces gráficas desses sistemas e o ponto alto desse processo se deu essa semana, quando conseguimos pela primeira vez receber os dados de um formulário em uma função PhP e retornar para o Java Script a resposta da nossa função, e não apenas “success”.

Nosso grande dilema até então era o fato de não termos controle sobre o que acontecia no back-end, apenas sabíamos que os dados haviam sido enviados com sucesso, se a função havia armazenado ou se algum dado estava com problemas era sempre uma incógnita.

Vamos a prática!

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) { } );
?>

Essa é a action que trata os dados enviados por todos os formulários do site, ou seja, dentro da função pode-se identificar qual formulário enviou os dados e executar um script ou até mesmo funções com os dados enviados pelo formulário. Até aqui tudo certo, já era uma prática nossa, sua não? Então vou mostrar um pouco mais dessa action.

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
        $form_name = $record->get_form_settings( 'form_name' );
        $raw_fields = $record->get( 'fields' );
        if( 'nome-do-formulario' == $form_name ) {
            $return = function_trata_dados( $raw_fields );
	    $handler->data['customer_mail'] = $return;
        }
    }, 10, 2 );
?>

A função executada na action usa dois parâmetros, o $record trás os dados do dormulário, então nele consigo identificar o nome do formulário (linha 2) e um array com os campos dele (linha 3), faça o que quiser com essas informações, acima estou mostrando um exemplo de uso.

O segundo parâmetro “$handler” foi o grande sucesso da semana, ele devolve ao front-end resposta sobre o envio, na posição “customer_mail” pode-se passar uma String que será tratada no JS a seguir:

<script>
    $(document).on('submit_success', '#id-formulario', function( event, response ) {
        if ( response.data.customer_mail ) {
            console.log( response.data.customer_mail );
        }
    });
</script>

E esse é o JS que trata a resposta da action “’elementor_pro/forms/new_record’”. Simples assim! (Depois de sabermos da existência disso hehehe).

Dúvidas, fica a vontade para comentar…

READ MORE

Você excedeu o limite de gastos no Gerenciador de Anúncios do Facebook?

Se você já passou por este acontecimento, fique tranquilo, e pegue esse toque que temos para você, na verdade o processo é simples:

Primeiro é importante saber que se a sua conta de anúncios estiver configurada para pagamentos manuais, você não poderá definir um limite de gastos para a conta.

Saiba que sempre que o seu o limite de gastos da conta for atingido, os seus anúncios serão pausados e deixarão de gastar dinheiro, então para redefinir o valor gasto dentro do limite de gastos da conta, você precisa seguir estes passos:

1° – Acesse as Configuração da conta de anúncios e clique em Abrir configurações de pagamento.

2° Dentro da seção “Limite de gastos da conta”, clique nos três pontos no canto superior direito e clique em “Definir limite”.

3º Defina o valor desejado e clique em “Salvar”.

Importante: O limite de gastos da conta é o limite geral de quanto a sua conta de anúncios pode gastar em todas as campanhas de anúncios durante a vigência dele. O valor que você gastou para atingir o limite de gastos da conta não é redefinido automaticamente após determinado período. Por exemplo, no final do mês.

Referência de conteúdo central de ajuda do Facebook.

READ MORE

Enviar arquivo de um servidor para outro usando SSH

Temos aqui na agência frequentemente a necessidade de enviar sites inteiros de um servidor para outro (de uma Hospedagem para outra), normalmente em migrações. Faço um arquivo compactado (*.zip) faço download, faço upload no servidor novo e descompacto.
O processo de compactação e descompactação já fazia via SSH, mas ainda sim demorava pois tinha que fazer download e upload utilizando minha banda para isso. Em uma conversa com um atendente de suporte da Locaweb, peguei esse script em SSH para realizar a transferência diretamente de um servidor para outro, acelerando assim a transferência que agora não depende mais da velocidade da minha internet.
Como nunca escrevi sobre SSH, então vou mostrar como compactar todos os arquivos, depois transferir o arquivo compactado e por último como descompactar.

Como compactar arquivos usando SSH

Faço isso usando um MacBook (ainda não encontrei uma maneira de fazer isso no Windows) então abro o Terminal e digito:

ssh usuario@ftp.dominio.com.br

Em seguida o sistema vai te solicitar a senha de acesso ao FTP, é só digitar e dar um Enter. Feito isso você estará dentro da raiz do seu FTP, então usando comandos do antigo “DOS” você consegue navegar pelas pastas:

cd nome_da_pasta

Para entrar em uma pasta.

cd..

Para subir um nível na pasta.

dir

Mostra todos os arquivos/pastas da pasta onde você está.
Dito isso, você vai digitar o seguinte para compactar:

zip -r nome-do-arquivo-novo.zip nome-da-pasta nome-do-arquivo.html

“nome-do-arquivo-novo.zip” será o nome do seu arquivo compactado, e depois disso você digita o nome dos arquivos (separado por espaço) ou pastas que irão ser incluídos nesse *.zip.
Feito isso é só dar Enter e ele vai começar a compactar tudo.

Como transferir um arquivo de um servidor para outro com SSH (de uma hospedagem para outra)

Estando já dentro da pasta onde o arquivo compactado se encontra, digite o seguinte

scp nome-do-arquivo-novo.zip usuario2@ftp.dominio2.com.br:/home/usuario/public_html
  1. “scp” noma da função
  2. Nome do arquivo compactado
  3. Usuário do FTP para onde quer enviar o arquivo
  4. @
  5. Host FTP para onde será enviado o arquivo
  6. Dois pontos
  7. Caminho absoluto da pasta onde será colocado o arquivo.

Esse caminho normalmente você encontra no seu FileZila (ou software similar de FTP), ou ainda acessando a hospedagem via SSH e digitando:

pwd

Feito isso ele vai solicitar a sua senha e vai iniciar a transferência.

Como descompactar arquivos com SSH

Agora é fácil, acesse sua hospedagem via SSH, vá até a pasta onde o arquivo se encontra e digite:

unzip nome-do-arquivo.zip pasta/pasta

“pasta/pasta” é para que você extraia os arquivos em uma pasta diferente daquela onde o arquivo se encontra.

READ MORE
Como atribuir uma Conta de Anúncios a um Pixel no Facebook Business

Como atribuir uma Conta de Anúncios a um Pixel no Facebook Business

Pixel do Facebook nos ajuda muito a entender como nossos conteúdos estão engajando visitas em nossos sites/aplicativos, mas se seu pixel não estiver atribuído a uma Conta de Anúncios você não poderá usá-lo para fazer públicos por exemplo.
Afinal de que adianta colocar o pixel no site/aplicativo, criar eventos, e não poder usar esses dados para as próximas campanhas? Vamos lá:
Acesse seu Gerenciador de Negócios do Facebook (business.facebook.com) e faça login. No Painel clique no menu “Gerenciador de Negócios” no canto superior esquerdo da página. Eu sei, não parece mas aquilo não é somente o título da página e sim um menu!
adicionar-conta-anuncio-pixel-painel
No menu que abrir procure e clique em “Configurações do Negócio”.
adicionar-conta-anuncio-pixel-menu
Nesta página procure e clique em:

  1. Origens de Dados, no menu a esquerda para abrir mais opções;
  2. Pixels, dentro de Origens de Dados para mostrar os Pixels já existentes em sua conta;
  3. Pixel de “Nome da Sua Empresa”, para mostrar os ativos atribuídos ao seu Pixel;
  4. Atribuir Conta de Anúncios, para atribuir uma Conta de Anúncios ao Pixel.

adicionar-conta-anuncio-pixel-pixels
No pop-up que aparecer, selecione sua Conta de Anúncios e em seguida clique em “Salvar Alterações”.
adicionar-conta-anuncio-pixel-atribuir
Feito!
Pode usar a vontade seu Pixel do Facebook Business para criar públicos.

READ MORE
Como montar livreto no Adobe InDesign usando vários arquivos

Como montar livreto no Adobe InDesign usando vários arquivos

Montar um livreto usando um arquivo é simples, a Adobe inclusive mostra em seu site de ajuda, mas se você estiver usando vários arquivos ela não mostra como fazer.
Se você está diagramando/produzindo um material com um volume muito grande de páginas vai usar o Adobe InDesign para isso. Se o acabamento for grampeado ou costurado no centro das páginas, vai precisar criar um livreto para mandar imprimir.
Montando livreto no InDesign
Como disse anteriormente esse processo é bem simples mas vou mostrar um passa-a-passo resumido aqui para introduzir o assunto principal que é fazer isso com vários arquivos diferentes:

1. Configurando seu documento

Seu documento precisa de uma configuração específica para montar um livreto, então vá em Arquivo > Configurar Documento.
Configurar documento Adobe InDesign
Nesta janela você precisa se atentar para o tamanho da página, páginas opostas, número de páginas, e sangria. Não vou entrar no mérito de alguns detalhes imaginando que já sejam de seu conhecimento.

Número de páginas

Para imprimir um livreto de um único arquivo, o número de páginas do documento deve ser obrigatoriamente divisível por 4 (4, 8, 12, 16…40, 44, etc)  caso não seja o Adobe InDesign vai preencher com páginas em branco no final do documento.
No nosso caso, para fazer um livreto com vários arquivos, cada arquivo pode ter qualquer quantidade, o que importa é a quantidade total de todos os arquivos, isso sim deve obedecer esta regra.

Páginas opostas

Para impressão de livreto esta opção deve estar selecionada, já que o livreto é composto por páginas opostas (uma ao lado da outra).

Tamanho da página

Isso é extremamente importante e tem relação direta com o local onde será impresso seu material. Lembre que o tamanho da página do seu documento dever ser menos da metade do tamanho do papel a ser usado, se estiver pensando em usar sangria, então se o maior formato impresso pela gráfica é A3, então seu documento deve ser menor que A4 para considerar sangria.

Imprimindo livreto

Agora vamos ao livreto, acesse Arquivo > Imprimir livreto…
Menu imprimir livreto Adobe InDesign
Na janela que surgir faça as escolhas das opções conforme sua necessidade e se precisar criar um PDF ao invés de imprimir, terá que instalar uma impressora PDF em seu computador ou usar um Arquivo PostScript em conjunto com o drive de uma impressora e o Adobe Acrobat (que irá gerar o PDF a partir do arquivo .ps gerado pelo InDesign). Se estiver usando o Windows ainda é possível mandar imprimir direto em Microsoft XPS Document Writer (o PDF da Microsoft).

Montando um livreto com vários arquivos

Não, o Adobe InDesign não faz isso automático, nem criando um Livro como mostra o manual da Adobe. A montagem é semi-automática, pois você terá que juntar todos os arquivos em um e aí sim mandar imprimir o livreto como mostrei acima, então faça o seguinte:
Abra um novo arquivo com as mesmas especificações do seu material final e já com a quantidade total de páginas somando todos os arquivos, vá em Arquivo > Inserir…
Menu inserir Adobe InDesign
Selecione o primeiro arquivo da série, clique no botão “Opções” e selecione a opção “Mostrar opções de importação” e clique em “Abrir”.
Escolher arquivo inserir Adobe InDesign
Na janela que abrir com as opções defina na seção “Páginas” a opção “Tudo” para inserir todas as páginas do documento e na seção “Opções” em “Cortar em:” escolha “Caixa delimitadora de sangria” se houver sangria no seu material e clique em “OK”.
Opções escolher arquivo inserir Adobe InDesign
Seu mouse aparecerá com a primeira página do documento pendurada, basta clicar no canto superior esquerdo da página que aparecerá a página já posicionada (se precisar ajustar posição e tamanho poderá ser feito após inserir todas) e já estará disponível para inserção a próxima página bastando apenas clicar no canto superior esquerdo da próxima página e assim sucessivamente até finalizarem todas as páginas do documento selecionado.
Página inserida documento externo Adobe InDesign
Repita a inserção até ter adicionado todas as páginas de todos os arquivos e ao final terá um arquivo completo com todas as páginas prontas para serem impressas, agora basta seguir o passo-a-passo inicial.
Sei que isso parece ser muito incoerente, por que o software não monta automático já que ao criar um arquivo de livro mostramos a ele quais arquivos fazem parte do livro, mas parece que esse trabalho não é usado para trabalhos com grandes tiragens onde a impressão será feita em offset e a montagem das chapas é manual.
Então para que serve o arquivo de livro? Basicamente ele organiza a numeração de páginas e padroniza os estilos.
Espero ter ajudado, mesmo que não deixando muito prático o trabalho! Qualquer dúvida, sugestão ou indicação diferente anota nos comentários aqui embaixo 😉

READ MORE

Vamos dar um Tok Digital na sua empresa

Bem vind@ a Tok Digital!
Somos uma pequena empresa trabalhando para pequenas empresas, nesse contexto prestamos um serviço que agências maiores prestam, porém a um preço viável para pequenos negócios. Desenvolvemos sites personalizados de verdade!
E nossos projetos são elaborados para quem usa a internet e eventualmente para não usa também, vou explicar:

Internet nos dias de hoje

Cada vez mais pessoas estão usando a rede mundial de computadores (já não é mais de computadores a algum tempo, falaremos sobre isso em breve), em casa no trabalho, caminhando no parque, no ônibus, em qualquer lugar.
Os tipos de conexão (ADSL, fibra ótica, 3G, 4G) variam muito, bem como os dispositivos utilizados, mas o que importa mesmo é: O que pessoas fazem quando estão conectadas na rede?

Redes Sociais

Em sua imensa maioria usam a internet para acessar redes sociais, e desta forma se aproximar de pessoas sem precisar sair de onde estão.
Facebook, Instagram, Snapchat, WhatsApp, entre outras, você, usuário, mostra sua vida em texto, fotos, vídeos e áudio e seus amigos, fãs, seguidores, curtem, compartilham, comentam, enfim interagem com você através de suas publicações.
Apesar do sucesso estrondoso, as redes sociais são momentâneas, da mesma forma que aparecem enchendo suas páginas de usuários e informações, são engolidas por outras novas que se adaptam melhor ao perfil de “consumo” dos usuários, fazendo com que sua vida lá dentro se resuma a museu a exemplo do Orkut.

App’s

Com o crescimento da venda de smartphones, cada vez mais os usuários procuram aplicativos (apps) que resolvam suas vidas de forma rápida e eficiente.
Com este movimento cada vez mais empresas querem oferecer seus produtos e serviços por meio de apps. Todavia essa estratégia deve ser bem elaborada pois nem todo o negócio funciona com um app, muitas vezes o aplicativo não cumpre uma função de venda mas uma forma de relacionamento ou até mesmo cria uma imagem da empresa para o usuário.

Blogs

Essa mídia foi a porta de entrada da Web 2.0, quando a internet de fato deu voz aos usuários que passaram a expor seus pensamentos em forma de texto, abrindo a oportunidade para diálogos por meio de comentários.
Atualmente segue sendo muito utilizado já que para mecanismos de busca o que conta é ter conteúdo para mostrar que a empresa domina o negócio com o qual trabalha.

Empresas na internet

Existem diversas formas de uma empresa estar presente na internet, desde um espaço publicitário em sites de classificados, passando por páginas em redes sociais até seu próprio ambiente um site, blog, sistema ou até uma loja virtual (e-commerce).
Esses últimos de certa forma são simples de serem criados, basta um cadastro rápido no site que promete a criação de sites grátis e o empresário já terá um site no ar, disponível na internet, alguns inclusive com possibilidade de criação de lojas virtuais.

Benefícios de sites personalizados

O empresário se depara com a questão: se posso criar meu site, eu mesmo, grátis, porque contratar uma empresa para desenvolver um por mim? A resposta é simples e complicada ao mesmo tempo.
Começamos com outras perguntas: o tempo que será gasto na criação o empresário não poderia estar vendendo ou organizando sua empresa? O empresário sabe qual o melhor local na página inicial para se colocar o formulário de contato? E seus produtos, estão acessíveis?
Podemos fazer perguntas mais técnicas: as palavras-chave utilizadas são coerentes com o que os usuários buscam na internet? A estrutura do site auxilia os mecanismos de busca na indexação? O site está cumprindo uma função clara de forma eficiente?
Se sua empresa está querendo fazer um trabalho sério na internet, contrate um profissional para lhe auxiliar, ou seja você arrumar sozinho seu celular ou leva até um técnico?
Somos a Tok Digital, seja bem vind@, teremos o maior prazer em conversar e tomar um café!

READ MORE

Problemas com Produto Variável com preços iguais – WooCommerce

Recentemente em um projeto de loja virtual enfrentamos um problema que em um primeiro momento parecia incoerente. Ao criar um Produto Variável, onde as variações tinham o mesmo preço, sua página deixava de mostrar o preço do produto.
Depois de alguns teste e buscas no nosso amigo Google, encontramos uma solução e uma explicação:
“Na realidade, este se destina a ser uma função de melhoria da performance / memória para evitar a renderização e processamento de dados duplicados variação no atributo de dados HTML. Mas ele acaba causando problemas, pois resulta na saída HTML de variações não sendo consistente de produto para produto. Realmente toda esta questão é devido a más práticas sendo usado por WooCommerce para tornar o conteúdo dinâmico para as variações, mas o que você pode fazer.”
Para resolver, basta incluir o código abaixo no arquivo functions.php do seu tema.
add_filter('woocommerce_available_variation', function($available_variations, WC_Product_Variable $variable, WC_Product_Variation $variation) {
if (empty($available_variations['price_html'])) {
$available_variations['price_html'] = '<span>' . $variation->get_price_html() . '</span>';
}return $available_variations;
}, 10, 3);

Espero ter ajudado mais colegas!
Fonte: http://stackoverflow.com/

READ MORE

Transparência (linear, radial) em imagens no Adobe Illustrator

Depois de vasculhar a internet e usar várias soluções paliativas resolvi acabar com isso e pesquisar a fundo o tema: Como criar transparências lineares e/ou radiais em imagens no Adobe Illustrator?
Pois bem, fui direto na fonte, adobe.com, e lá comecei a ler o manual do software, não encontrei este item especificamente, mas encontrei algo que me levou a solução do meu problema. Pois bem vamos ao que interessa.
Selecione sua imagem e abra a janela Transparência. Se a janela Transparência não estiver ativa, clique no menu Janela > Transparência.
Selecione a imagem e abra a janela TransparênciaClique em Criar máscara. A corrente ao lado da imagem, na janela Transparência, vai ser habilitada e ao lado da corrente um quadrado preto irá aparecer. Sua imagem vai ficar invisível.
Clique em Criar máscaraClique sobre o quadrado preto, na janela Transparência para entrar na máscara recém criada.
Clique no quadrado preto
Com a Ferramenta Retângulo (M) crie um retângulo sobre a imagem e aplique um preenchimento gradiente na janela Gradiente. Se a janela Gradiente não estiver ativa clique no menu Janela > Gradiente.
Criar um retângulo e aplicar um preenchimento gradientePronto, agora é só ajustar conforme necessário e quando estiver pronto, volte a janela Transparência e clique no quadrado da imagem para sair da máscara.
Clique na imagem para sair da máscara
Não sei você, mas isso me liberou algum tempo de trabalho!
Resultado final

Dúvidas, sugestões ou qualquer outra coisa, use a vontade o formulário de comentários abaixo.
Obrigado pela visita!

READ MORE

Gerar Mapa do Site no WordPress

Uma das ações para melhorar a indexação do seu site pelos buscadores é disponibilizar um sitemap (Mapa do Site). Com ele os buscadores conhecerão o conteúdo completo do seu site, com link para as páginas.
Tenho utilizado para isso um Plugin que faz esse trabalho de forma automática e dinâmica, com pouca configuração e confiável.

Google XML Sitemap

READ MORE

MSN agora é Skype! Saiba como vincular…

Desde o mês de abril deste ano (2013) a Microsoft deixou de manter o MSN Messenger no Brasil, último país a sofrer esta mudança. A partir disto os usuários precisam baixar e instalar o Skype, novo sistema de mensagens instantâneas da Microsoft, para manter suas conversas com seus amigos do MSN.
Antes disto acontecer, muitos usuários já haviam migrado suas conversas, por mensagens instantâneas, para o Facebook, já que “todos” seus amigos estão lá e sempre online. O fato é que em muitas empresas o acesso a redes sociais é bloqueado para melhorar a produtividade de suas equipes, então muitas pessoas ainda sentem a necessidade de usar o extinto MSN.
Pois bem, vou mostrar que em pouco passos você terá uma conta no Skype e ainda terá todos seus amigos do MSN no Skype.
1. Baixe o Skype, clicando na imagem abaixo, e instale em sua máquina.
Baixar Skype
2. Após instalar o Skype, execute-o, e na janela que abrir clique em Conta Microsoft a direita da janela.
Tela inicial do Skype
3. Preencha seus dados de acesso ao antigo MSN (e-mail e senha) e clique em Entrar.
Tela de login do Skype usando credenciais do MSN
4. Se você já possui uma conta no Skype clique em Tenho uma conta do Skype (botão à esquerda), caso contrário clique em Sou novo no Skype (botão à direita) para criar uma conta.
Tela para o usuário escolher entre usar uma conta existente ou criar uma nova.

4.1. Se você clicou no botão à esquerda, pois já possui uma conta no Skype, preencha suas credenciais de acesso ao Skype (usuário e senha) para vincular as duas contas (MSN + Skype) e clique em Conectar.Tela login para contas do Skype. 4.1. Se você clicou no botão à direita, pois não possui uma conta Skype, confirme se deseja receber informações sobre novos produtos entre outros e clique em Aceito – criar uma conta do Skype para criar.Janela para criar uma nova conta do Skype.

5. Quase pronto! Agora você irá conferir as configurações do seu computador para garantir boas conversar. Clique em Continuar.
Quase pronto!6. Teste seu fone, microfone e webcam:

  • Fone: Clique em Teste o som, uma gravação do Skype deve ser escutada por você;
  • Microfone: enquanto você fala a barra de volume deve se mecher;
  • Webcam: Se sua webcam (caso tenha uma instalada) estiver funcionando normalmente você estará aparecendo na tela.

Teste de configurações do Skype.
 
7. Decida entre escolher uma foto para seu perfil agora ou mais tarde. Esta foto pode ser escolhida de um arquivo em seu computador ou até ser tirada na hora usando sua webcam. Clique na opção desejada no canto inferior direito.
Observe que no final do segundo parágrafo, está o seu nome de usuário Skype (sem o “live:”), anote-o e passe para seus amigos para que eles o adicionem.
Escolher foto do perfil.8. Se decidiu por adicionar uma foto agora, tire sua foto usando sua webcam clicando em Tirar foto no canto inferior direito ou escolha uma imagem de seu computador clicando em Procurar… também no canto inferior direito.
Escolher uma foto para o perfil.9. Pronto! A esquerda da janela aparecerão seus amigos e abaixo de seus nomes estará indicado se foram adicionados pelo Skype ou são amigos do MSN.
Página inicial do Skype.Divirta-se conversando por chat com seus amigos ou fazendo chamadas de audio e vídeo.
Se durante este processo algo não aconteceu como esperava ou algum de seus componentes (fone, microfone ou webcam) não estão funcionando, talvez eu possa lhe ajudar, basta deixar um comentário abaixo.
 
 
 
 

READ MORE
  • 1
  • 2