Atenção: este tutorial cobre uma versão anterior do WooGraphQL e não está mais atualizado. Uma versão reescrita está em andamento — vamos ligar a ela a partir daqui, uma vez que é publicado.
Sumário
- Configurar WordPress para sua aplicação de comércio eletrônico sem cabeça
- Criando e configurando seu aplicativo de eCommerce para desenvolvimento
- Páginas de Listagem de Loja de Edifícios com WooGraphQL
- Criando login e navegação do usuário
- Criando a página do produto e opções do carrinho
Bem-vindo à primeira parte de nossa série tutorial sobre a criação de uma aplicação de comércio eletrônico sem cabeça! Esta série destina-se a desenvolvedores interessados em criar um aplicativo de comércio eletrônico robusto apoiado por um WooCommerce armazenamento utilizando WPGraphQL e WPGraphQL WooCommerce (WooGraphQL)Este capítulo irá guiá-lo através do processo de configuração de sua instalação WordPress em preparação para este esforço.
Configurar WordPress para sua aplicação de comércio eletrônico sem cabeça
Antes de mergulharmos, algumas suposições estão em ordem. Vamos presumir que você estará seguindo junto com o nosso guia e girando-se o seu ambiente WordPress exatamente como estamos usando as configurações Docker encontrados no /backend pasta da repositório de demonstração de GitHub. Se você já tem uma instalação local WordPress preparado com as dependências necessárias e plugins, não hesite em pular para a seção intitulada Configurar o WooGraphQL.
O que vamos fazer
- Clonar o
wp-graphql-demorepo - Rede de Docker de Inicialização
- Instalar + activar WooCommerce
- Gerando produtos.
- Gerando páginas de carrinho, checkout e páginas de conta.
- Instalar + activar WPGraphQL
- Instalar + activar WPGraphQL WooCommerce
Pré-requisitos para WP Environment incluídos no repositório de demonstração
- PHP
- Compositor
- Acoplagem + Composição de Acoplagem
Instalar as Dependências e Iniciar o Docker
Para começar, abra um terminal para um diretório de sua escolha, clone o repositório e navegue até o /backend pasta
git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backendDepois de puxar o repositório devemos estar no /backend directório. Para este tutorial, não vamos usar /frontend diretório para que possa ser ignorado. Agora do terminal no /backend diretório, execute o seguinte comando:
composer installApós a instalação das dependências, use o Docker Compose para criar e iniciar a rede do Docker executando:
docker-compose upUma vez que Docker começou com sucesso, você pode completar sua instalação WordPress, navegando para http://localhost:8080/wp/wp-admin.
Siga as instruções fornecidas para finalizar sua instalação e faça login no seu novo site WordPress.
Ativar Plug-ins e Configurar a Loja
Agora que nosso site WordPress está funcionando, vamos ativar os plugins necessários e configurar nossa loja. Do seu Painel WordPress, navegue para a página Plugins e ative o seguinte: WooCommerce, WPGraphQL, e WPGraphQL WooCommerce.
Se esta é uma instalação fresca, WooCommerce deve auto-gerar um Cart, Shop, e Checkout página após ativação.
Com seus plugins ativados, é hora de gerar alguns produtos para sua loja. Para fazer isso, abra uma nova janela de terminal (garantindo que sua rede Docker ainda esteja em execução em outra janela de terminal) e navegue até /backend diretório da demonstração. A partir daqui, execute o seguinte comando:
composer generate-products 100Este comando irá gerar automaticamente 100 produtos para sua loja. Embora a qualidade desses produtos não seja de topo, eles são perfeitos para testar e desenvolver sua loja.
Configurar o WooGraphQL
Nosso passo final na configuração do WordPress para o nosso aplicativo de comércio eletrônico sem cabeça é configurar WooGraphQL. Navegue para o Painel WordPress e vá para GraphQL > Configurações. A partir daqui, selecione o WooGraphQL tab.
Dentro da WooGraphQL configurações, procurar o Enable User Session transferring URLs definir e verificar o Cart URL, Checkout URL, e Account URL opções.
Habilitando esta opção diz ao WooGraphQL para registrar o URL da queda de sessão que nós checamos para o esquema GraphQL, e ativa o endpoint da queda de sessão. Por padrão, este endpoint está em https://our-site/transfer-session
Não se esqueça de clicar no botão ‘Salvar alterações’ para finalizar suas configurações!
E aí está! Sua instalação WordPress agora está pronta para o desenvolvimento de seu aplicativo de comércio eletrônico sem cabeça. Na próxima parcela desta série tutorial, vamos mergulhar na configuração da nossa front-end com Reagir e Próximo.jsFeliz codificação!
Leave a Reply