Vista previa del escaparate

Puede usar la vista previa del escaparate para ver cómo se verá el sitio del kit de Progressive Web App (PWA) en función del contexto, como el código fuente especificado, los grupos de clientes o una fecha u hora en particular. Por ejemplo, si desea obtener una vista previa de cómo se verá su sitio durante una próxima venta, puede usar esta función.

¿Se acercan las rebajas del Black Friday/Cyber Monday? Obtenga una vista previa de los cambios del sitio en un entorno de ensayo. Luego, asegúrese de que los cambios en cosas como productos, precios y estrategias de marketing funcionen de la manera esperada antes de implementar sus cambios en producción.

Además, puede integrar Storefront Preview con un sistema de administración de contenido (CMS) de terceros. Supongamos, por ejemplo, que tienes un banner de ofertas navideñas gestionado por tu CMS. Puede permitir que su CMS reconozca el contexto actual, como la fecha y hora de entrada en vigencia, para que la vista previa de su sitio muestre el contenido correcto, como el banner de ofertas navideñas para el período de tiempo especificado.

La vista previa del escaparate está disponible en el administrador del tiempo de ejecución. En esta guía se explica cómo configurar, usar y solucionar problemas de Vista previa del escaparate.

En este video se muestra un ejemplo de cómo obtener una vista previa de su storefront.

Vista previa del storefront en un sitio de PWA Kit

Para usar la vista previa del storefront, primero:

Cree su sitio con la versión 2.8.4 o posterior de PWA Kit o la versión 3.6.0 o posterior. Storefront Preview no está disponible en versiones de PWA Kit anteriores a 2.8.4 o 3.2.x. Actualice su proyecto para usar PWA Kit 2.8.4 o 3.6.0 dependiendo de su versión principal actual.

• Tener acceso al proyecto en Runtime Admin en cualquier rol que no sea de solo lectura. Si no tiene acceso, pida a alguien con un rol de administrador de Managed Runtime (MRT) que le ayude con eso.
• Habilite el contexto del comprador en Business Manager.
• Configure su sitio en función de la funcionalidad que desea validar en la vista previa del escaparate. Ejemplos
  • Configure calificadores personalizados e identificaciones de grupos de clientes utilizando grupos de clientes en Business Manager para aplicar reglas para precios, productos o promociones personalizados.
  • Para ver una experiencia personalizada del comprador, configure el código fuente que llama a los puntos de conexión de contexto del comprador. Esto es obligatorio porque la vista previa del escaparate usa información de contexto para la personalización.
  • Configure los precios que desea ofrecer en una fecha determinada. De esta manera, la determinación de precios especificada aparece cuando selecciona esa fecha en la vista previa del escaparate.
• Siga los pasos de configuración descritos en la sección Configurar la vista previa del escaparate.
• Configure su navegador para permitir las cookies de terceros en https://runtime.commercecloud.com.

Opcionalmente, puede escribir una función si desea integrar Storefront Preview con un CMS de terceros. Consulte Agregar el componente StorefrontPreview a su escaparate e Integrar con un CMSde terceros.

Puede usar la vista previa del escaparate con las versiones más recientes de Chrome o Safari. Su navegador debe permitir https://runtime.commercecloud.com el acceso a cookies de terceros. La vista previa del escaparate no funcionará si no habilita las cookies de terceros.

• Los datos y las experiencias que se muestran en la vista previa del escaparate no reflejan necesariamente la experiencia del comprador. La personalización del comprador requiere el uso de la Shopper Context API dentro de su proyecto de PWA Kit. Obtén más información sobre el contexto del comprador.
• La vista previa de Storefront funciona en las páginas de PWA Kit y no en las páginas de Storefront Reference Architecture (SFRA). Sin embargo, puede usar la herramienta de vista previa del sitio de Storefront Toolkit en B2C Commerce para obtener una vista previa de las páginas de SFRA.

Siga estos pasos de configuración únicos requeridos para cada sitio que use la vista previa del escaparate:

