Storefront Preview

Você pode usar o Storefront Preview para ver como será a aparência do site do Progressive Web App (PWA) Kit com base no contexto, como código-fonte especificado, grupos de clientes ou uma data ou hora específica. Por exemplo, se você quiser visualizar como seu site será exibido durante uma venda futura, poderá usar esse recurso.

Vendas da Black Friday/Cyber Monday chegando? Visualize as alterações do site em um ambiente de Staging (preparação). Em seguida, certifique-se de que suas alterações em itens como produtos, precificação e estratégias de marketing funcionam da maneira esperada antes de implantar suas alterações para produção.

Além disso, você pode integrar o Storefront Preview a um sistema de gerenciamento de conteúdo (CMS) de terceiros. Digamos, por exemplo, que você tenha um banner de promoção de fim de ano gerenciado pelo seu CMS. Você pode permitir que seu CMS reconheça o contexto atual, como a data e a hora efetivas, para que a visualização do site exiba o conteúdo correto, como o banner de promoção de feriado pelo período de tempo especificado.

O Storefront Preview está disponível no Runtime Admin. Este guia explica como configurar, usar e solucionar problemas do Storefront Preview.

Para usar o Storefront Preview, você deve primeiro:

• Criar seu site usando PWA Kit versão 2.8.3 ou mais recente, ou 3.2.x com @salesforce/commerce-sdk-react@1.4.0 ou @salesforce/retail-react-app@2.4.0. O Storefront Preview não está disponível em PWA Kit versões anteriores a 2.8.3 ou 3.2.x. Atualize seu projeto para usar PWA Kit 2.8.3 ou 3.2.x, dependendo da versão principal atual.
• Ter acesso ao projeto no Runtime Admin em qualquer função que não seja somente leitura. Se você não tiver acesso, peça ajuda a alguém em uma função de administrador do Managed Runtime (MRT).
• Habilitar o contexto do comprador no Business Manager.
• Configurar seu site com base na funcionalidade que você deseja validar no Storefront Preview. Exemplos:
  • Configurar qualificadores personalizados e IDs de grupo de clientes usando grupos de clientes no Business Manager para aplicar regras para precificação, produtos ou promoções personalizados.
  • Para ver uma experiência de compra personalizada, configure o código-fonte que chama os endpoints de contexto do comprador. Isso é necessário porque o Storefront Preview usa informações de contexto para personalização.
  • Configurar a precificação que deseja oferecer em uma data específica. Dessa forma, precificação especificada é exibida quando você seleciona essa data no Storefront Preview.
• Seguir as etapas de configuração descritas na seção Configurar Storefront Preview.
• Configurar seu navegador para permitir cookies de terceiros no https://runtime.commercecloud.com.

Opcionalmente, você pode escrever uma função se quiser integrar o Storefront Preview a um CMS de terceiros. Consulte Adicionar o componente StorefrontPreview à sua loja (virtual) e Integrar com um CMS de terceiros.

Você pode usar o Storefront Preview com as versões mais recentes do Chrome ou do Safari. Seu navegador deve permitir o acesso dehttps://runtime.commercecloud.com a cookies de terceiros. O Storefront Preview não funcionará se você não ativar os cookies de terceiros.

• Os dados e as experiências mostrados no Storefront Preview não refletem necessariamente a experiência do comprador. A personalização do comprador requer o uso da Shopper Context API em seu projeto do PWA Kit. Saiba mais sobre o Contexto do comprador.
• O Storefront Preview mostra as páginas da loja (virtual) à medida que elas são exibidas para um usuário convidado em seu site. Por exemplo, um usuário convidado pode ver o conteúdo de produto ou conteúdo de marketing, precificação, promoções, listas de produtos ou páginas de exibição de produtos. Você não verá o conteúdo que um usuário conectado vê, como informações da conta ou um carrinho.
• O Storefront Preview funciona em páginas do PWA Kit e não em páginas de Storefront Reference Architecture (SFRA). No entanto, você pode usar a Ferramenta de visualização de site do Storefront Toolkit no B2C Commerce para visualizar páginas SFRA.

