Conectar o Salesforce CMS ao Page Designer

Vijay e Brandon estão prontos para colocar o Salesforce CMS em funcionamento com o Page Designer. Então, qual é o plano deles? A parte de Brandon — criar, gerenciar e usar o novo conteúdo incrível — só pode acontecer depois que Vijay executar as seguintes etapas.

1. Conectar-se a uma organização do Salesforce.
2. Abrir o Salesforce CMS.
3. Instalar e configurar o Salesforce CMS.
4. Criar novos componentes do Page Designer para Brandon usar.

Em seguida, Vijay conecta sua instância do B2C Commerce a um canal do Salesforce CMS e atribui o canal à biblioteca de seu site. Lembre-se, uma instância do B2C Commerce é semelhante a uma organização do Salesforce.

Outro conceito importante é o espaço de trabalho do Salesforce CMS. Um espaço de trabalho é como você organiza e protege conteúdo no aplicativo Salesforce CMS.

Embora algumas das etapas a seguir estejam na plataforma principal do Salesforce, esta unidade assume que você é um desenvolvedor do B2C Commerce com as devidas autorizações para executar tarefas do B2C Commerce. Se você não for um desenvolvedor do B2C Commerce, tudo bem. Continue lendo para saber como seu desenvolvedor executaria essas etapas na plataforma principal do Salesforce e em uma instância de sandbox do B2C Commerce. Não tente seguir essas etapas no Trailhead Playground. B2C Commerce, que é o foco deste módulo, não está disponível no Trailhead Playground.

Se você tem uma instância de sandbox do B2C Commerce, pode experimentar essas etapas em sua sandbox. Se você não tiver uma sandbox e for cliente ou desenvolvedor parceiro, pergunte ao seu gerente se existe alguma que possa usar.

Dica

O Page Designer é ativado automaticamente para cada tipo de instância.

Para seguir essas etapas, você precisa de direitos de administrador do site em sua sandbox. Se você não é um administrador do site, pergunte a seu administrador quais credenciais de login usar para se conectar à sandbox.

Veja como conectar uma instância do B2C Commerce a um canal do Salesforce CMS.

1. Abra um pedido de suporte e solicite um relacionamento de confiança entre sua organização do Salesforce e sua instância do B2C Commerce.
2. Abra uma organização do Salesforce.
3. Adicione o aplicativo Salesforce CMS.
4. No Salesforce CMS, clique em Add Workspace (Adicionar espaço de trabalho) para adicionar um espaço de trabalho do CMS para hospedar o conteúdo do Page Designer (ou use um espaço de trabalho existente).
   
   
5. No Salesforce CMS, crie um canal Commerce Cloud.
   • Na guia inicial do CMS, selecione Channels (Canais).
   • Selecione Create Channel (Criar canal).
   • Dê ao canal o nome: Cloud2Cloud_1
   • Selecione o tipo de conexão: Commerce Cloud
     
   • Clique em Create (Criar).
6. No espaço de trabalho do CMS:
   • Clique em Add Channel (Adicionar canal).
     
     
   • Selecione o canal Commerce Cloud que você acabou de criar.
   • Clique em Add (Adicionar).

Agora que Vijay tem o canal do CMS, ele pode adicioná-lo à sua configuração do B2C Commerce no Business Manager.

Veja as etapas a serem seguidas.

1. Abra o Business Manager.
2. Selecione Administração > Sites > Bibliotecas de conteúdo > site > Geral.
3. Role até o final da página.
4. Atribua o canal do CMS à biblioteca do seu site.

O próximo trabalho do Vijay é configurar um novo tipo de componente do Page Designer com um atributo atribuído ao conteúdo do Salesforce CMS. Antes de fazer isso, ele pergunta a Brandon que tipo de conteúdo ele quer usar. A resposta de Brandon determina os atributos do tipo de componente que Vijay cria. Inicialmente, Brandon quer mostrar texto e gráficos (que ele cria no Salesforce CMS) em um banner de título.

