Debugando o erro “SyntaxError: Unexpected token” no WooCommerce

Debugando o erro “SyntaxError: Unexpected token” no WooCommerce

Esse erro pode acontecer na hora de finalizar um pedido no WooCommerce, pois os métodos de pagamento irão retornar um array que será convertido para JSON, entretanto por padrão se tiver qualquer erro ou alerta do PHP quando isso acontece, irá retornar nosso amiguinho SyntaxError: Unexpected token.

Continuar lendo “Debugando o erro “SyntaxError: Unexpected token” no WooCommerce”

WooCommerce: Deixar o método de entrega PAC dos Correios gratuito

Uma vez ou outra vejo pessoas fazendo entrega utilizando o PAC dos Correios sem cobrar nada e utilizando plugin WooCommerce Correios para calcular o frete para todos os métodos de pagamento.
Geralmente para fazer algo assim é simples, pois é possível desativar o método PAC do plugin e configurar o método de entrega gratuita do WooCommerce.

Entretanto o WooCommerce Correios tem um plus que é exibir uma data estimada de entrega, que não é possível fazer isso com o método de entrega gratuita nativo.

Continuar lendo “WooCommerce: Deixar o método de entrega PAC dos Correios gratuito”

WooCommerce: Pagar.me

WooCommerce: Pagar.me

Já faz algum tempo que desenvolvi este plugin, mas até o momento não estava com muito tempo livre para publicar um post sobre ele, então vamos lá.

O que é o Pagar.me?

O Pagar.me é um gateway de pagamento desenvolvido por Henrique Dubugras e Pedro Franceschi em 2013. E apesar de ser uma startup bem nova, vêm nos últimos tempos acumulando diversos prêmios:

Quais as vantagens de usar o Pagar.me?

Atualmente eu acredito que o Pagar.me é o melhor gateway de pagamento brasileiro, possuindo checkout transparente, integração com antifraude da ClearSale e com uma ótima e estável API para receber pagamentos por cartão de crédito e boleto bancário.

Outra coisa que todo mundo provavelmente vai gostar são as taxas do Pagar.me, onde você pode conferir em Pagar.me > Preços.

Para quem tem um volume honesto de vendas por mês, chega uma hora que fica impossível utilizar gateways como o PagSeguro, onde quase 7% do valor total do pedido é perdido em taxas… Chega uma hora que você não pode mais perder tanto dinheiro assim, além da demora para conseguir receber o dinheiro.

Outra diferença do Pagar.me com a maioria dos outros gateways que todo mundo esta acostumado a utilizar é que o Pagar.me faz intermédio direto entre a sua empresa e com a as operadoras de cartão de crédito, com isso o nome da sua empresa aparece na fatura do cartão de crédito do cliente e assim evitando susto e pedidos de chargeback, seu cliente vai saber exatamente que aquele valor foi em uma compra feita em sua loja.

Quando eu vi algumas noticias sobre o Pagar.me e também algumas pessoas comentando no Facebook, além é claro, de ler a API e ter gostado bastante, eu fiz questão de entrar em contato com os desenvolvedores e criar a integração para o WooCommerce. Fiz sem cobrar nada porque eu realmente gostei e acredito que quem utiliza o WooCommerce merece um gateway assim. Provavelmente esse meu e-mail assustou um pouco o Henrique (alias estou devendo de me encontrar com eles pessoalmente qualquer dia em São Paulo e conhecer a instalação da empresa) xD.

Enfim, já é uma ótima introdução para o gateway de pagamento, então vamos a instalação do plugin:

Instalando e configurando o WooCommerce Pagar.me

Para instalar você precisa e claro estar utilizando o WooCommerce na sua instalação do WordPress e também o plugin Extra Checkout Fields for Brazil, com tudo instalado você deve acessar o dashboard e ir em Plugins > Adicionar novo e pesquisar por “WooCommerce Pagar.me”, finalmente instale e ative o plugin.

Na página da sua conta no Pagar.me clique no menu “minha conta” e depois na opção “API Keys”.

pagarme-minha-contaNa próxima página copie as chaves de API, depois vá até WooCommerce > Configurações > Finalizar compra > Pagar.me, ative o método de pagamento e preenche os campos Chave de API do Pagar.meChave de Criptografia do Pagar.me.

woocommerce-pagarme

Ainda é possível configurar como você deseja que seja o comportamento do parcelamento com cartão de crédito.

E tudo pronto, você já pode começar a receber pagamentos utilizando o Pagar.me.

money

Conheça o tema Storefront, o melhor tema gratuito com suporte para WooCommerce

Na semana passada o WooThemes lançou o tema Storefront que é um tema totalmente gratuito e integrado com o WooCommerce.

storefront-catalog

O Storefront foi desenvolvido utilizando o tema base Undescores, seguindo todas as boas praticas de desenvolvimento de temas, além que irá servir para um modelo de integração e construção de temas para o WooCommerce.

Apesar dele não possuir toda aquela parafernália de sliders, shortcodes, page builders e etc, o motivo para isso é o problema que todo mundo sofre ao alterar um tema, perdendo tudo o trabalho feito, desta forma você pode deixar estas funcionalidades para plugins que você preferir.

Entretanto o tema ainda é muito poderoso e totalmente customizável, contando com uma enorme quantidade de opções de cores no menu “Aparência > Customizar”.

storefront

Além do WooCommerce o tema já tem integração com alguns plugins:

Também já é planejado dar suporte para várias outras extensões do WooCommerce.

Com tudo isso fica claro que ele vai servir como um padrão para a construção de temas para o WooCommerce, facilitando totalmente o desenvolvimento e garantindo a compatibilidade para uma grande lista de extensões.