• 1. Cree un cliente privado de SLAS para sus instancias de B2C Commerce
• 2. Cree variables de entorno de MRT con los detalles del cliente privado de SLAS y el código abreviado de la API de Commerce
• 3. Confirme que su usuario de Account Manager tenga acceso a la instancia de B2C Commerce
• 4. Agregue el componente StorefrontPreview a su escaparate
• 5. Actualizar los encabezados de la política de seguridad de contenido del escaparate

Debe crear un cliente privado de Shopper Login and API Access Service (SLAS) con los alcances sfcc.shopper-context.rw y sfcc.ts_ext_on_behalf_of para las instancias de B2C Commerce usadas por su escaparate. La vista previa del escaparate usa el cliente privado SLAS para establecer el contexto en el escaparate. El cliente privado de SLAS se puede crear fácilmente mediante la interfaz de usuario de administración de SLAS.

Siga los pasos de la guía Autorización para API de compradores para crear un cliente privado de SLAS para cada instancia de B2C Commerce en la que desee usar la vista previa del escaparate:

• Seleccione el tipo de aplicación BFF o Web App en el campo ¿Qué tipo de aplicación se utilizará? para crear un cliente privado.
• Especifique los alcances separados por un espacio en blanco en el campo Ingrese los alcances del comprador: sfcc.shopper-context.rw sfcc.ts_ext_on_behalf_of

Copie el secreto de cliente generado automáticamente que se muestra en la parte superior de la página de resultados y el identificador de cliente para poder usarlos en el siguiente paso.

Para crear las variables de entorno de MRT, llame al punto de conexión de la API de MRT projects_target_env_var_partial_update. Reemplace $SLAS_PRIVATE_CLIENT_ID y $SLAS_PRIVATE_CLIENT_SECRET con los valores que copió en el paso 1. Reemplácelo $CC_SHORT_CODE con el valor configuración de código corto de de Business Manager. También puede usar Runtime Admin para administrar variables de entorno. Consulte Variables de entorno.

1curl "https://cloud.mobify.com/api/projects/$PROJECT/target/$ENVIRONMENT/env-var/" \
2--request 'PATCH' \
3--header 'Content-Type: application/json' \
4--header 'Accept: application/json' \
5--header "Authorization: Bearer $MOBIFY_API_KEY" \
6--data "{
7    \"CC_SHORT_CODE\": {\"value\": \"$CC_SHORT_CODE\"},
8    \"SLAS_PRIVATE_CLIENT_ID\": {\"value\": \"$SLAS_PRIVATE_CLIENT_ID\"},
9    \"SLAS_PRIVATE_CLIENT_SECRET\": {\"value\": \"$SLAS_PRIVATE_CLIENT_SECRET\"}
10}"

Para usar la vista previa del escaparate con un escaparate conectado a su instancia de B2C Commerce, debe tener uno de estos roles de usuario de Account Manager: Administrador de Business Manager o usuario de Business Manager. Para verificar si tiene uno de estos roles, verifique sus roles en Account Manager.

Si no tiene ninguno de los roles requeridos, siga estas instrucciones para otorgar permisos para agregar instancias a su usuario de Account Manager.

escaparatePara que la comunicación entre Runtime Admin y su escaparate funcione, establezca un canal de comunicación. Esto implica dos pasos:

• Para habilitar la comunicación, renderiza el StorefrontPreview componente desde el SDK de React de PWA Kit en tu escaparate. El StorefrontPreview componente inyecta un script para establecer comunicación con el administrador de tiempo de ejecución. Este script no afecta el rendimiento del escaparate porque se carga solo cuando el escaparate se está ejecutando en la vista previa del storefront.
• Dondequiera que renderices StorefrontPreview, debes definir la getToken prop, que debe devolver el token de acceso del comprador actual.

