Como o Click Here Labs desbloqueou o Composable Commerce com o Atlas

Atualmente, o WP Engine facilita a maior comunidade colaborativa de agências do WordPress por meio do nosso Agency Partner Program.

Nesta sessão sob demanda do DE{CODE} 2023, você aprenderá como o WP Engine Agency Partner Click Here Labs usou o novo Atlas BigCommerce Blueprint para reimaginar a loja online do Combat Corner. Você também obterá uma demonstração do BigCommerce Blueprint para que possa criar seu próprio site de comércio eletrônico Atlas em apenas 10 minutos!

Caixas de som:

• Jonathan Jeter, diretor de produção técnica da Click Here Labs
• Bryan Smith, gerente de produto principal da WP Engine

Diapositivos da Sessão:

Transcrição:

BRYAN SMITH: Olá a todos. Meu nome é Bryan Smith, gerente de produto principal aqui na WP Engine. Hoje, falaremos sobre como o Click Here Labs desbloqueou o comércio combinável com o Atlas.

Juntando-se a mim hoje está Jonathan Jeter, diretor de produção técnica do Click Here Labs. Ele lidera a equipe lá. Eles são parceiros de agência do WP Engine e com quem trabalhamos muito de perto nos últimos meses para trazer nosso primeiro cliente de comércio sem cabeça ou combinável para a Atlas.

Entraremos mais nesse estudo de caso em apenas um minuto, mas antes disso, gostaria de falar um pouco sobre o estado do mercado com o desenvolvimento de composable. Tão combináveis ​​e headless– estamos usando-os de forma intercambiável aqui. Headless geralmente implica componível.

E não é apenas porque esses sites têm tanto desempenho que a demanda por eles está crescendo. Eles são altamente personalizáveis ​​e podem se adaptar rapidamente a um cenário de tecnologia em constante mudança, bem como a um ambiente de negócios em constante mudança, onde os resultados de seus negócios podem mudar com frequência. Eles oferecem experiências dinâmicas na velocidade da estática, que abordaremos ainda hoje.

E você também pode escalá-los sem ter que mudar a plataforma. No estudo de caso que apresentaremos hoje, o cliente do Click Here Labs conseguiu realmente permanecer no BigCommerce, seu back-end de comércio eletrônico, integrar o WordPress como seu CMS e trazer tudo isso para uma vitrine headless. Mas toda essa nova tecnologia pode muitas vezes ter um custo proibitivo, e é por isso que passamos os últimos anos abordando os pontos problemáticos de desenvolvimento mais graves com o Atlas de canteiros de obras dessa maneira.

E o Atlas, é claro, é mais do que apenas um host. É mais do que uma estrutura de front-end. Tem a camada API, plug-in de campos personalizados, aplicativo de desenvolvimento local, todas essas coisas que você precisa para começar. Mas talvez o mais importante, tem uma comunidade de aprendizagem e apoio.

Com todas essas ferramentas ao seu alcance, porém, não o culparíamos por ter um pouco de fadiga de decisão. Pode ser difícil até mesmo começar quando você tem tantas opções ao seu alcance e é aí que entram os projetos.

Então, desenvolvemos blueprints e eles permitem que você configure um site inicial com todos os plug-ins de código, modelos de conteúdo e estrutura paga de que você precisa. Você pode colocá-los em funcionamento em menos de 10 minutos. Você pode realmente simplificar o processo de iniciar um novo projeto.

Além disso, também ajuda você a conhecer a plataforma e nossas melhores práticas. Assim, você fica pronto para o próximo projeto, mas até agora, os projetos que tínhamos eram limitados a casos de uso de sites mais estáticos, como portfólio ou sites do tipo blog - nada tão dinâmico é uma vitrine sem cabeça.

E é por isso que criamos o projeto BigCommerce. Portanto, este modelo que demonstraremos para você aqui em apenas um minuto - ele vem pré-configurado com WPGraphQL, o Atlas Content Modeler, a estrutura Faust JS e algumas coisas novas também - um plug-in de blocos de comércio Atlas, que permite que você para trazer os dados do produto para o editor do WordPress e, em seguida, também um conector de comércio, que conecta você à API do BigCommerce, permitindo sincronizar dados do BigCommerce para o WordPress, mantendo-os sincronizados.

