1.4.2 Implementar Brand Concierge en el sitio web
1.4.2.1 Configurar el sitio web para que muestre Brand Concierge - Autor de AEM
Para que Brand Concierge aparezca en su sitio web, debe crear un nuevo bloque personalizado que debe añadirse a una nueva página, y debe asegurarse de que la nueva página se añada a la navegación de su sitio web.
Ahora debe configurar las siguientes cosas en este orden:
- Cree un nuevo bloque personalizado que se utilizará para cargar Brand Concierge en el sitio web.
- Cree una nueva página en el sitio web para Brand Concierge.
- Vincule el bloque personalizado recién creado en la página de Brand Concierge recién creada.
- Agregue una referencia para navegar a la página de Brand Concierge recién creada en el archivo de encabezado de navegación del sitio web.
Crear nuevo bloque personalizado
Para crear el nuevo bloque personalizado, vaya al repositorio de GitHub vinculado a su sitio web.
component-definition.json
Desplácese hacia abajo hasta que vea el archivo component-definition.json y ábralo
Haga clic en el icono lápiz para comenzar a editar el archivo.
Desplácese hacia abajo hasta que vea Bloques. Coloque el cursor bajo el corchete de cierre del componente Tarjetas
Pegue este código e introduzca una coma , después del bloque de código:
{
"title": "BrandConcierge",
"id": "brandconcierge",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "BrandConcierge",
"model": "brandconcierge"
}
}
}
}
},
Haga clic en Confirmar cambios….
Haga clic en Confirmar cambios.
component-models.json
Desplácese hacia abajo hasta que vea el archivo component-models.json y haga clic en el icono lápiz para empezar a editar el archivo.
Desplácese hacia abajo hasta que vea el último elemento. Coloque el cursor junto al corchete de cierre del último componente.
Escriba una coma , y, a continuación, presione Intro y, en la línea siguiente, pegue este código:
{
"id": "brandconcierge",
"fields": []
}
Haga clic en Confirmar cambios….
Haga clic en Confirmar cambios.
component-filters.json
Desplácese hacia abajo hasta que vea el archivo component-filters.json y haga clic en el icono lápiz para empezar a editar el archivo.
Entonces debería ver esto.
En la sección, escriba una coma , y pegue el identificador del componente "brandconcierge" después de la última línea actual.
Haga clic en Confirmar cambios….
Haga clic en Confirmar cambios.
brandconcierge.css
Al crear un bloque, se recomienda crear un archivo para el estilo del bloque y que tenga el mismo nombre que el bloque. ahora debería crear ese archivo, que dejaremos vacío por ahora.
Vaya a la carpeta blocks. A continuación, haga clic en Agregar archivo y seleccione Crear nuevo archivo.
En el cuadro de texto, escriba brandconcierge/brandconcierge.css. El archivo puede permanecer vacío por ahora. Haga clic en Confirmar cambios….
Haga clic en Confirmar cambios.
brandconcierge.js
Al crear un bloque, se recomienda crear un archivo para el javascript relacionado con el bloque y que tenga el mismo nombre que el bloque.
Haga clic en Agregar archivo y seleccione Crear nuevo archivo.
En el cuadro de texto, escriba brandconcierge.js. El archivo puede permanecer vacío por ahora. Haga clic en Confirmar cambios….
export default function decorate(block) {
block.setAttribute('id', 'brand-concierge-mount');
}
Haga clic en Confirmar cambios.
Crear nueva página y vincular nuevo bloque personalizado
Vaya a https://my.cloudmanager.adobe.com. Haga clic en Programa para abrirlo.
A continuación, haga clic en los 3 puntos … en la ficha Entornos y haga clic en Ver detalles.
A continuación, verá los detalles del entorno. Haga clic en la dirección URL del entorno Author.
Luego debería ver el entorno de AEM Author. Ir a Sitios.
Vaya a CitiSignal. Haga clic en Crear y seleccione Página.
Seleccione Página y haga clic en Siguiente.
Introduzca los siguientes valores:
- Título: Brand Concierge
- Nombre: brandconcierge
- Título de página: Brand Concierge
Haga clic en Crear.
Seleccione Abrir.
Entonces debería ver esto.
Haga clic en el área en blanco para seleccionar el componente section. A continuación, haga clic en el icono más + en el menú derecho.
Debería ver el bloque personalizado en la lista de bloques disponibles. Haga clic en para seleccionarlo.
Debería ver un bloque vacío que se está agregando a esta página. Este bloque se cargará dinámicamente con las bibliotecas de JavaScript que agregará en el siguiente paso.
Haga clic en Publicar.
Vuelva a hacer clic en Publicar.
La nueva página se ha publicado y ahora se puede agregar al encabezado de navegación en el siguiente paso.
Actualizar archivo de encabezado de navegación
En tu descripción general de AEM Sites, ve a CitiSignal y marca la casilla de verificación del archivo Header/nav. Haga clic en Edit.
Seleccione el campo Texto en la pantalla de vista previa y luego haga clic en el campo Texto en el lado derecho de la pantalla para editarlo.
Cree una nueva opción de menú en el menú de navegación con el texto Brand Concierge. A continuación, seleccione el texto Brand Concierge y haga clic en el icono vínculo.
Escriba esto para el campo Ruta de acceso o dirección URL /content/CitiSignal/brandconcierge.html e introduzca Brand Concierge para el campo Título. Haga clic en Guardar.
Entonces deberías tener esto. Haga clic en Finalizado.
Entonces deberías tener esto. Haga clic en Publicar.
Vuelva a hacer clic en Publicar.
La nueva página se agregará al menú.
1.4.2.2 Configuración del sitio web para mostrar Brand Concierge: GitHub
Después de actualizar el contenido con el entorno de AEM Author, debe actualizar parte del código del repositorio de GitHub que se utiliza para el sitio web.
Bibliotecas JavaScript
Se requieren las siguientes bibliotecas para implementar Brand Concierge en el sitio web que se ejecuta en AEM CS/EDS:
Descargue los 3 archivos en su escritorio.
Vaya al proyecto GitHub del sitio web de AEM CS/EDS. Ir a scripts.
Haga clic en Agregar archivo y, a continuación, seleccione Cargar archivos.
Haga clic en Elegir los archivos.
Seleccione los 3 archivos styleConfigurations.js, alloy.js y brandconciergemain.js de su escritorio y haga clic en Abrir.
Haga clic en Confirmar cambios.
Actualizar head.html
En el paso anterior ha cargado 3 bibliotecas nuevas. Estas bibliotecas ahora deben cargarse cuando se cargue el sitio web y la manera de hacerlo es agregar referencias a estos archivos en el archivo head.html.
Además, también debe proporcionar instrucciones en el archivo head.html para asegurarse de que las bibliotecas se cargan en el orden correcto y de manera correcta.
Para ello, vaya al proyecto GitHub de su sitio web de AEM CS/EDS haciendo clic en Código.
Desplácese un poco hacia abajo. Abra el archivo head.html.
Haga clic en el icono lápiz para editar este archivo.
Entonces debería ver esto.
Desplácese hacia abajo hasta la línea 43 y pegue lo siguiente:
Hay 2 campos en el siguiente código que debe actualizar:
- datastreamId está actualmente establecido en "XXXXX" y debe reemplazarse por el ID de la secuencia de datos que creó en el paso anterior.
- orgId debe reemplazarse por el identificador de organización de IMS de su instancia de Adobe Experience Cloud.
<script src="/scripts/styleconfigurations.js"></script>
<script>
!function (n, o) {
o.forEach(function (o) {
n[o] || ((n.__alloyNS = n.__alloyNS ||
[]).push(o), n[o] = function () {
var u = arguments; return new Promise(
function (i, l) { n[o].q.push([i, l, u]) })
}, n[o].q = [])
})
}
(window, ["alloy"]);
</script>
<script src="/scripts/alloy.js"></script>
<script>
alloy("configure", {
defaultConsent: "in",
edgeDomain: "edge.adobedc.net",
edgeBasePath: "ee",
datastreamId: "XXXXX", // replace datastreamId
orgId: "--aepImsOrgId--", // replace ims org Id
debugEnabled: true,
idMigrationEnabled: false,
thirdPartyCookiesEnabled: false,
prehidingStyle: ".personalization-container { opacity: 0 !important }",
});
window["alloy"]("sendEvent", {
conversation: {
fetchConversationalExperience: true
}
}).then(result => {
console.log("Conversation experience fetched", result);
window["alloy"]("bootstrapConversationalExperience", {
selector: "#brand-concierge-mount",
src: "/scripts/brandconciergemain.js",
stylingConfigurations: window.styleConfiguration,
stickySession: true // create a sticky session cookie with expiration
})
});
</script>
Haga clic en Confirmar cambio….
Haga clic en Confirmar cambio.
Ahora ha actualizado el código necesario para cargar las bibliotecas de en el sitio web.
1.4.2.3 Probar la configuración
Ahora podrá probar los cambios en su sitio web yendo a main--citisignal-aem-accs--XXX.aem.page o main--citisignal-aem-accs--XXX.aem.live, después de reemplazar XXX por su cuenta de usuario de GitHub, que en este ejemplo es woutervangeluwe.
En este ejemplo, la dirección URL completa se convierte en lo siguiente:https://main--citisignal-aem-accs--woutervangeluwe.aem.page o https://main--citisignal-aem-accs--woutervangeluwe.aem.live.
Puede llevar algún tiempo antes de que todos los recursos se muestren correctamente, ya que primero deben publicarse.
Entonces debería ver esto. Haga clic en Brand Concierge.
Luego debería ver esta Brand Concierge donde puede introducir su solicitud.
Volver a Brand Concierge