E por final o WooThemes ainda esta vendendo alguns plugins premiuns especiais para o Storefront:

  • Parallax.
  • Editor visual para as páginas do WooCommerce.
  • Editor visual para as páginas de blog.

Você pode compra-los no site do WooThemes.com na sessão de extensões para o Storefront.

Posso adiantar que já estão sendo desenvolvidas mais algumas extensões que devem ser lançadas em breves e vocês também podem sugerir novas extensões para o Storefront no WooCommerce Ideas.

[button link=”http://demo2.woothemes.com/storefront” style=”info”]Demo[/button] [button link=”http://www.woothemes.com/storefront/” style=”download”]Download[/button]

Seja lá se você for utilizar o Storefront ou desenvolver o seu tema por cima dele, uma coisa é certa, sua loja vai ser um sucesso!

WooCommerce: Conheça algumas das mudanças visuais da versão 2.3

WooCommerce: Conheça algumas das mudanças visuais da versão 2.3

Um dos principais objetivos da versão 2.3 do WooCommerce é inovar a interface do plugin, então conheça agora algumas das mudanças visuais que iremos ter:

No frontend muita coisa foi alterada, seguindo a linha de design flat, desta forma o tudo ficou mais bonito e também moderno.

Flat design? Flat design é mágica!

shia-magic

Enfim, confira uma lista de algumas coisas que foram alteradas:

  • Mensagens
  • Botões
  • Abas
  • Mensagem de loja de demonstração
  • Badge de produto em oferta
  • Widget de filtro por preço
  • Caixa de seleção de método de pagamento
  • Posição do botão “Finalizar pedido” na página do carrinho.
  • Removido os botões de selecionar quantidade em favor do input do tipo number do HTML5
  • Widget do carrinho agora permite remover os produtos
  • Algumas tabelas agora são responsivas (exemplo a de pedidos na página “Minha Conta”)
  • Removido os gifs animados de carregamento em favor de ícones em fonte utilizando animação em CSS3
  • Suporte para o tema Twenty Fifteen

Aqui alguns exemplos das mudanças:

catalogo-woocommerce-2.3

carrinho-WooCommerce-2.3

mensagens-woocommerce-2.3

Além disso tivemos algumas outras mudanças com o funcionamento, como por exemplo agora ao remover um produto do carrinho é exibida uma mensagem avisando sobre a remoção do item e com um link que permite repor o produto ao carrinho caso você removeu ele por engano.

No backend tivemos algumas mudanças e pequenas melhorias, como por exemplo na aba “Produtos” dentro de “Configurações”, onde é possível encontrar mais sessões com os conteúdos melhor organizados, além disso melhoramos a interface do menu “Status do sistema” implementando sessões que deixam bem mais simples de visualizar e entender ele.

menu-produtos-woocommerce-2.3

Por final, vale já falar que removemos as opções de “Design do Frontend” que permitiam alterar as cores de alguns elementos do WooCommerce, esta opção saiu do core para fazer parte de um plugin que irá trazer novidades para essa funcionalidade utilizando a “Theme Customization API”, que vai permitir você ver as alterações sendo feitas igual você faz com as opções que vocês já estão acostumados no menu “Aparência > Customizar” do WordPress 🙂

Vale avisar que temos ainda um longo caminho até terminar a versão 2.3 e algumas coisas que estou mostrando agora podem sofrer algumas alterações!

Eu sinceramente estou querendo fazer algumas melhorias no carrinho, juntando o calculo de frete com a parte onde aparece os valores, assim ficando bem mais intuitivo para os usuários, mas por enquanto como eu falei, eu estou apenas querendo, é uma vontade que vai depender ainda de tempo livre para adicionar isso ainda nesta versão.

WooCommerce: Trabalhando com CSS da forma correta a partir da versão 2.3

Ao construir um tema para funcionar junto com o WooCommerce é extremamente importante trabalhar da forma correta com CSS, assim você evita problemas com atualizações ou com estilos que não sobrescrever corretamente o CSS do WooCommerce.

Desde a versão 2.1 do WooCommerce a forma de trabalhar com CSS mudou um pouco e agora na versão 2.3 mudamos de Less para Sass e ainda utilizando a biblioteca Bourbon, o que é ótimo, pois abre uma infinidade de possibilidades de personalização sem precisar alterar muito código.

Este tutorial tem como finalidade ensinar como trabalhar com Sass no WooCommerce 2.3 que deve ser lançado no começo de 2015, com isso já deixando todo mundo preparado como fazer isso, mas é claro, vocês podem utilizar algumas das dicas deste tutorial nas versões 2.1 e 2.2.

Trabalhando com CSS da forma correta no WooCommerce:

Primeiro de tudo certifique-se de instalar Sass no seu computador, existem vários métodos para fazer a instalação (onde eu particularmente prefiro por linha de comando), veja como instalar seguindo o tutorial de instalação do Sass e é claro, certifique também de instalar o Bourbon.

Finalmente com tudo instalado você deve baixar o WooCommerce 2.3 (esta versão não foi lançada ainda até a data de publicação deste post, como eu já informei acima), copie todos os arquivos da pasta woocommerce/assets/css/ para o seu tema, por exemplo em uma pasta chamada inc/woocommerce/css.

Com isso no functions.php do seu tema você será capaz de registrar onde estão os novos arquivos e com isso desativar os estilos do plugin:

E pronto, agora o WooCommerce já sabe que deve carregar os arquivos que estão no seu tema e isso irá sobreviver a qualquer atualização.

Agora basta trabalhar com Sass, você pode até mesmo automatizar as tarefas utilizando Grunt e para alterar todo o esquema de cores do WooCommerce é possível pelo arquivo _variables.scss 🙂