Você pode criar modelos de conteúdo a partir deles e também pode ativar o plug-in desse bloco. Então, com isso, por que não mostro como isso funciona e vamos fazer uma demonstração…

Tudo bem, então aqui estamos no portal WP Engine na página do Atlas. Portanto, ao criar um novo aplicativo Atlas, você pode começar do projeto e aqui terá algumas opções. O que vamos fazer aqui é pegar o projeto BigCommerce ali à direita.

E a partir daqui você também pode visualizar a vitrine ou visualizar o código no GitHub. Vamos selecionar esse projeto e clicar em Continuar. Portanto, o próximo passo é conectar-se à sua conta do GitHub.

E então o que faremos é clonar nosso repositório no seu. Então você seleciona sua conta do GitHub, o nome do repositório e, em seguida, clicamos em Create App.

Então, algumas coisas acontecem durante esse processo. Primeiro, provisionamos o site WordPress. Construímos o código Atlas para o aplicativo Atlas. E então ele é implantado. E esse processo geralmente leva cerca de cinco minutos, mas aceleramos aqui.

Assim que o site WordPress for construído, podemos entrar no conector BigCommerce, que você verá na tela aqui. Tela de configuração – vamos inserir as credenciais e então podemos iniciar a sincronização do produto.

E eu tenho isso conectado a uma conta de sandbox do Atlas, bem como a uma conta de sandbox do BigCommerce. E posso importar os produtos que tenho nessa conta BigCommerce. Acabei de receber cerca de 13 produtos de demonstração.

Eu queria observar aqui que, após essa sincronização inicial, você não precisa executá-la novamente para obter atualizações. O plug-in suporta webhooks, bem como um cron job noturno. E assim que a importação desses produtos for concluída, ele também sincronizará as imagens.

E então vamos olhar os produtos. Tudo bem, então temos nossos produtos carregados. Você pode vê-los aqui na página de produtos. Estes são os produtos de demonstração do site BigCommerce.

Iremos para a página Detalhes de um deles e tudo o que estou mostrando aqui são apenas todos os campos de dados que trouxemos – título, imagens, descrições. Está tudo lá.

Então agora, está lá no WordPress. Está sincronizado para você. Você faz uma alteração no site BigCommerce, ele é atualizado imediatamente.

Agora, quero mostrar a você os modelos de conteúdo que construímos com o Atlas Content Modeler. Este é apenas um exemplo. E acho que tenha isso em mente com isso. É realmente um ponto de partida para você, apenas para mostrar como fizemos isso.

Esses modelos de conteúdo alimentam nossa página de detalhes do produto na vitrine headless, que veremos aqui em apenas um minuto. Apenas um exemplo de quão flexível é a modelagem de conteúdo com o Atlas Content Modeler. OK, em seguida, vou mostrar o plug-in de blocos de comércio sobre o qual falamos anteriormente.

Iremos para a página inicial no editor de blocos do WordPress. E aqui você vê esta seção Compre nosso produto mais recente. Estes são os blocos de comércio.

Então, o que você pode fazer é escolher o tipo de bloco, produtos mais recentes, produtos populares, a contagem de exibição que deseja mostrar. Estamos mostrando quatro lá. Tudo isso vem do lado do BigCommerce. Aqui está outro exemplo mais abaixo na página - itens de venda, apenas como uma alternativa de como você pode usá-los.

Até agora, vimos modelos de conteúdo e o plug-in de blocos. Aqui está tudo o que está instalado no site WordPress. São todos aqueles plugins que mencionamos anteriormente.

OK. Aqui estamos na vitrine. Esta é a nossa vitrine headless, que você pode ver no URL. Você pode ver nossos blocos de produtos na página.

