WooCommerce: explorando a base de código

Publicados: 2021-09-15
Base de código WooCommerce

WooCommerce é um plugin com uma base de código grande e complicada.

Se você é um desenvolvedor, entender o código subjacente em detalhes é extremamente benéfico e quase certamente renderá dividendos a longo prazo.

Se você pode escrever um pouco de PHP (a maior parte do Business Bloomer é feita de PHP Snippets), você definitivamente precisa pesquisar o núcleo de vez em quando. Caso contrário, o Stackoverflow não será suficiente por si só.

Se você viu e usou os Guias Visual Hook do WooCommerce, como o da Página de Produto Único, bem, eles são simplesmente gerados (manualmente…) a partir do próprio código executando muitas pesquisas PHP. Pessoalmente, mantenho uma cópia dos arquivos de plug-in mais recentes nos downloads do meu PC, para que sempre possa pesquisá-lo ao procurar um gancho ou uma função específica.

Então, acompanhe-me neste artigo enquanto exploramos a base de código do WooCommerce, como ela é estruturada e alguns de seus segredos internos!

Onde encontrar o código

Para explorar a base de código do WooCommerce, você tem algumas alternativas, além de baixar os arquivos do plugin em https://wordpress.org/plugins/woocommerce

Em primeiro lugar, e mais acessível, é navegar no código online através do WordPress Trac . Essa é a maneira mais conveniente de navegar pelo código, pois está sempre atualizado e disponível instantaneamente. Tudo que você precisa é uma conexão com a internet e acesso a um navegador.

Esse método é ótimo para pesquisas de código rápidas e arquivos de código de marcação para referência posterior. Você pode até marcar um número de linha específico também. por exemplo, para vincular ao método de renderização do bloco Checkout Gutenberg (que começa na linha 66), você pode usar este URL: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

A outra opção para visualizar o código é clonar o repositório oficial do WooCommerce GitHub . Isso é recomendado se você precisar explorar o código com mais detalhes localmente por meio de seu editor preferido, pois você tem acesso a ferramentas de pesquisa mais poderosas.

Para fazer isso, você precisará usar a linha de comando para baixar e gerenciar o repositório WooCommerce. Se você estiver usando o macOS ou um sistema operacional Linux, poderá usar o aplicativo Terminal integrado. Git Bash é uma excelente escolha para usuários do Windows.

Seja qual for o aplicativo de terminal que você estiver usando, abra-o e execute o seguinte comando para clonar o WooCommerce para um diretório local em seu computador:

 git clone https://github.com/woocommerce/woocommerce.git

Você pode cloná-lo diretamente no diretório local de plugins do WordPress (localizado em /wp-content/plugins/) ou, em vez disso, clonar o WooCommerce para uma pasta genérica em seu computador e vinculá-lo à pasta local de plugins do WordPress. A vantagem desse método é que você pode facilmente adicionar/remover o WooCommerce de uma instância local específica do WordPress. Não está vinculado a um específico.

Depois de clonar o repositório, certifique-se de também executar o seguinte comando para instalar as dependências do plug-in e os pacotes externos.

 npm install && composer install

Isso é importante, pois nem todo o código WooCommerce está incluído no repositório principal. Por exemplo, os blocos do Gutenberg estão contidos em um repositório separado por padrão. Para incluí-los na base de código, você precisará usar o comando acima para instalá-los especificamente.

Depois que todas as dependências e repositórios externos forem instalados, eles estarão disponíveis instantaneamente. Aqui está o mesmo código de bloco do Checkout que vimos anteriormente no WordPress Trac, mas agora temos acesso a ele localmente.

Estrutura do código

O plugin WooCommerce está organizado em várias pastas de nível superior:

  • /ativos
  • /i18n
  • /inclui
  • /lib
  • /pacotes
  • /dados de amostra
  • /src
  • /modelos
  • /fornecedor

A pasta assets contém uma grande coleção de estilos, fontes, imagens e JavaScript que ajudam na estética e interatividade do plugin tanto no administrador do WordPress quanto no frontend.

As pastas de plug-in padrão, como i18n , sample-data e vendor contêm funcionalidades para recursos de internacionalização, dados de amostra de produto e bibliotecas de terceiros, respectivamente.

A pasta de modelo contém todos os modelos PHP estruturados usados ​​para vários conteúdos do WooCommerce, como carrinho, checkout, e-mails etc. Cada modelo pode ser substituído copiando-o para o local relevante em um tema personalizado (geralmente um tema filho), então vale a pena navegar através desta pasta em detalhes para ver todos os modelos disponíveis que podem ser personalizados. Observação: personalizar o WooCommerce por meio de snippets é melhor do que substituir modelos.

