O WooCommerce é um dos mais populares plugins de WordPress para a criação de aplicativos de eCommerce. Além de usar o WooCommerce em um aplicativo tradicional de WordPress, você pode usá-lo como uma solução headless.

Este artigo ensina a criar um aplicativo WordPress headless com o React implantado na Kinsta.

Introdução ao WooCommerce headless

O termo “eCommerce headless” significa a separação do backend (head) do frontend (body) de um aplicativo de eCommerce. A arquitetura headless passa solicitações entre as camadas de apresentação (frontend) e as camadas de aplicativo (backend) de uma solução de eCommerce por meio de APIs.

As APIs definem as interações entre os intermediários, permitindo que as empresas alterem as camadas de apresentação sem interferir na funcionalidade das camadas de aplicativos e atualizem, editem ou adicionem produtos a várias camadas de aplicativos.

Em um aplicativo WooCommerce headless, a API do WooCommerce é um intermediário, fornecendo comunicação entre o frontend e o backend. Além dos benefícios mencionados acima, isso oferece suporte ao desenvolvimento de frontend flexível e escalável, permitindo que você se concentre na criação de interfaces de usuário envolventes e dinâmicas com pilhas de tecnologia modernas, como React ou Vue.

Além disso, o uso do WooCommerce headless prepara a infraestrutura de eCommerce para o futuro, ajudando você a se adaptar à evolução das necessidades dos clientes e aos avanços tecnológicos. Você pode atualizar sem esforço os componentes do frontend e, ao mesmo tempo, garantir a estabilidade e a confiabilidade da plataforma de backend do WooCommerce.

Aplicativo de eCommerce tradicional e aplicativo de WooCommerce headless.
Aplicativo de eCommerce tradicional e aplicativo de WooCommerce headless.

Essa abordagem moderna oferece vários benefícios em comparação com as configurações tradicionais de eCommerce do WordPress.

Agora que você entende o que é um aplicativo WooCommerce headless e seus benefícios, é hora de criar um para você. Usando o WordPress, o React e o plugin WooCommerce, você criará um aplicativo de eCommerce e o implantará na Kinsta.

Pré-requisitos

Antes de começar, verifique se você tem o seguinte:

Benefícios do WooCommerce headless

Quando você escolhe a opção headless para seus aplicativos WooCommerce, desbloqueia uma série de benefícios — especialmente a flexibilidade de ter um backend que suporta vários frontends para o seu aplicativo.

Aqui estão alguns outros benefícios do WooCommerce headless:

  • Personalização aprimorada — Você pode criar seu aplicativo WooCommerce como quiser usando qualquer framework web.
  • Melhor desempenho do site — Você pode aproveitar frameworks web rápidos, como React e Vue, para aumentar significativamente o desempenho do seu site.
  • Benefícios de SEO — Você tem mais controle e flexibilidade sobre as estratégias de SEO para atingir as metas da sua empresa.
  • Melhor escalabilidade — Seu site pode ser dimensionado de forma mais eficiente, garantindo um desempenho suave mesmo durante períodos de alto tráfego.
  • Possibilidade de criar experiências exclusivas para o cliente — Você está livre das restrições dos templates tradicionais. Você pode inventar experiências inovadoras e personalizadas para seus clientes.

Configuração de um site de WooCommerce headless

Acompanhe este passo a passo para configurar um site de WooCommerce:

  1. Faça login no seu painel MyKinsta
  2. Navegue até Adicionar serviço > Site WordPress.
  3. Selecione a opção Instalar WordPress.
  4. Na página Adicionar novo site WordPress, preencha os campos necessários para instalar o WordPress.
  5. Marque a caixa Instalar WooCommerce e clique em Continuar.
Instalando o WordPress e o plugin WooCommerce.
Instalando o WordPress e o plugin WooCommerce.

Ative o plugin WooCommerce

  1. No painel MyKinsta, clique em Domínios na barra lateral.
  2. Na página Domínios, clique em Abrir Painel do WordPress.
  3. Faça login em seu painel do WordPress, navegue até plugins, selecione o plugin WooCommerce e ative-o.