E esta é uma vitrine simples. É realmente um ponto de partida. E por esse motivo, tentamos mantê-lo o mais simples possível. Em seguida, irei para a página Loja.

Aqui você pode ver todos os nossos produtos. Portanto, esta página é na verdade um modelo de conteúdo, a página de detalhes do produto. Você pode ver que temos um local lá embaixo para revisões. Nosso próximo passo será adicioná-lo ao carrinho.

E você verá que o carrinho também está sem cabeça. Portanto, tudo isso está no front-end do Atlas. Agora, para o checkout, redirecionamos para BigCommerce. Para os propósitos deste modelo, achamos que fazia mais sentido, mas todo o resto está no front-end do Atlas sem cabeça.

Aqui estamos de volta à vitrine. Aqui está a página Sobre – apenas um exemplo do que você pode fazer com o layout dessas diferentes seções de página. Então você pode pegá-lo, usá-lo, aprender com ele. Essa é realmente a intenção aqui é para você começar rapidamente.

Tudo bem, é isso e com isso, vou passar para Jonathan para aprofundar mais sobre como o Click Here Labs pegou esse projeto e o estendeu para um caso de uso de cliente real. Para você, Jônatas.

JONATHAN JETER: Obrigado, Bryan. Antes de falarmos sobre a extensão do blueprint, primeiro gostaria de discutir um pouco sobre o planejamento da solução. Antes de iniciarmos uma solução de comércio combinável muito flexível, queremos ter certeza de que a planejamos corretamente para garantir o uso das peças apropriadas.

E sempre começamos com a documentação da API e os requisitos funcionais. Portanto, neste caso, para BigCommerce, examinamos a documentação da API para garantir que todos os recursos de que o cliente precisava em sua loja estivessem disponíveis por meio da API. E aqueles que não eram, precisávamos planejar como iríamos atender a essas necessidades, atender a esses requisitos.

Portanto, como parte desse plano, você precisa determinar onde cada requisito será atendido, certo? É através do BigCommerce nativo? É através do WordPress? É por meio do aplicativo front-end que você está criando ou de aplicativos de terceiros?

Neste caso, tivemos que tomar algumas decisões e como a plataforma é muito flexível, o principal objetivo aqui foi acelerar o site, conseguir, como havíamos dito antes, a velocidade estática no front end da aplicação. Então, queríamos ter certeza de que todas as partes do site, todos os componentes do site que o Google veria, estivessem no aplicativo front-end sem cabeça.

E então tivemos que dar uma olhada, por exemplo – Bryan falou sobre o carrinho, falou sobre a seção de contas. Ele falou sobre essas coisas diferentes. Quais dessas peças iríamos fazer nos diferentes sistemas? Então, por exemplo, decidimos nesse caso pelo carrinho, pelo checkout, pela conta do cliente fazer isso dentro do aplicativo nativo.

Em seguida, o conteúdo do site - queríamos garantir que ele pudesse ser categorizado corretamente, que o cliente pudesse se sentir confortável em adicionar esse conteúdo por meio de uma interface padrão do WordPress. Também agregamos alguns dados dentro do WordPress para poder apresentá-los no front end de uma forma diferente. Isso seria coisas que talvez não estivessem disponíveis no próprio BigCommerce e então tivemos que levar em consideração os aplicativos de terceiros.

Onde estavam indo ou vindo os dados para o CRM deles, para rastreamento, para esses tipos de coisas e, finalmente, você precisa planejar - quais são os componentes que você criará nesse front-end e para onde eles vão puxar os dados de?

Portanto, flexibilidade máxima significa que você tem muitas decisões a tomar e lembrando que basicamente está construindo um aplicativo de comércio eletrônico com todas as ferramentas disponíveis no Atlas e, neste caso, no BigCommerce, para poder criar essa loja. Então eu só queria destacar que é muito importante fazer esse planejamento, para entender no que você está se metendo.

E tenha essas discussões com o cliente também e diga: é isso que estamos construindo. Isso é o que vai ficar no aplicativo nativo. Isso é o que vai estar no front-end.

