Personalizar uma arquitetura de referência do B2C Commerce

Após concluir esta unidade, você estará apto a:

• Explicar por que a personalização de um aplicativo é esperada.
• Listar duas personalizações SFRA.
• Explicar a diferença entre os dois modelos de decoração SFRA.
• Explicar como a extensão ou substituição de um controlador pode afetar a funcionalidade e o desempenho.
• Listar dois benefícios de se usar SFRA em vez de SiteGenesis.

Como arquiteto funcional, você fez muita coisa para elaborar, projetar e documentar uma solução de loja do Salesforce B2C Commerce. Agora você precisa aplicar a solução. E adivinhe? Isso também requer algum planejamento.

Pergunte a si mesmo o seguinte:

• Posso usar uma arquitetura de referência como base de código e, se assim for, como lido com as personalizações?
• Como integrar aplicativos de terceiros?
• Quais são algumas práticas recomendadas de implementação e como elas mudam minha abordagem?
• Como avaliar a preparação para o lançamento?

Nesta unidade, discutimos a personalização de uma arquitetura de referência para atender aos requisitos do comerciante. Vamos falar sobre os outros tópicos mais tarde.

O B2C Commerce tem uma ótima funcionalidade padrão: "tamanho único" para quase todos. Mas a funcionalidade padrão nem sempre atende a todos os requisitos de um comerciante. Isto não é um ponto fraco. Tem mais a ver com a escala e o escopo dos comerciantes que usam o B2C Commerce. De fato, a complexidade da criação de uma loja do B2C Commerce exige que ofereçamos uma plataforma totalmente personalizável e extensível com base na nossa funcionalidade padrão se quisermos atender às necessidades individuais do comerciante.

Esses requisitos variam muito, dependendo de aspectos como vertical, local, estratégia e escala do comerciante. Um vendedor de livros, por exemplo, tem requisitos diferentes de um varejista de artigos esportivos. Imagine uma loja online que permite aos compradores personalizar calçados. Ou um varejista de maquiagem que permite que os clientes tirem uma foto do rosto e apliquem maquiagem a ele. Alguns varejistas vendem milhões de camisetas em vários países; já outros vendem bolsas de couro únicas de um único site de luxo.

Com o B2C Commerce, temos código inicial embutido em nossas arquiteturas de referência. Na verdade, há dois deles: SiteGenesis e Storefront Reference Architecture (SFRA). Aprendemos sobre a SFRA no módulo do Trailhead Salesforce B2C Commerce para desenvolvedores.

O SiteGenesis, atualmente usado por mais de 2.700 sites do B2C Commerce, é a base comprovada para algumas das principais marcas do mundo. Além da funcionalidade padrão da loja, o SiteGenesis também oferece design dinâmico e muitos outros recursos incríveis. No entanto, depois de personalizar o SiteGenesis para atender aos requisitos do aplicativo, você tem que atualizar o aplicativo com eventuais aprimoramentos do SiteGenesis.

Demos uma boa olhada e criamos a SFRA, uma estrutura pronta para usar que combina as melhores práticas de design de sites, merchandising e arquitetura técnica para ajudar os comerciantes a criar lojas que priorizam dispositivos móveis. Assim como o SiteGenesis, a SFRA fornece carrinhos de compras, checkouts, páginas iniciais, páginas PDP e muito mais, totalmente funcionais. Mas a SFRA também fornece uma experiência de usuário otimizada para dispositivos móveis com fluxos de checkout móveis simplificados e ícones fáceis de tocar.

Considere cuidadosamente se você está planejando usar o SiteGenesis em seu aplicativo de loja. Embora o SiteGenesis seja usado por muitos sites, talvez seja hora de considerar o que a SFRA tem a oferecer.

A SFRA vem com um cartucho app_storefront_base e um módulo de servidor. O cartucho base contém funcionalidade que é comum à maioria dos sites. Você pode colocar camadas de funcionalidades adicionais sobre ele com cartuchos plug-in, cartuchos LINK e cartuchos de código personalizados. O B2C Commerce fornece cartuchos plug-in para listas de desejos, listas de presentes, Apple Pay e comparação de produtos, bem como recursos de middleware. Os parceiros LINK, como PayPal e Bazaarvoice, fornecem cartuchos LINK. Portanto, há todos os tipos de aplicativos a escolher.

Tenha em mente que o cartucho base e o módulo não são destinados à personalização. Isso significa que você não edita ou renomeia o cartucho app_storefront_base e os outros plugins, por exemplo, plugin_applepay. Isso também significa que você precisa manter sua versão do cartucho app_storefront_base e outros plugins atualizados para obter todas as alterações.

Isso é restritivo? Não, é por design!

Com uma base comum, você pode facilmente consumir atualizações de segurança, correções de bugs e novos recursos sem ter que recodificar. Como a SFRA tem compatibilidade reversa entre as versões de ponto (exceto quando exigido para correções de segurança urgentes), você pode apenas baixar uma nova versão e executar testes automatizados. Chega de pesquisar alterações de código para que você possa fazer a portabilidade para o código personalizado.