Siga estas etapas de configuração únicas necessárias para cada site que usa o Storefront Preview:

• 1. Crie um cliente privado SLAS para suas instâncias do B2C Commerce
• 2. Crie variáveis de ambiente MRT com os detalhes do cliente privado SLAS e o código curto da Commerce API
• 3. Confirme se o usuário do Account Manager tem acesso à instância do B2C Commerce
• 4. Adicione o componente StorefrontPreview à sua loja (virtual)
• 5. Atualize os cabeçalhos da Política de Segurança de Conteúdo da loja (virtual)

Você deve criar um cliente privado Shopper Login and API Access Service (SLAS) com os escopos sfcc.shopper-context.rw e sfcc.ts_ext_on_behalf_of para as instâncias do B2C Commerce usadas pela sua loja (virtual). O Storefront Preview usa o cliente privado SLAS para definir o contexto na loja (virtual). O cliente privado SLAS pode ser facilmente criado usando a interface do usuário de administrador do SLAS.

Siga as etapas do guia de Autorização para Shopper APIs para criar um cliente SLAS privado para cada instância do B2C Commerce em que você deseja usar o Storefront Preview:

• Selecione o tipo de aplicativo BFF ou Web App no campo Qual tipo de aplicativo será usado? para criar um cliente privado.
• Especifique os escopos separados por um espaço em branco no campo Inserir os escopos do comprador: sfcc.shopper-context.rw sfcc.ts_ext_on_behalf_of

Copie o segredo do cliente gerado automaticamente exibido na parte superior da página de resultados e o ID do cliente para que você possa usá-los na próxima etapa.

Para criar as variáveis de ambiente MRT, chame o endpoint da MRT API projects_target_env_var_partial_update. Substitua $SLAS_PRIVATE_CLIENT_ID e $SLAS_PRIVATE_CLIENT_SECRET pelos valores que você copiou na etapa 1. Substitua $CC_SHORT_CODE pelo valor de configuração de código curto do Business Manager. Você também pode usar o Runtime Admin para gerenciar variáveis de ambiente. Consulte Variáveis de ambiente.

Para usar o Storefront Preview com uma loja (virtual) conectada à sua instância do B2C Commerce, você deve ter uma destas funções de usuário do Account Manager: Business Manager Administrador ou Usuário Business Manager. Para verificar se você tem uma dessas funções, verifique suas funções no Account Manager.

Se você não tiver nenhuma das funções necessárias, siga estas instruções de Concessão de permissões para adicionar instâncias ao seu usuário do Account Manager.

Para que a comunicação entre o Runtime Admin e sua loja funcione, estabeleça um canal de comunicação. Isso envolve duas etapas:

• Para habilitar a comunicação, renderize o componente StorefrontPreview pelo PWA Kit React SDK em sua loja (virtual). O componente StorefrontPreview injeta um script para estabelecer comunicação com o Runtime Admin. Esse script não afeta o desempenho de sua loja (virtual), pois ele é carregado somente quando a loja (virtual) está em execução no Storefront Preview.
• Onde quer que você renderize StorefrontPreview, você deve definir a propriedade getToken, que deve retornar o token de acesso do comprador atual.

Opcionalmente, se quiser integrar o Storefront Preview a um CMS de terceiros, você pode adicionar a propriedade onContextChange ao componente StorefrontPreview. Consulte Integração com um CMS de terceiros. Nos exemplos abaixo, adicionamos a propriedade onContextChange e passamos uma função assíncrona para ela chamada handleContextChange. Você pode substituir a instrução console.log na função handleContextChange por sua própria lógica para responder a alterações de contexto. Personalize a handleContextChange função com base seus requisitos específicos. O parâmetro newContext na função conterá as informações de contexto atualizadas.