O núcleo principal da funcionalidade do plugin está contido nas pastas includes , lib , packages e src . Em particular, a pasta includes contém a lista principal de classes de plugins PHP para uma variedade de recursos do WooCommerce.

Além disso, todas as definições de bloco do Gutenberg disponíveis no WooCommerce estão localizadas na pasta de pacotes.

Explorando o código

O arquivo de plugin principal na pasta raiz é woocommerce.php . Isso inicializa o autoloader e os pacotes.

O autoloader gerencia o carregamento de pacotes e classes localizados no diretório /src. Os pacotes incluem código desenvolvido fora do plug-in principal do WooCommerce, como os blocos do editor.

Depois que todo o código carregado automaticamente for carregado, a classe principal do WooCommerce é incluída e instanciada por meio de:

 WooCommerce::instância()

Isso cria uma nova instância da classe WooCommerce e a armazena dentro de uma variável de classe estática. Essa nova instância é então retornada e armazenada em uma variável global para que possa ser acessada de qualquer lugar.

Pesquisando a base de código

A maioria dos editores de código modernos fornece funções de pesquisa poderosas para poder navegar na base de código. Para os exemplos mostrados abaixo, estamos usando o VS Code, mas isso realmente não importa muito, pois quase todos os editores fornecem funcionalidade de pesquisa semelhante.

Podemos descobrir muito sobre a base de código realizando algumas pesquisas básicas. Por exemplo, se procurarmos quais ganchos estão disponíveis, procurar por ' add_filter ' retornará cerca de 380 ganchos de filtro!

Compare isso com os ganchos de ação que retornam ainda mais em cerca de 618 correspondências para o termo de pesquisa ' add_action '.

Há muito espaço para refinar nossas pesquisas, como fazer pesquisas apenas em tipos de arquivo específicos e para strings que correspondam especificamente ao caso do termo de pesquisa e se for uma palavra inteira.

Por exemplo, o seguinte resultado de pesquisa exibe correspondências para ' WooCommerce ' onde é uma palavra inteira, diferencia maiúsculas de minúsculas e está localizada apenas em um arquivo PHP (outros tipos de arquivo são ignorados).

Uma das razões pelas quais o VS Code é tão popular é devido ao grande número de extensões disponíveis, e existem várias que podem ajudar na navegação do código. Uma extensão específica que se destaca é o Bookmarks.

Ele permite que você marque locais em seu código para que você possa voltar para seções de código específicas de interesse com o clique de um botão. É realmente útil, especialmente para grandes bases de código, como WooCommerce.

Na captura de tela a seguir, marquei alguns ganchos de ação do WooCommerce para acesso rápido aos quais gostaria de voltar mais tarde.

Basta clicar em qualquer um dos itens marcados no painel do explorador para levá-lo diretamente a uma linha de código específica.

Existem muitos outros termos que você pode pesquisar. Talvez você queira explorar quais classes WooCommerce estão disponíveis. Esse tipo de pesquisa pode se tornar mais poderoso quando combinado com Regex.

Por exemplo, é fácil pesquisar nomes de classes que contenham 'WC' no início (por exemplo, 'WC_Structured_Data'). Mas e as classes que contêm 'WC' em qualquer lugar no nome da classe? Para isso, o Regex é necessário, pois você precisa procurar a string 'class' seguida por um espaço, que é seguido por uma string que contém 'WC' em qualquer lugar dentro.

Com o Regex, você também pode fazer coisas como procurar um nome de função (ou parte de um nome) que seja um método de uma classe e não uma função autônoma. As possibilidades são infinitas e, portanto, um bom conhecimento de trabalho de Regex é altamente recomendado.

Um exemplo rápido de personalização do WooCommerce

Digamos que você precise personalizar a página Checkout e, especificamente, precise exibir uma legenda sob o título "Detalhes de cobrança".

O que você pode fazer é uma pesquisa de arquivo do plugin WooCommerce para a string ' Detalhes de cobrança ', para ver se há "algo" que você pode usar em seu código personalizado. Neste caso, usarei o editor de código NotePad++, apenas para mostrar que qualquer software é válido:

Obtive 2 resultados de pesquisa, mas apenas um é relevante para a página de checkout. Então, eu abro esse arquivo específico (form-billing.php), nessa linha específica (28):

…e observe que há um do_action() logo após o título!

Isso nos dá a chance de “injetar” algum código lá sem substituir todo o arquivo de modelo. Eu vou para o functions.php do meu tema filho e escrevo o seguinte: 

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

E aqui está o “depois”:

Continue explorando!

Nós apenas arranhamos a superfície do que é francamente uma base de código muito grande. Você levaria muito tempo para examinar cada linha de código, mas espero ter conseguido aguçar seu apetite o suficiente para continuar pesquisando a fascinante base de código do WooCommerce e aprender ainda mais!