Como funciona?

Cada site precisa ter pelo menos um cartucho personalizado. Se você quiser criar vários sites, sugerimos que você crie vários cartuchos personalizados que separam funcionalidades específicas de uma marca ou localização. Isso permite que você reutilize a maior parte da pilha de cartuchos em um novo site ou microssite.

Lembre-se, uma pilha de cartuchos é como você lista cartuchos no Business Manager (indicando a ordem de carregamento). Quando o site está ativo, cada cartucho se sobrepõe ao anterior, construindo o aplicativo.

Vamos falar sobre alguns dos componentes dentro desses cartuchos personalizados. Isso ajudará ao lidar com os membros mais técnicos da sua equipe.

Componentes	Exemplo
Ganchos	Os ganchos permitem configurar a funcionalidade chamada em um momento específico no fluxo do aplicativo ou para um evento específico. Isso significa usar ganchos OCAPI ou ganchos personalizados por meio dos métodos de classe HookMgr do pacote System do script do B2C Commerce. O aplicativo pode usá-los, por exemplo, para calcular ou validar o carrinho, ou para invocar um processador de pagamento.
Módulos	Os módulos são uma maneira padrão do setor de agrupar códigos para funcionalidades compartilhadas em vários recursos. Os módulos facilitam a adoção da funcionalidade da loja e, em seguida, a reutilização onde quer que se aplique. A SFRA suporta módulos de script JavaScript/B2C Commerce que estão em conformidade com a especificação CommonJS Módulos 1.1.1. A funcionalidade em um módulo CommonJS pode ser reutilizada por vários controladores. O arquivo .ds ou .js de um módulo é normalmente armazenado em um cartucho na pasta script ou em uma pasta modules no mesmo nível de um cartucho. O aplicativo pode acessar módulos no cartucho, outros cartuchos e a pasta de módulos.
Templates	Os templates determinam como as informações são exibidas na loja (igual ao SiteGenesis). A SFRA inclui dois modelos de decoração: page.isml: contém informações de navegação. checkout.isml: não contém informações de navegação. A remoção de informações de navegação, por exemplo, geralmente melhora a porcentagem de abandono de carrinhos. Os compradores não veem uma saída fácil.
Modelos	Os modelos da SFRA fornecem uma camada de objeto JSON ao aplicativo. Os modelos convertem objetos retornados pelas APIs de script do B2C Commerce em objetos JSON puros criados para a loja. Os modelos também aplicam lógica de negócios à loja. Os controladores criam e atualizam modelos. Para personalizar um modelo, você cria o modelo e adiciona dados a ele que podem ser usados para renderização.
Controladores e rotas	O middleware permite que você execute o código antes e depois de um controlador ser invocado. A rota permite adicionar um chamável compatível com PSR-7 à pilha que é invocado toda vez que o aplicativo é executado. A extensão ou substituição de um controlador pode afetar a funcionalidade e o desempenho. Se você estender um controlador, o aplicativo executará o middleware original e, em seguida, a extensão. Se o middleware original incluir uma interação de terceiros, a interação ainda será executada. Se a extensão também incluir a interação, a interação será executada duas vezes.
Formulários	Crie formulários HTML usando modelos e controladores. Usando definições de formulário, você também pode persistir dados de formulários durante uma sessão e armazená-los em objetos do sistema ou objetos personalizados.

Como o SiteGenesis foi a arquitetura de referência do Commerce Cloud por anos, há uma riqueza de experiência de personalização nele.

Aqui estão algumas personalizações típicas do SiteGenesis.

• Criar um atributo separado para controlar apenas a categoria de demonstração no refinamento da categoria. Isso se soma a um atributo existente que exibe a categoria na navegação superior e refinamentos.
• Ajustar automaticamente o carrinho para o método de envio padrão. Exibir o custo de envio (e promoções de envio, se houver) no carrinho em vez de na página de frete no checkout.
• Mostrar tanto as variantes de venda quanto as variantes de preço total na página de detalhes do produto. Separar visualmente SKUs com desconto de SKUs de preço total, colocando cores em dois lugares diferentes na página de detalhes do produto.
• Usar uma preferência personalizada do site ou um atributo personalizado no objeto de slot de conteúdo para controlar a velocidade com que o carrossel de página inicial gira.

O limite das personalizações depende apenas de recursos, tempo e imaginação. Agora que você conhece o básico de personalizar uma loja usando duas arquiteturas de referência diferentes do Commerce Cloud, vamos passar à integração de aplicativos de terceiros.

• Trailhead: Criar seu site de comércio eletrônico com o Salesforce B2C Commerce
• Trailhead: Desenvolver para o Salesforce B2C Commerce
• Trailhead: Construir sua carreira como um arquiteto funcional do Salesforce B2C