Se você tiver PWA Kit versão 2.8.x, use o código a seguir em sua loja (virtual) para estabelecer um canal de comunicação. Adicione o StorefrontPreview componente ao redor de seu componente IntlProvider no arquivo_app/index.jsx.

Se você tiver PWA Kit versão 3.2.x, use o código a seguir em sua loja (virtual) para estabelecer um canal de comunicação. Adicione o componente StorefrontPreview ao redor de seu componente IntlProvider no arquivo_app/index.jsx.

Para habilitar o canal de comunicação, sua loja (virtual) deve:

• Permitir-se ser incorporada em um iframe pelo Runtime Admin (runtime.commercecloud.com) e
• Permitir que o script mencionado na etapa 4 seja carregado e executado.

Habilite o canal de comunicação adicionando https://runtime.commercecloud.com à sua Política de Segurança de Conteúdo (CSP) as diretivas frame-ancestors connect-src e script-src. Para que isso seja tratado automaticamente, importe e use o middleware defaultPwaKitSecurityHeaders fornecido pelo pacote pwa-kit-runtime.

Se você já adicionou o componente StorefrontPreview à sua loja (virtual) e agora deseja fazer a integração com um CMS de terceiros, adicione a propriedade onContextChange ao componente StorefrontPreview. Consulte Integração com um CMS de terceiros.

Nos exemplos abaixo, adicionamos a propriedade onContextChange e uma função assíncrona chamada handleContextChange. Você pode substituir a instrução console.log handleContextChange na função por sua própria lógica para responder a alterações de contexto. Personalize a função handleContextChange com base em seus requisitos específicos. O parâmetro newContext na função conterá as informações de contexto atualizadas.

Se você tiver o PWA Kit versão 2.8.x, use o código a seguir para adicionar a propriedade onContextChange ao arquivo _app/index.jsx.

Se você tiver o PWA Kit versão 3.2.x, use o código a seguir: adicione a propriedade onContextChange ao arquivo_app/index.jsx.

Siga estas etapas para usar o Storefront Preview:

1. Abra o Runtime Admin em seu navegador e faça login usando suas credenciais do Account Manager.

2. Navegue até a página de ambientes do projeto e clique em Visualizar site ao lado do ambiente no qual você deseja visualizar seu site.

   Uma nova guia é aberta mostrando a loja (virtual), com o formulário do Storefront Preview na barra lateral esquerda.

3. (Opcional) Escolha a data e a hora efetivas para que o contexto seja visualizado. A data e a hora exibidas são baseadas no fuso horário do computador e, em seguida, convertidas para a hora UTC antes de enviar a solicitação que define o contexto. Se você não especificar uma data e hora, a visualização refletirá a data e a hora atuais.

4. (Opcional) Insira o código-fonte que aciona a promoção (atribuição de campanha) e as listas de preços (atribuídas ao grupo de códigos-fonte) para o contexto que você deseja visualizar.

5. (Opcional) Insira os ids de grupos de clientes configurados no Business Manager. Separe cada ID usando uma vírgula.

6. (Opcional) Insira os qualificadores personalizados que se aplicam aos preços, produtos ou promoções personalizados configurados no Business Manager. As chaves de qualificador personalizado devem ser exclusivas. Você pode definir até 20 qualificadores personalizados.

7. Clique em Visualizar.

   Agora você pode navegar pela loja (virtual) usando o contexto que deseja visualizar.

   Para facilitar o compartilhamento, o URL na guia do navegador é atualizado para incluir os valores de contexto.

Se você tiver problemas com o Storefront Preview, poderá habilitar os logs do Storefront Preview em seu ambiente MRT. Isso imprime logs extras quando você clica no botão Visualizar para lhe ajudar a depurar os problemas.

Para habilitar os logs do Storefront Preview, adicione a variável de ambiente STOREFRONT_PREVIEW_DEBUG=1 MRT ao seu ambiente MRT.

Você pode usar o monitoramento de logs em tempo real (tail logs) do MRT para ler os logs do Storefront Preview.

Esta seção fornece sugestões de solução para erros comuns que você pode encontrar ao usar o Storefront Preview.