Opcionalmente, si desea integrar Storefront Preview con un CMS de terceros, puede agregar el onContextChange accesorio al StorefrontPreview componente. Tenga en cuenta que onContextChange solo está disponible en la versión 3.6.x o posterior del PWA Kit. Consulte Integración con un CMSde terceros. En los siguientes ejemplos, añadimos el onContextChange prop y le pasamos una función asíncrona llamada handleContextChange. Puede reemplazar la console.log instrucción de la handleContextChange función con su propia lógica para responder a los cambios de contexto. Personalice la handleContextChange función en función de sus requisitos específicos. El newContext parámetro de la función contendrá la información de contexto actualizada.

escaparateSi tienes la versión 2.8.x de PWA Kit, usa el siguiente código en tu escaparate para establecer un canal de comunicación. Agregue el StorefrontPreview componente alrededor de su IntlProvider componente en el _app/index.jsx archivo.

1// app/component/_app/index.jsx
2import StorefrontPreview from 'pwa-kit-react-sdk/storefront-preview'
3
4const App = () => {
5  // Optionally, include an asynchronous function such as handleContextChange to integrate with a third-party CMS.
6  const handleContextChange = async (newContext) => {
7    console.log('Context changed:', newContext)
8  }
9
10  return (
11    <Box className="sf-app" {...styles.container}>
12      <StorefrontPreview
13        getToken={() => window.localStorage.getItem('token')}
14      >
15        <IntlProvider>
16          <CurrencyProvider currency={currency}>...</CurrencyProvider>
17        </IntlProvider>
18      </StorefrontPreview>
19    </Box>
20  )
21}
22
23export default App

Si tienes la versión 3.2.x de PWA Kit, usa el siguiente código en tu escaparate para establecer un canal de comunicación. Agregue el StorefrontPreview componente alrededor de su IntlProvider componente en el _app/index.jsx archivo.

1// app/component/_app/index.jsx
2import {StorefrontPreview} from '@salesforce/commerce-sdk-react/components'
3
4const App = () => {
5  const {getTokenWhenReady} = useAccessToken()
6  // Optionally, include an asynchronous function such as handleContextChange to integrate with a third-party CMS.
7  const handleContextChange = async (newContext) => {
8    console.log('Context changed:', newContext)
9  }
10
11  return (
12    <Box className="sf-app" {...styles.container}>
13      <StorefrontPreview
14        getToken={getTokenWhenReady}
15        //Pass the optional handleContextChange function to the onContextChange prop.
16        onContextChange={handleContextChange}
17      >
18        <IntlProvider>
19          <CurrencyProvider currency={currency}>...</CurrencyProvider>
20        </IntlProvider>
21      </StorefrontPreview>
22    </Box>
23  )
24}
25
26export default App

Para habilitar el canal de comunicación, tu escaparate debe:

• Permitir que el administrador de tiempo de ejecución (runtime.commercecloud.com) lo incruste en un iframe, y
• Permita que se cargue y ejecute el script mencionado en el paso 4.

Habilite el canal de comunicación agregando https://runtime.commercecloud.com a su directiva de seguridad de contenido (CSP) frame-ancestors, script-src y directivas connect-src. Para que esto se gestione automáticamente, importe y utilice el defaultPwaKitSecurityHeaders middleware proporcionado por el pwa-kit-runtime paquete.

