Configurar uma página do Page Designer

Brandon está ansioso para ver o escopo do editor visual do Page Designer, que está no Business Manager, a ferramenta de configuração e gerenciamento do Salesforce B2C Commerce.

Neste módulo, pressupomos que você é um anunciante de B2C Commerce com as devidas permissões para executar essas tarefas. Se você não for um anunciante de B2C, tudo bem. Continue lendo para saber como seu anunciante executaria essas etapas em uma instância de preparação. Não tente seguir as etapas no seu Trailhead Playground, pois o B2C Commerce não está disponível no Trailhead Playground.

Se você tem uma instância de preparação do B2C Commerce, pode experimentar essas etapas em sua instância. Se você não tem uma instância de preparação, pergunte ao seu gerente se existe alguma que você possa usar.

Brandon usa os tipos de página e componentes que vêm com a Storefront Reference Architecture (SFRA) para criar uma página com dois componentes: um banner e um carrossel.

Veja como ele cria e configura sua página.

1. Abra o Business Manager.
2. Selecione seu site ou, se você estiver revisando o que vem no código de referência, selecione RefArch.
3. Clique em Ferramentas de comerciante > Conteúdo > Page Designer.  Você vê a página de destino do Page Designer com uma lista das páginas criadas.
4. Clique em Novo. 
5. Selecione um tipo de página: Página de detalhes do produto
   Se o desenvolvedor criou tipos personalizados de páginas e componentes, você verá outros tipos de página.
6. Clique em Avançar.
7. Atribua uma ou mais categorias à página e clique em Avançar.
8. Atribua um ou mais produtos à página e clique em Avançar.
9. Selecione o idioma da página: padrão (já selecionado).
10. Insira um nome: Página inicial da Cloud Kicks. O Page Designer cria o ID à medida que você digita o nome.
11. Insira uma descrição opcional: Cloud Kicks Homepage (Página inicial da Cloud Kicks)
12. Clique em Avançar.
13. Clique em Salvar e criar.

Agora que Brandon criou sua página, ele pode definir as configurações gerais.

1. Clique no ícone Configurações da página.
2. O diálogo Configurações da página é aberto.
   
3. Clique na guia Localização e selecione para a página ficar visível para essa localidade. A localidade é padrão. Você pode usar essa configuração para testar novas localidades. Entraremos em mais detalhes sobre as localidades em breve.
   
4. Clique na guia Direcionamento.
   
   • Atribua uma campanha ou promoção e consulte os qualificadores atribuídos.
   • Clique em Atribuir ou Cancelar.
   • Selecione um Grupo de clientes: Maiores compradores
   • Selecione as datas de início e término de exibição. As horas correspondem à hora do navegador do comprador, não à hora da instância da loja.
5. Clique na guia SEO. É assim que você pode garantir que os mecanismos de busca externos encontrarão suas novas páginas incríveis. Configure páginas para otimização do mecanismo de pesquisa (SEO) especificando o endereço da página (URL), o título da página, a descrição da página e até 10 palavras-chave de metadados.
   
6. Clique na guia Atribuições para editar e exibir atribuições de categoria e produto.
   
7. Clique em Salvar.

Brandon adiciona um componente à sua nova página. À medida que você o acompanha no Business Manager, alguns dos tipos de componentes que você vê podem ser semelhantes aos que seu desenvolvedor criou. Brandon usa os tipos de componentes de exemplo de SFRA por enquanto.

Veja as etapas que ele segue.

1. Abra o Business Manager e o Page Designer.
2. Selecione a Página inicial da Cloud Kicks.
3. Clique no ícone Componentes .
4. Selecione o componente Banner principal e arraste-o para uma região na página.
   
5. No painel direito, configure os atributos.
6. Clique no ícone da pasta e adicione uma imagem.
   
7. Role para baixo e adicione o texto de sobreposição.
   Você pode formatar o texto usando as tags Heading1, Heading2, Heading3, Heading4 e Paragraph. Quando o navegador exibe a página na loja, ele formata o texto especificado pelos estilos nos arquivos CSS.
8. Adicione uma categoria.
   • Clique no sinal de adição ao lado do campo Link da categoria para selecionar uma categoria.
   • Detalhe para encontrar a categoria.
   • Clique no sinal de adição ao lado do que você deseja. A marca de verificação indica sucesso.
9. Clique em Salvar. A nova página é exibida no painel central. Isso é o que aparece na loja.
   

Você pode ver como Brandon está animado para usar esse recurso.

Observe o pequeno círculo no gráfico no painel direito. Você pode mover o círculo para mudar o foco.

A Cloud Kicks está se expandindo internacionalmente, e isso significa alcançar os compradores em seu próprio idioma. O B2C Commerce foi projetado para localização e o Page Designer usa esse recurso. Brandon começa definindo uma hierarquia de fallback no Business Manager. Por exemplo, ele configura essa hierarquia.

fr_CA (French Canadian) > fr (French) > default

É uma prática recomendada criar texto no idioma base e nomeá-lo padrão. Em seguida, quando você cria uma página, o B2C Commerce adiciona uma variante da página ao seu banco de dados para cada localidade na hierarquia de fallback, conforme configurado no Business Manager. Você pode usar essas variantes de página para a localização de componentes em cada localidade.

Brandon cria seu conteúdo em sua língua base, que é inglês, e deixa a localização para os especialistas. Quando ele cria uma página do Page Designer na localidade padrão, o B2C Commerce também cria variantes de página para fr_CA e fr. Ele pode localizar o conteúdo para cada variante de página no nível do componente ou mostrar o conteúdo de um componente de acordo com a hierarquia de fallback.

Até receber o texto e as imagens canadenses locais para um componente na página canadense francesa (fr_CA) de seu tradutor, o B2C Commerce exibe conteúdo francês (fr) nessa página. Se ele não tiver o conteúdo francês (fr), o B2C Commerce mostra automaticamente o conteúdo padrão.

Brandon acha fácil verificar o que está acontecendo com suas localidades no Page Designer enquanto ele dá os próximos passos.

1. Abra o Business Manager e o Page Designer.
2. Selecione a Página inicial da Cloud Kicks.
3. Selecione a localidade fr-CA.
4. Selecione o componente Estrutura de página e o layout de detalhes do produto que você acabou de criar.
   
5. Clique no painel direito para acessar a sobreposição de texto.
6. Mova o mouse sobre cada componente da página. 
   • Uma caixa rosa inclui componentes sem conteúdo localizado e os rotula Fallback, o que significa que o conteúdo é exibido de acordo com a hierarquia de fallback.
   • Uma caixa azul indica componentes localizados.
7. Selecione o componente que você quer localizar.
   • No painel direito, altere o texto ou as imagens.
   • Clique em Salvar. Uma caixa azul inclui o componente localizado

• Ajuda do Salesforce: Criar e gerenciar páginas do Page Designer