Dependendo do seu navegador, você pode encontrar um comportamento diferente quando os cookies de terceiros não estão ativados.

• Chrome: Um modal aparece informando "A visualização não está habilitada nesta loja (virtual)", e a loja (virtual) exibe um SecurityError.
• Safari: Um modal é exibido informando "Falha ao inicializar o Storefront Preview" e a loja (virtual) não fica visível.

Causa: Seu navegador não permite cookies de terceiros no https://runtime.commercecloud.com.

Solução sugerida: Atualize as configurações do seu navegador e quaisquer extensões que você possa usar para permitir cookies de terceiros no https://runtime.commercecloud.com.

Mensagem de erro ao carregar o Storefront Preview: "Preview is not enabled on this storefront!"

Causa: Está faltando na loja (virtual) o arquivo de script que permite a comunicação com o Runtime Admin.

Solução sugerida: Siga as instruções mostradas na janela da mensagem de erro ou conclua as configurações na Etapa 4.

Mensagem de erro de resposta ao clicar no botão Visualizar:

Solução sugerida: Conclua as configurações na Etapa 1 e na Etapa 2.

Dependendo do seu navegador, você pode encontrar um erro quando não tem a Política de Segurança de Conteúdo correta.

• Chrome: Um modal aparece informando "A visualização não está habilitada nesta loja (virtual)", e a loja (virtual) mostra uma página de erro informando "recusou-se a se conectar".
• Safari: É exibido um modal informando "A visualização não está habilitada nesta loja (virtual)" e a loja (virtual) não fica visível.

Causa: Sua loja (virtual) não permite o Runtime Admin em sua Política de Segurança de Conteúdo.

Solução sugerida: Siga as instruções na Etapa 5 para configurar corretamente sua Política de Segurança de Conteúdo.

A página inicial carregada pelo Storefront Preview é o domínio configurado como o Nome de host externo para o ambiente.

Causa: O Nome de host externo não está configurado corretamente nas configurações do seu ambiente.

Solução sugerida: Configure o Nome de host externo na seção Avançado das configurações do seu ambiente para apontar para o domínio correto.

Mensagem de erro de resposta vista ao clicar no botão Visualizar :

Solução sugerida: Conclua a Etapa 3.

Mensagem de erro de resposta vista ao clicar no botão Visualizar :

Causa: Valores incorretos nas variáveis de ambiente MRT SLAS_PRIVATE_CLIENT_ID e SLAS_PRIVATE_CLIENT_SECRET ou configuração errada de cliente privado SLAS.

Solução sugerida: Conclua as Etapas 1 e 2.

Ao visualizar seu site depois de adicionar a propriedade onContextChange ao componenteStorefrontPreview, você pode receber mensagens de erro ou resultados inesperados.

Causa: Pode haver um problema com a função chamada pela propriedade onContextChange.

Solução sugerida: Remova a propriedade onContextChange e a função que ele chama do componente StorefrontPreview. Em seguida, visualize seu site e veja se os mesmos problemas ocorrem. Se não ocorrerem, faça a depuração da sua função para resolver quaisquer erros. Por exemplo, você pode:

• Adicionar a propriedade onContextChange e a função que ela chama de volta ao componente StorefrontPreview. Consulte Integrar com um CMS de terceiros.
• Inspecione a atividade da rede enquanto visualiza seu site e veja se a solicitação de busca está enviando os dados esperados.

Se você ainda tiver problemas depois de remover a propriedade onContextChange e a função que ela chama, abra um caso de suporte.

Durante a visualização do seu site, o conteúdo não é exibido como esperado e não ocorre nenhum dos erros acima. Por exemplo, os preços não mudam com base nos valores inseridos no Storefront Preview.

Causa: É possível que você não tenha concluído um ou mais dos pré-requisitos.

Solução sugerida: Confirme que você concluiu todos os pré-requisitos. Se você concluiu e ainda encontra problemas, abra um caso de suporte.