Ativando o plugin do WooCommerce.
Ativando o plugin do WooCommerce.

Configure o WooCommerce para operação headless

Para configurar o WooCommerce para operações headless:

  1. Faça login no seu painel do WordPress. Na barra lateral, clique em WooCommerce > Settings.
  2. Na página Settings, clique na aba Advanced. Em seguida, clique em Rest API.
  3. Agora, clique em Add key.

    Adicionando a chave para a API REST.
    Adicionando a chave para a API REST.

  4. Clique em Create an API key. Dê uma descrição à sua nova API REST, defina o campo Permissions como Read/Write e clique em Generate API key.

    Gerando a chave de API do WooCommerce.
    Gerando a chave de API do WooCommerce.

  5. Copie a chave e o segredo do consumidor e armazene em segurança para uso no aplicativo React.
  6. Por fim, ajuste a estrutura do Permalink para garantir que os dados JSON sejam retornados quando você solicitar a API. No painel do WordPress, clique em Settings > Permalinks e selecione Post name.

Antes de continuar, adicione alguns produtos à sua loja WooCommerce. Navegue até a seção WooCommerce no painel do WordPress, clique em Products e siga as instruções para adicionar produtos. Você também pode importar esses produtos de amostra para sua loja.

Com o WordPress e o WooCommerce configurados, você está pronto para se concentrar no frontend do seu aplicativo de eCommerce headless.

Configure um projeto React

Como configurar um projeto React:

  1. No diretório de sua preferência, use os seguintes comandos para criar um projeto React: 
    # Remember to replace <app-name> with your preferred name

# With npx
npx create-react-app <app-name> && cd <app-name>

# With yarn
yarn create react-app <app-name> && cd <app-name>
  2. Depois que o projeto for criado, crie um arquivo .env na raiz do projeto e adicione o seguinte: 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    Substitua isso por sua chave de consumidor e o segredo do WooCommerce gerados anteriormente.

  3. Em seguida, use o comando abaixo para instalar um pacote para gerenciar rotas: 
    ## With npm
npm i react-router-dom

## With yarn
yarn add react-router-dom
  4. Por fim, inicie o projeto React usando o seguinte comando: 
    ## With npm
npm start

## With yarn
yarn start

Desenvolva o frontend para o seu site de WooCommerce headless

Uma loja de eCommerce bem-sucedida exibe produtos e facilita as compras. Comece exibindo os produtos disponíveis na loja de WooCommerce no frontend. Isso envolve fazer solicitações à API do WooCommerce.

O endpoint para listar todos os produtos é wp-json/wc/v3/products. Esse endpoint deve ser anexado à URL do provedor. Adicione essa variável ao seu arquivo .env para a sua URL base, que é a URL do provedor com o endpoint products anexado. Substitua http://example.com com o domínio do seu site WooCommerce.

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

Ao fazer solicitações à API, você deve incluir sua chave de consumidor e segredo na URL. Quando combinados, a URL fica assim:


https://kinstawoocommerce.kinsta.cloud/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

Vamos fazer solicitações de API no aplicativo React usando a API Fetch para buscar os produtos do WooCommerce.

  1. Em seu aplicativo React, abra o arquivo App.js no diretório src e substitua seu conteúdo pelo código abaixo: 
    import {Link} from 'react-router-dom';
import {useEffect, useState} from 'react';

function App() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
            const data = await response.json();
            setProducts(data);
            setLoading(false);
        };

        fetchProducts();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);

    return loading ? (
        <div className="loaderText">
            <h2>Just a moment. Fetching products...</h2>{' '}
        </div>
    ) : (
        <ul>
            {products ? (
                products.map((product) => (
                    <li key={product.id}>
                        <Link to={`/product/${product.id}`}>
                            <img src={product.images[0].src} alt="Product banner"/>
                            <h2>{product.name}</h2>
                            <p>Sale price: {product.sale_price}</p>
                            <strong>
                                {product.stock_status === 'instock'
                                    ? 'In stock'
                                    : 'Out of stock'}
                            </strong>
                            <button>Add to Cart</button>
                        </Link>
                    </li>
                ))
            ) : (
                <li>No products found</li>
            )}
        </ul>
    );
}