1// app/ssr.js
2// Using PWA Kit version 3.6.x
3import {getRuntime} from '@salesforce/pwa-kit-runtime/ssr/server/express'
4import {defaultPwaKitSecurityHeaders} from '@salesforce/pwa-kit-runtime/utils/middleware'
5// Using PWA Kit version 2.8.x
6import {getRuntime} from 'pwa-kit-runtime/ssr/server/express'
7import {defaultPwaKitSecurityHeaders} from 'pwa-kit-runtime/utils/middleware'
8
9const runtime = getRuntime()
10const {handler} = runtime.createHandler(options, (app) => {
11    // Set default HTTP security headers required by PWA Kit / Storefront Preview
12    app.use(defaultPwaKitSecurityHeaders)
13    // ...

Si ya agregó el componente StorefrontPreview a su escaparate y ahora desea integrarlo con un CMS de terceros, agregue el onContextChange accesorio al StorefrontPreview componente. Consulte Integración con un CMSde terceros.

En los siguientes ejemplos, agregamos la onContextChange propiedad y una función asíncrona llamada handleContextChange. Puede reemplazar la console.loginstrucción de la handleContextChange función con su propia lógica para responder a los cambios de contexto. Personalice la handleContextChange función en función de sus requisitos específicos. El newContext parámetro de la función contendrá la información de contexto actualizada.

Si tiene la versión 3.6.x o posterior de PWA Kit, use el siguiente código y agregue la propiedad onContextChange en el _app/index.jsx archivo.

1// app/component/_app/index.jsx
2import {StorefrontPreview} from '@salesforce/commerce-sdk-react/components'
3
4const App = () => {
5  const {getTokenWhenReady} = useAccessToken()
6  // Include an asynchronous function such as handleContextChange to integrate with a third-party CMS.
7  const handleContextChange = async (newContext) => {
8    console.log('Context changed:', newContext)
9  }
10
11  return (
12    <Box className="sf-app" {...styles.container}>
13      <StorefrontPreview
14        getToken={getTokenWhenReady}
15        // Pass the handleContextChange function to the onContextChange prop.
16        onContextChange={handleContextChange}
17      ></StorefrontPreview>
18    </Box>
19  )
20}
21
22export default App

Consulte Ejemplo de uso para ver un video que muestra cómo obtener una vista previa de su storefront.

Siga estos pasos para usar la vista previa del escaparate:

1. Abra Runtime Admin en su navegador e inicie sesión con sus credenciales de Account Manager.

2. Vaya a la página de entornos del proyecto y haga clic en Vista previa del sitio junto al entorno en el que desea obtener una vista previa del sitio.

   Se abre una nueva pestaña que muestra el escaparate, con el formulario Vista previa del escaparate en la barra lateral izquierda.

3. (Opcional) Elija la fecha y hora de entrada en vigencia del contexto para obtener una vista previa. La fecha y la hora que se muestran se basan en la zona horaria del equipo y, a continuación, se convierten a la hora UTC antes de enviar la solicitud que establece el contexto. Si no especifica una fecha y hora, la vista previa refleja la fecha y hora actuales.

4. (Opcional) Ingrese el código fuente que dispara la promoción (asignación de campaña) y los libros de precios (asignados al grupo de código fuente) para el contexto que desea previsualizar.

5. (Opcional) Ingrese las identificaciones de grupo de clientes configuradas en Business Manager. Separe cada identificación con una coma.

6. (Opcional) Ingrese los calificadores personalizados que se aplican a los precios, productos o promociones personalizados configurados en Business Manager. Las claves de calificador personalizadas deben ser únicas. Puede definir hasta 20 calificadores personalizados.

7. Haga clic en Vista previa.

   Ahora puede navegar por el escaparate utilizando el contexto que desea previsualizar.

   Para compartir más fácilmente, la URL en la pestaña del navegador se actualiza para incluir los valores de contexto.

Si experimenta algún problema con la vista previa del escaparate, puede habilitar los registros de la vista previa del storefront en el entorno de MRT. Esto imprime registros adicionales al hacer clic en el botón Vista previa para ayudarle a depurar los problemas.

Para habilitar los registros de la vista previa del escaparate, agregue la variable de entorno MRT STOREFRONT_PREVIEW_DEBUG=1 al entorno MRT.

Puede usar registros de cola de MRT para leer los registros de vista previa del escaparate.

En esta sección se proporcionan soluciones sugeridas para errores comunes que puede encontrar al usar la vista previa del escaparate.

Dependiendo de su navegador, puede encontrar un comportamiento diferente cuando las cookies de terceros no están habilitadas.

• Cromo: Aparece un modal que indica “La vista previa no está habilitada en este escaparate” y el storefront muestra un SecurityErrorarchivo .
• Safari: Aparece un modal que indica “No se pudo inicializar la vista previa del escaparate” y el storefront no está visible.

Causa: Su navegador no permite cookies de terceros en https://runtime.commercecloud.com.

Solución sugerida: Actualice la configuración de su navegador y cualquier extensión que pueda utilizar para permitir cookies de terceros en https://runtime.commercecloud.com.

Mensaje de error al cargar la vista previa del escaparate: "Preview is not enabled on this storefront!"

Causa: Al escaparate le falta el archivo de script que permite la comunicación con el administrador de tiempo de ejecución.

Solución sugerida: Siga las instrucciones que se muestran en la ventana de mensaje de error o complete las configuraciones del paso 4.

Mensaje de error de respuesta al hacer clic en el botón Vista previa :

1400 error: Missing required environment variables:
2CC_SHORT_CODE,SLAS_PRIVATE_CLIENT_ID,SLAS_PRIVATE_CLIENT_SECRET

Solución sugerida: Complete las configuraciones en los pasos 1 y 2.

Dependiendo de su navegador, puede encontrar un error cuando no tiene la Política de seguridad de contenido correcta.

• Cromo: Aparece un modal que indica “La vista previa no está habilitada en este escaparate” y el escaparate muestra una página de error que indica “se rechazó conectar”.
• Safari: Aparece un modal que indica “La vista previa no está habilitada en este escaparate” y el storefront no está visible.

Causa: Su escaparate no permite el uso de administrador en tiempo de ejecución en su política de seguridad de contenido.

Solución sugerida: Siga las instrucciones del paso 5 para configurar correctamente la directiva de seguridad de contenido.

La página inicial cargada por la vista previa del escaparate es el dominio configurado como el nombre de host externo para el entorno.

Causa: El nombre de host externo no está configurado correctamente en la configuración de su entorno.

Solución sugerida: Configure el nombre de host externo en la sección Avanzado de la configuración de su entorno para que apunte al dominio correcto.

Mensaje de error de respuesta que se muestra al hacer clic en el botón Vista previa :

1403 error: You don't have access to the shopper's tenant

Solución sugerida: Complete el paso 3.

Mensaje de error de respuesta que se muestra al hacer clic en el botón Vista previa :

1400 error: Failed to get trusted system token, check your SLAS private client

Causa: Valores incorrectos en las variables SLAS_PRIVATE_CLIENT_ID de entorno MRT o SLAS_PRIVATE_CLIENT_SECRET configuración incorrecta del cliente privado SLAS.

Solución sugerida: Complete los pasos 1 y 2.

Al obtener una vista previa del sitio después de agregar el accesorio onContextChange al componente StorefrontPreview, es posible que reciba mensajes de error o resultados inesperados.

Causa: Puede haber un problema con la función llamada por el onContextChange prop.

Solución sugerida: Quite la onContextChange propiedad y la función a la que llama del componente StorefrontPreview. Luego, obtenga una vista previa de su sitio y vea si ocurren los mismos problemas. Si no es así, depure la función para resolver los errores. Por ejemplo, puede hacer lo siguiente:

• Agregue la onContextChange propiedad y la función a la que vuelve a llamar al componente StorefrontPreview. Consulte Integración con un CMSde terceros.
• Inspeccione la actividad de la red mientras obtiene una vista previa de su sitio y vea si la solicitud de recuperación envía los datos esperados.

Si aún tiene problemas después de quitar el onContextChange accesorio y la función a la que llama, abra un caso de soporte.

Al obtener una vista previa de su sitio, el contenido no se muestra como se esperaba y no se produce ninguno de los errores anteriores. Por ejemplo, los precios no cambian en función de los valores que ingresó en la vista previa del escaparate.

Causa: Es posible que no haya completado uno o más de los requisitos previos.

Solución sugerida: Confirme que ha completado todos los requisitos previos. Si lo hiciste y sigues teniendo problemas, abre un caso de soporte.

j

Comenzar

Introducción al storefront componible

Usar el storefront componible en una implementación híbrida

Marco del PWA Kit

Habilidades para garantizar el éxito

Ask the Community

Configúrese

Construya su sitio

Habilite a su equipo de comerciantes

Vista previa del escaparate

Datos y analítica

Prueba, lanzamiento y supervisión

Mantener

Español (México)

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)