Essas partes que são protegidas por senha– por exemplo, Minha conta, Histórico de cobrança, esses tipos de coisas– novamente essas, são coisas que não serão indexadas. Portanto, é menos importante que eles estejam no aplicativo front-end. Então, depois de descobrir isso e configurarmos o projeto, agora você está pronto para começar.

Agora falamos em estender o projeto, certo? Então, o que está envolvido nisso? Vamos ver aqui que o aplicativo front-end foi iniciado. E agora, você precisa construir todas aquelas peças extras que vão tornar a loja única, que vão fazer com que ela faça o que seu cliente precisa fazer.

Por exemplo, no BigCommerce, há algumas funcionalidades nativas disponíveis na API, como produtos complementares, grupos de clientes, esse tipo de coisa. E assim o cliente ainda está usando o BigCommerce nativo para gerenciar esses produtos complementares, para gerenciar os diferentes grupos de clientes, para gerenciar quando as coisas vão à venda e códigos de desconto e esse tipo de coisa.

Estamos pegando esses dados e apresentando-os no front-end. Também tínhamos aplicativos de terceiros que eram plug-ins instalados no BigCommerce, certo? Há um personalizador de produto.

E então dados de diferentes locais – esses precisavam ser considerados. E esses componentes podem ser construídos, por exemplo, em uma página de detalhes do produto, certo? Se tem um produto que tem customização – então você pode mudar as cores.

Você pode adicionar logotipos. Você pode fazer esse tipo de coisa, certo? Este personalizador permite que você faça isso. Portanto, essas são peças diferentes que foram construídas com base em funcionalidades de terceiros.

E, finalmente, há uma funcionalidade que foi construída diretamente no front-end. Por exemplo, matriz de comparação de produtos – todos nós já vimos isso em locais diferentes. Compare três produtos diferentes, veja quais atributos diferentes, como eles se comparam, a capacidade de agrupar produtos em uma venda, um desconto para um pacote. E há coisas que, por exemplo, estão disponíveis no BigCommerce nativo, mas por algum motivo, a API não faz a funcionalidade.

E o uploader de arquivos é um exemplo de algo que tivemos que criar basicamente no front-end usando uma funcionalidade diferente no back-end. Portanto, essas são todas as coisas que você constrói para estender esse projeto e algumas delas serão incluídas no projeto estendido ou no projeto premium sobre o qual acho que Bryan falará aqui em breve.

BRYAN SMITH: Obrigado, Jonathan. Agora vou cobrir o roteiro do Atlas bem rápido. Dividimos isso nas colunas Agora, Próximo e Mais tarde.

Na coluna Agora, você verá em negrito nossas iniciativas do Atlas específicas para comércio eletrônico. Lá embaixo, no lado esquerdo, o projeto BigCommerce – que está ativo, disponível para qualquer um experimentar agora. Também estamos trabalhando em uma API de vitrine.

Esta é uma camada de dados que reunirá o conteúdo do WordPress, BigCommerce ou qualquer outra fonte de terceiros em que você esteja interessado. Portanto, aqui está uma maneira de integrar todos eles. Estamos trabalhando na versão beta no momento, portanto, fique atento para mais detalhes à medida que avançamos.

A seguir, trabalharemos em um plano da Shopify. Esta é uma integração semelhante ao que fizemos com o BigCommerce, mas, neste caso, será com o Shopify. E então, à medida que avançamos além disso, voltaremos nosso foco para a personalização e localização sem comando. Sabemos que essas coisas são realmente importantes para vitrines dinâmicas. E é algo que queremos garantir que esteja totalmente integrado à plataforma de comércio da Atlas.

Então, se você está pronto para começar com o projeto BigCommerce, você pode abrir uma conta sandbox gratuita do Atlas hoje para experimentá-lo. Se você já possui uma conta Atlas, o projeto também está disponível para você. Vá experimentá-lo hoje.

Experimente no seu próximo projeto. Deixe-nos saber o que você pensa. Obrigado a todos. Nós realmente apreciamos o seu tempo hoje. Tenha um ótimo dia.