export default App;

    Esse código busca uma lista de produtos no endpoint da API do WooCommerce usando a API Fetch quando o componente é montado (hook useEffect). A URL do endpoint é construído usando variáveis de ambiente definidas anteriormente.

    Depois que os dados são obtidos, ele atualiza o estado do componente (products) usando setProducts(response) e define loading para false usando setLoading(false).

    Enquanto os dados estão sendo obtidos, é exibida uma mensagem de carregamento. Depois que os dados são obtidos e loading é definido como false, ele mapeia o array products e renderiza uma lista de itens de produtos usando o JavaScript XML (JSX). Cada item de produto é agrupado em um componente Link de react-router-dom, que gera um link para a página de detalhes do produto individual com base em seu ID.

    O nome do produto, o preço, a descrição (renderizada usando dangerouslySetInnerHTML para injetar conteúdo HTML), o status do estoque e um botão são exibidos para cada produto.

  2. No diretório src, abra o arquivo index.js e substitua o código pelo snippet abaixo: 
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
    <React.StrictMode>
        <div className="container">
            <header>
                <h1>Kinsta Store</h1>
            </header>
                <BrowserRouter>
                    <Routes>
                        <Route exact path="/" element={<App />} />
                    </Routes>
                </BrowserRouter>

        </div>
    </React.StrictMode>,
    document.getElementById("root")
);

    Ele renderiza o componente App quando o caminho / é chamado no navegador.

  3. Execute seu aplicativo para ver as alterações. 
    ## With npm
npm start

## With yarn
yarn start

    O aplicativo React agora exibe uma lista de produtos da loja WooCommerce.

    Lista de produtos da loja WooCommerce.
    Lista de produtos da loja WooCommerce.

Criar páginas dinâmicas de produtos

Agora, para aprimorar a experiência do usuário, crie páginas dinâmicas de produtos usando a API do WooCommerce. Essa API fornece um endpoint para buscar os dados sobre um único produto: wp-json/wc/v3/products/<id>. Para usar esse endpoint para buscar e exibir dados sobre um único produto na loja, siga estas etapas:

  1. Crie um componente ProductDetail.js no diretório src que busque e exiba dados sobre um único produto. Esse componente busca e exibe informações detalhadas sobre um único produto, operando de forma semelhante ao código no arquivo App.js, exceto pelo fato de recuperar detalhes de um único produto. 
    import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';

