WooCommerce: CodeLobster, provavelmente o melhor editor de código
Publicados: 2020-07-07Os sites de comércio eletrônico são o tipo mais dinâmico de sites. Após o lançamento do site, o desenvolvimento não para e a elaboração continua. Muitas empresas simplesmente não conseguem vender seus produtos sem a ajuda de programadores.
Se você já possui habilidades de programação PHP e uma compreensão dos princípios do WordPress, este artigo lhe dará uma vantagem sobre como você pode otimizar seu fluxo de codificação.
Especificamente, veremos o popular plugin WooCommerce e mostraremos como codificar efetivamente com ele no CodeLobster IDE, um editor de código muito mais complexo que o NotePad++ ou o Atom, e isso porque é otimizado e desenvolvido com WordPress e WooCommerce em mente.
Criando um site WooCommerce a partir do CodeLobster
Provavelmente, você já leu muitos casos sobre a criação bem-sucedida de lojas online no WordPress. Você pode escolhê-lo com segurança como uma plataforma para negociação online. Este é um sistema bastante seguro para a construção de recursos desse tipo.
Todo IDE moderno implementa principalmente um bom suporte ao WordPress e o CodeLobster facilita a implantação de um novo projeto, ou seja, a instalação de um site WordPress de teste em seu computador (desenvolvimento local) ou em seu servidor .
Você pode instalar o CMS usando o assistente. Você só precisa inserir os dados do administrador e o endereço do servidor para se conectar ao MySQL.
Além disso, há um painel de administração conveniente, que apresenta também uma pesquisa integrada e instalação rápida de plugins ou temas e uma maneira de atualizar automaticamente o núcleo e os plugins do WordPress.
O WooCommerce também está lá e pode ser adicionado à sua instalação local/ao vivo rapidamente.
Personalizando o WooCommerce com funções e ganchos
Um desenvolvedor familiarizado com o conceito do WordPress pode descobrir rapidamente como personalizar o WooCommerce, já que o plugin é fácil de configurar e seu código é totalmente extensível.
Um programador PHP pode usar funções e classes do WooCommerce. Graças a eles, você terá acesso a variáveis globais, configurações e todos os outros recursos com os quais o WC interage.
Use o preenchimento automático ao trabalhar com essas funções, pressione Ctrl + Espaço ao inserir o nome da função ou Shift + Ctrl + Espaço para obter uma dica sobre os parâmetros .
Na captura de tela acima, escrevemos o seguinte código:
//Get WC_Order object by order ID
$order_id = 55;
$order = wc_get_order( $order_id );
//Get customer ID
$customer_id = $order->get_user_id();
A função WooCommerce wc_get_order () é usada para obter o objeto do pedido, do qual você pode extrair quaisquer dados do pedido, por exemplo, descobrir o ID do cliente.
Você pode mover instantaneamente para a definição da função se clicar em seu nome enquanto mantém pressionada a tecla Ctrl. Essa abordagem ajudará você a entender em detalhes como as funções funcionam no WC.
Quando você só precisa atualizar rapidamente na memória o propósito de qualquer método e descobrir quais parâmetros passar para ele, preste atenção nas dicas de ferramentas que aparecem quando você passa o cursor sobre um elemento no código.
Ganchos, como Actions e Filters, são amplamente usados no WC para que você possa personalizar esse plugin sem substituir arquivos ou modelos principais.
Se você selecionar “ do_action ” ou “ apply_filters ” no arquivo, o editor destacará todas as correspondências de gancho.
Você pode usar Ações para exibir marcação adicional. Você só precisa descobrir a localização deles nos arquivos responsáveis por exibir o frontend. Os filtros são usados para processar ou analisar dados, por exemplo, quando você precisa alterar uma matriz ou objeto antes de usá-lo.
Podemos adicionar a funcionalidade necessária ao arquivo “functions.php” em nosso tema. Escreva sua própria função e registre-a usando o método add_action ().
Você economizará muito tempo se usar o sistema de ajuda dinâmico ao trabalhar com WordPress e WooCommerce no CodeLobster IDE.
Assim que você começa a inserir seu código, o IDE seleciona automaticamente links para documentação oficial para todas as funções e objetos.
Vá para a guia “Ajuda Dinâmica” no painel direito do programa e clique no link apropriado para começar a estudar a documentação no navegador.
Substituindo arquivos de modelo no WooCommerce
O WooCommerce tem seu próprio sistema de template – os arquivos de template frontend estão localizados na pasta “ wp-content/plugins/woocommerce/templates/ ”.
Tecnicamente, se você deseja criar uma página de carrinho personalizada ou editar completamente a página de um único produto, você pode “substituir” o arquivo de modelo relevante e colocá-lo na pasta do tema filho. Isso é a menos que você queira trabalhar com ganchos e filtros, que são muito mais fáceis e limpos do ponto de vista do desenvolvimento.
Para começar a trabalhar com templates, crie uma pasta “ woocommerce ” na pasta do seu tema. Agora você pode copiar qualquer modelo do WooCommerce que deseja substituir e colocá-lo lá. O WooCommerce encontrará essa substituição e carregará o seu e não o padrão.
Você pode inserir diretamente HTML, texto simples ou código PHP em arquivos de modelo, colocando-o entre “ <?php …. ? > ” etiquetas.
Neste exemplo, pegamos o arquivo de modelo da página do carrinho de “ woocommerce/templates/cart/cart.php “, copiamos e colamos na pasta /woocommerce do nosso tema filho (“ storefront-business/woocommerce/cart/cart.php “ ) e, em seguida, personalizou-o.
Agora, o modelo padrão para exibir a página Carrinho foi reescrito e todas as alterações que fizemos serão levadas em consideração.
Trabalho em equipe de projeto de comércio eletrônico eficaz
Normalmente, grandes lojas online são desenvolvidas e apoiadas por uma equipe de programadores. O CodeLobster IDE facilita a manutenção do código-fonte do projeto por meio da integração com o Git .
É possível trabalhar com repositórios locais e remotos, criar novas ramificações para testes seguros e salvar alterações usando commits.
A maioria dos comandos do Git podem ser executados diretamente do menu de contexto do projeto, por exemplo, para criar um commit, basta selecionar “Git” -> “Commit”.
Ao mesmo tempo, CodeLobster IDE oferece uma caixa de diálogo conveniente na qual você verá imediatamente o status de todos os arquivos do seu projeto e poderá selecionar os arquivos que precisam ser adicionados ao instantâneo.
O IDE vem com ferramentas gráficas úteis para visualizar o histórico de alterações e comparar diferentes versões de arquivos. Não há necessidade de se distrair e executar utilitários de terceiros.
Após executar o comando “Git” -> “History”, temos a oportunidade de visualizar todo o histórico de modificações , percorrendo sequencialmente os commits.
O próximo comando útil “Git” -> “Compare” torna fácil examinar o histórico de edições e visualizar todas as modificações do mesmo arquivo em diferentes commits.
Uma maneira conveniente de visualizar as versões ajudará você a lidar rapidamente com as edições, mesmo que tenham sido feitas por outros desenvolvedores. As linhas do código que são diferentes ou que foram adicionadas são destacadas em vermelho.
O suporte a um bom VCS garante a integridade do código-fonte, além de facilitar o gerenciamento de todo o projeto. Os recursos integrados serão úteis para equipes de qualquer tamanho, incluindo jovens programadores e profissionais.
O proprietário do site poderá atrair visitantes e começar a fazer vendas, enquanto a equipe de desenvolvimento continuará a introduzir novas funcionalidades e planejar a expansão do site, sem medo de interromper o funcionamento de um código existente e estável da loja.
Vamos resumir
Para implementar rapidamente novas soluções digitais com o WordPress, você precisa de um IDE confiável e funcional. Codelobster suporta de forma abrangente este sistema e outros CMS populares para todas as tarefas de negócios: Joomla, Drupal e Magento.
Os desenvolvedores da Web terão que resolver a maioria das tarefas futuras, portanto, esteja preparado para um trabalho sério e para o surgimento de muitos projetos interessantes em breve.