O tipo de conteúdo é fundamental. Você deve usar o mesmo tipo de conteúdo no Salesforce CMS e no Page Designer. Então Vijay usa o tipo de conteúdo de notícias para criar e gerenciar seu conteúdo porque ele já existe no Salesforce CMS.

Mais tarde, se o tipo de conteúdo que Brandon quer usar na página do Page Designer não existir no Salesforce CMS, Vijay simplesmente o cria. Por enquanto, Vijay cria um tipo de componente que inclui atributos designados para o tipo cms_record, com o content_type especificado no elemento editor_definition.

Por exemplo, o seguinte arquivo de metadefinição e arquivo de script para o tipo de componente Banner de título do CMS usam o tipo de atributo de conteúdo do título cms_record, com as notícias editor_definition content_type. O banner tem um botão de chamada para a ação. Quando o comprador clica no banner, o B2C Commerce o envia para uma URL.

{
    "name": "CMS Headline Banner",
    "description": "Image, text overlay from CMS that links user to a B2C target using the markup editor",
    "group": "assets",
    "attribute_definition_groups": [{
        "id": "headlineContent",
        "name": "Headline Content",
        "description": "The presentation of the headline",
        "attribute_definitions": [{
            "id": "cmsItem",
            "name": "Headline Content",
            "type": "cms_record",
            "required": true,
            "editor_definition": {
        "content_type": "news"
            }
        }]
    },
    {
            "id": "calltoaction",
            "name": "Call to Action Button",
            "description": "Label and target for the call to action button",
            "attribute_definitions": [{
                 "id": "ctaTitle",
                 "name": "Button Title",
                 "type": "string",
                 "required": true
            },
            {
                 "id": "ctaLink",
                 "name": "Button Link",
                 "type": "url",
                 "required": true
            }
           ]
          }
        ],
        "region_definitions": []
} 

'use strict';
var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');
var ImageTransformation = require('~/cartridge/experience/utilities/ImageTransformation.js');
/**
 * Render logic for the assets.headlinebanner.
 */
module.exports.render = function(context) {
   var model = new HashMap();
   var content = context.content;
   if (content.cmsItem) {
        model.bannerTitle = content.cmsItem.attributes.title;
        model.bannerCopy = content.cmsItem.attributes.body;
        if (content.cmsItem.attributes.bannerImage) {
            model.bannerImg = {
            src: {
                 mobile:
ImageTransformation.url(content.cmsItem.attributes.bannerImage, {
device: 'mobile' }),
                 desktop:
ImageTransformation.url(content.cmsItem.attributes.bannerImage, {
device: 'desktop' })
               },
               alt: content.cmsItem.attributes.excerpt
            };
         }
     }
     model.callToAction = {
         title: content.ctaTitle,
         link: content.ctaLink
     }
     return new
Template('experience/components/assets/headlinebanner').render(model).
text;
} 

Vijay usa o script do Node Package Manager (npm) para garantir que seu JavaScript siga as diretrizes do repositório. Ele insere estes comandos antes de confirmar seu código.

npm install
npm run lint 

Nesta unidade, você aprendeu como conectar sua instância do B2C Commerce a um canal do Salesforce CMS e atribuir o canal à biblioteca do seu site do B2C Commerce. Você também aprendeu como criar um tipo de componente do Page Designer que acessa o conteúdo do Salesforce CMS. Em seguida, você aprenderá a criar novos conteúdos no Salesforce CMS e a usar esses conteúdos em um componente do Page Designer.

• Trailhead: Salesforce B2C Commerce Page Designer para desenvolvedores
• Ajuda do Salesforce: Criar um espaço de trabalho do CMS no Salesforce CMS
• Ajuda do Salesforce: Criar um canal do CMS
• Ajuda do Salesforce: Adicionar um canal a um espaço de trabalho do CMS
• Ajuda do desenvolvedor do Salesforce: criar tipos de conteúdo personalizados para o Salesforce CMS