function ProductDetail() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const {id} = useParams();
    const [product, setProduct] = useState(null);

    useEffect(() => {
        const fetchSingleProductDetails = async () => {
            const response = await fetch(
                `${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
            );
            const data = await response.json();
            setProduct(data);
        };
        fetchSingleProductDetails();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);

    if (!product) {
        return (
            <div className="loaderText">
                <h2>Fetching product details...</h2>
            </div>
        );
    }

    return (
        <div className="product-detail">
            <h2>{product.name}</h2>
            <h4>Original Price: {product.regular_price}</h4>
            <h4>Sale price: {product.sale_price}</h4>
            <img src={product.images[0].src} alt="Product banner"/>
            <strong>
                {product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}
            </strong>
        </div>
    );
}

export default ProductDetail;
  2. Crie um novo caminho em index.js e atribua o componente ProductDetail a ele. Este snippet de código cria um novo caminho em index.js e atribui o componente ProductDetail. Isso garante que, quando os usuários clicarem em um link de produto, serão direcionados para a respectiva página do produto. 
    // index.js
…
import ProductDetail from "./ProductDetail";

ReactDOM.render(
  <React.StrictMode>
	…
               <Router>
          <Routes>
            <Route exact path="/" element={<App />} />
		{/* the new route */}
            <Route path="/product/:id" element={<ProductDetail />} />
          </Routes>
        </Router>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

    Com essas modificações, clicar em qualquer produto no aplicativo redireciona os usuários para uma página que exibe informações detalhadas sobre esse produto específico.

    Informações detalhadas sobre um produto de vestuário.
    Informações detalhadas sobre um produto de vestuário.

Você pode acessar o código completo neste repositório do GitHub.

Integre os principais recursos do WooCommerce em uma configuração headless

Você pode construir sobre essa base de lista de produtos em um aplicativo WooCommerce headless integrando recursos essenciais como os seguintes:

  • Carrinhos de compras — Gerencie os dados do carrinho no lado do cliente ou use o armazenamento local para permitir que os usuários adicionem, removam e atualizem itens sem problemas.
  • Processos de checkout — Projete um checkout simplificado com componentes React, colete as informações necessárias, valide a entrada do usuário e garanta uma experiência de checkout tranquila.
  • Autenticação do usuário — Implemente autenticação segura usando JSON Web Token (JWT) ou Open Authorization 2.0 (OAuth2) para aprimorar a experiência do usuário com recursos de registro, login e redefinição de senha.
  • Processamento de pagamentos — Use APIs de gateway de pagamento seguros, como Stripe ou PayPal, para transações e reembolsos.
  • Gerenciamento de pedidos — Gerencie pedidos e estados de forma eficiente com a API do WooCommerce. Ofereça recursos fáceis de usar para histórico de pedidos, rastreamento, devoluções e reembolsos, e automatize processos usando webhooks ou arquitetura orientada por eventos.

Implante seu site de WooCommerce headless na Kinsta

Uma vez desenvolvido seu site de WooCommerce headless, implantá-lo na plataforma de hospedagem de sites WordPress da Kinsta é simples.

A Kinsta oferece uma série de benefícios, incluindo alto desempenho, segurança robusta e escalabilidade, tornando a escolha ideal para hospedar seu site de eCommerce headless. Se você já tem um site WordPress que não está na Kinsta, você pode facilmente migrá-lo para a Kinsta.

Além disso, você pode implantar seu aplicativo React no serviço de Hospedagem de Site Estático da Kinsta gratuitamente — tudo o que você precisa fazer é enviar seu código para o provedor Git de sua preferência (Bitbucket, GitHub ou GitLab).

Após completar o envio do seu código, siga estas etapas para implantar seu site:

  1. Faça login no painel MyKinsta.
  2. Clique em Adicionar serviço, e daí em Site estático.
  3. Selecione um provedor Git e clique em Conectar provedor Git.
  4. Selecione o repositório e o branch que você deseja implantar. As configurações de build são detectadas automaticamente.
  5. Certifique-se de adicionar todas as variáveis de ambiente necessárias do seu arquivo .env.

    Adicionando variáveis de ambiente.
    Adicionando variáveis de ambiente.

  6. Por fim, clique em Criar site para implantar seu aplicativo React.

Você implantou com sucesso seu aplicativo WooCommerce headless!

Resumo

Este artigo explicou as inúmeras vantagens e novas possibilidades de criação de lojas on-line dinâmicas e de alto desempenho com a configuração de sites de WooCommerce headless.

Ao separar o frontend do backend, você pode personalizar seu site para oferecer experiências de compras mais envolventes e personalizadas aos clientes que se beneficiam de alto desempenho, segurança robusta e escalabilidade.

Quer você seja um desenvolvedor experiente ou esteja apenas começando, a Kinsta fornece o suporte, as ferramentas e outros recursos necessários para criar e gerenciar soluções de eCommerce inovadoras e bem-sucedidas. Hospede na Kinsta ainda hoje para começar a explorar as possibilidades do eCommerce headless!

Animado com as infinitas possibilidades do WooCommerce headless em sua loja on-line? Compartilhe suas ideias ou perguntas nos comentários abaixo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).