¿No se puede obtener una vista previa de una campaña en Magento PWA Content Staging? Aquí está cómo solucionarlo

Publicado: 2023-05-24

¿Tiene dificultades para obtener una vista previa de las campañas en Magento PWA Content Staging? ¡No se preocupe, lo tenemos cubierto! En esta publicación de blog, exploraremos el problema común de no poder obtener una vista previa de las campañas y le brindaremos una solución paso a paso para solucionarlo. Con nuestra guía experta, desbloqueará todo el potencial de la puesta en escena de contenido en Magento PWA y obtendrá la capacidad de obtener una vista previa y programar sin problemas sus actualizaciones de contenido. ¡Vamos a sumergirnos!

Puesta en escena del contenido de Magento Commerce

¿Qué es la puesta en escena del contenido?

La puesta en escena de contenido es una característica poderosa que ofrece Magento Commerce (Adobe) que le permite a su equipo comercial crear, obtener una vista previa y programar sin esfuerzo una amplia gama de actualizaciones de contenido para su tienda en línea directamente desde la interfaz de administración.

Características clave de la puesta en escena de contenido

  1. Programación flexible: al aprovechar la puesta en escena del contenido, puede programar cambios en el contenido de su tienda para períodos de tiempo específicos. Cuando caduca el cambio programado, el contenido vuelve automáticamente a su versión anterior. Esto asegura que su sitio web permanezca actualizado y refleje los cambios deseados en los momentos adecuados. Además, puede crear varias versiones de contenido de referencia para facilitar futuras actualizaciones y navegar fácilmente a través de versiones anteriores.
  2. Gestión de campañas: una "campaña" en la puesta en escena de contenido se refiere a un conjunto registrado de cambios programados que se pueden ver en un calendario o cronograma. El panel de ensayo le permite administrar estas campañas de manera efectiva, brindando una descripción general de todas las actualizaciones programadas. Cada cambio programado , también conocido como "actualización programada", se refiere a una modificación individual dentro de una campaña.

Cómo funciona

  1. Establecimiento del contenido de referencia: el contenido de referencia representa el estado predeterminado de un activo sin ninguna campaña. Abarca todo el contenido debajo de la sección "Cambios programados" en la parte superior de la página. El contenido de referencia permanece activo a menos que una campaña en curso con cambios programados se superponga en la línea de tiempo.
  2. Inicio de la primera campaña: cree su campaña inicial especificando las fechas de inicio y finalización deseadas. Para una campaña abierta, deje la fecha de finalización en blanco. Una vez que concluye la primera campaña, el contenido de referencia original se restaura automáticamente.
  3. Adición de campañas posteriores: puede crear campañas adicionales, cada una asignada a un período de tiempo único. Sin embargo, asegúrese de que las campañas para el mismo activo no se superpongan. Esto le permite acomodar múltiples campañas según sea necesario.
  4. Restauración del contenido de referencia: cuando todas las campañas activas llegan a sus fechas de finalización, el contenido de referencia se restablece automáticamente, lo que proporciona una transición perfecta una vez que concluyen las campañas.

Al aprovechar el poder de Magento Commerce Content Staging, obtiene un control preciso sobre sus actualizaciones de contenido, asegurando cambios oportunos sin interrumpir la experiencia general del usuario de su tienda en línea.

Limitaciones de la puesta en escena del contenido en Magento PWA

Desafortunadamente, ciertos aspectos de la puesta en escena de contenido en Magento PWA (aplicación web progresiva) presentan desafíos de compatibilidad que requieren resoluciones específicas.

Un problema común que se encuentra está relacionado con el modo de vista previa de la campaña , que puede generar errores al intentar obtener una vista previa de los cambios de contenido dentro de una campaña.

En este artículo, abordaremos principalmente la puesta en escena del contenido del producto , con el entendimiento de que se pueden aplicar soluciones similares a otros tipos de contenido, como categorías, reglas de precios de catálogo, reglas de precios de carrito, páginas de CMS y bloques de CMS.

Como sabrá, la puesta en escena del contenido en el backend de Magento se basa en un iframe para mostrar el contenido de vista previa. La estructura de URL de vista previa original abarca tres elementos esenciales: preview_store, preview_url y preview_version.

Por ejemplo, considere el siguiente ejemplo donde se realizó un cambio en un producto, lo que resultó en la siguiente URL de vista previa:

no se puede obtener una vista previa del modo de contenido por etapas
el modo de vista previa no funciona con pwa

Desglose de los componentes de la URL:

  • Vista previa_tienda: th
  • Preview_url: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
  • Vista previa_versión: 1684578000

Sin embargo, estas direcciones URL no funcionan según lo previsto en el escaparate de PWA debido a los siguientes problemas:

mostrar 404 en modo de vista previa pwa
  1. Ruta faltante: Intentar acceder a "catálogo/producto/vista/id/1/" en la tienda de PWA conduce a una página 404 No encontrada ya que no hay una ruta definida para esta URL específica.
  2. Desafíos de recuperación de datos: el proceso de recuperación de datos en el escaparate de PWA se basa en consultas de GraphQl. Desafortunadamente, en este escenario, los datos necesarios no están disponibles para realizar consultas.
  3. Requisito de clave de autorización: para acceder a los datos del producto a través de la API de GraphQl, es obligatoria una clave de autorización. Esta clave sirve tanto para fines de autenticación como de autorización, lo que permite recuperar la información del producto deseado.
  4. Recuperación de datos inconsistentes: en la actualidad, al obtener datos a través de la API, se devuelven datos reales en lugar de datos provisionales. Para adquirir los datos de ensayo, es esencial especificar la versión de vista previa deseada dentro de la solicitud de API.

Abordar estos problemas allanará el camino para una integración perfecta de Content Staging en Magento PWA, asegurando experiencias de vista previa consistentes y permitiendo una gestión de contenido efectiva para varios tipos de contenido en su tienda.

Cómo resolver el error del modo de vista previa de la campaña

Estos son los pasos que puede seguir para resolver este problema:

Paso 1: Manejar la URL de vista previa

  • Cree un complemento que permita la personalización de la URL de vista previa:
 <type name="Magento\Staging\Model\Preview\UrlBuilder"> <plugin name="url_builder" type="Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview\UrlBuilder" /> </type>
  • Puede utilizar la función de generación de tokens de Magento, que genera un token utilizando el usuario administrador para incluir el parámetro de clave de autorización del administrador en la URL. Esto garantiza la autenticación y autorización adecuadas para obtener una vista previa del contenido:
 <?php /* * @author Tigren Solutions <[email protected]> * @copyright Copyright (c) 2023 Tigren Solutions <https://www.tigren.com>. All rights reserved. * @license Open Software License ("OSL") v. 3.0 */ namespace Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview; use Magento\Store\Model\StoreManagerInterface; use Magento\Store\Model\ScopeInterface; use Magento\Framework\App\Config\ScopeConfigInterface; /** * Class UrlBuilder * @package Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview */ class UrlBuilder { const PARAM_AUTHORIZATION = 'authorization'; const PARAM_PREVIEW_VERSION = 'preview_version'; const XML_PATH_AUTHORIZATION_USER = 'pwa/preview/authorization_user'; const XML_PATH_AUTHORIZATION_PASSWORD = 'pwa/preview/authorization_password'; /** * @var StoreManagerInterface */ protected $storeManager; /** * @var ScopeConfigInterface */ protected $scopeConfig; /** * @var \Magento\Integration\Model\AdminTokenService */ protected $adminTokenService; /** * @param StoreManagerInterface $storeManager * @param ScopeConfigInterface $scopeConfig * @param \Magento\Integration\Model\AdminTokenService $adminTokenService */ public function __construct( StoreManagerInterface $storeManager, ScopeConfigInterface $scopeConfig, \Magento\Integration\Model\AdminTokenService $adminTokenService ) { $this->storeManager = $storeManager; $this->scopeConfig = $scopeConfig; $this->adminTokenService = $adminTokenService; } /** * @param \Magento\Staging\Model\Preview\UrlBuilder $subject * @param $versionId * @param $url * @param $store * @return array */ public function beforeGetPreviewUrl( \Magento\Staging\Model\Preview\UrlBuilder $subject, $versionId, $url = null, $store = null ) { try { $token = $this->getTokenAdmin(); $newUrl = $url . self::PARAM_PREVIEW_VERSION . '/' . $versionId . '/' . self::PARAM_AUTHORIZATION . '/' . $token; } catch (\Exception $e) { return [$versionId, $url, $store]; } return [$versionId, $newUrl, $store]; } /** * @return string * @throws \Magento\Framework\Exception\AuthenticationException * @throws \Magento\Framework\Exception\InputException * @throws \Magento\Framework\Exception\LocalizedException */ public function getTokenAdmin() { return $this->adminTokenService->createAdminAccessToken($this->getAuthorizationUser(), $this->getAuthorizationPassWord()); } /** * @return mixed */ public function getAuthorizationUser() { return $this->getConfigData(self::XML_PATH_AUTHORIZATION_USER); } /** * @return mixed */ public function getAuthorizationPassWord() { return $this->getConfigData(self::XML_PATH_AUTHORIZATION_PASSWORD); } /** * @param $path * @return mixed */ public function getConfigData($path) { return $this->scopeConfig->getValue($path, ScopeInterface::SCOPE_STORE); } }
  • Para evitar conflictos con consultas existentes, cree una nueva consulta GraphQL en Magento específicamente para manejar la funcionalidad de vista previa:
 type Query { product ( preview_version: String authorization: String ): Product @doc(description: "The Product object") }

Paso 2: Personaliza el escaparate de la PWA

  • Agregue una nueva ruta para la página de vista previa en su escaparate de PWA:
 route.push({ name: 'ProductPreview', pattern: '/catalog/product/view/id/:id/preview_version/:preview_version/authorization/:authorization', path: 'src/components/ProductPreview' });
  • Para el componente Vista previa del producto, puede crear un componente de detalles del producto similar consultando el componente Venia.
  • Necesitamos usar una nueva consulta GraphQl para obtener los datos de preparación.
 import { gql } from '@apollo/client'; import { ProductDetailsFragment } from '@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js'; export const GET_PRODUCT_DETAIL_QUERY = gql` query getProductDetailForPreviewProductPage( $id: Int! $preview_version: String $authorization: String ) { product( id: $id preview_version: $preview_version authorization: $authorization ) { item { id uid ...ProductDetailsFragment } } } ${ProductDetailsFragment} `; export default { getProductDetailQuery: GET_PRODUCT_DETAIL_QUERY };

Para recuperar datos de preparación en lugar de datos de productos actuales en una consulta GraphQL de productos normal, siga estos pasos:

  1. Verifique el módulo Magento_StagingGraphQl: asegúrese de que el módulo Magento_StagingGraphQl esté instalado y configurado correctamente en su instancia de Magento. Este módulo brinda soporte para acceder a los datos de preparación utilizando la versión preliminar.
  2. Incluya la clave de autorización y la versión de vista previa en el encabezado de la solicitud: en lugar de usar parámetros de consulta, la versión de vista previa debe obtenerse del encabezado de la solicitud. Incluya tanto la clave de autorización del administrador como la versión de vista previa en el encabezado de la solicitud cuando realice la llamada a la API de GraphQL.
  3. Establezca la clave de autorización en el encabezado de la solicitud: agregue la clave de autorización del administrador al encabezado de la solicitud como un token de autorización. Esto garantiza la autenticación y autorización adecuadas para acceder a los datos de ensayo.
  4. Establezca la versión de vista previa en el encabezado de la solicitud: Incluya la versión de vista previa en el encabezado de la solicitud utilizando la clave y el valor de encabezado adecuados. Esto le indica a Magento que recupere los datos de preparación correspondientes para la versión de vista previa especificada.

Al incluir la clave de autorización y la versión de vista previa en el encabezado de la solicitud, la llamada a la API de GraphQL recuperará los datos de preparación deseados en lugar de los datos del producto actual.

Paso 3: Personaliza la vista previa de GraphQl

  • Debe agregar una nueva consulta en supportQueries en el archivo app/code/Tigren/StagingGraphQl/etc/graphql/di.xml
 <?xml version="1.0"?> <!-- ~ @author Tigren Solutions <[email protected]> ~ @copyright Copyright (c) 2023 Tigren Solutions <https://www.tigren.com>. All rights reserved. ~ @license Open Software License ("OSL") v. 3.0 --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\StagingGraphQl\Plugin\Query\PreviewResolver"> <arguments> <argument name="supportedQueries" xsi:type="array"> <item name="product" xsi:type="string">product</item> </argument> </arguments> </type> </config>
  • Por último, actualice el archivo useAdapter.js en el directorio @magento/peregrine/lib/talons/Adapter con el código provisto:
 const authLink = useMemo( () => setContext((_, { headers }) => { // get the authentication token from local storage if it exists. const token = storage.getItem('signin_token'); // return the headers to the context so httpLink can read them return { headers: { ...headers } }; }), [] );const authLink = useMemo( () => setContext((_, { headers }) => { const token = storage.getItem('signin_token'); const operationName = _.operationName; if (operationName === 'getProductDetailForPreviewProductPage') { const variables = _.variables; if (variables.preview_version !== undefined && variables.authorization !== undefined) { const previewVersion = variables.preview_version; const authorization = variables.authorization; return { headers: { ...headers, authorization: 'Bearer ' + authorization, 'preview-version': previewVersion } }; } } return { headers: { ...headers } }; }), [] );

Este código agrega una condición para comprobar si el nombre de la operación es "getProductDetailForPreviewProductPage". Si se cumple la condición y las variables requeridas (preview_version y autorización) están presentes, los encabezados se actualizan en consecuencia.

Después de realizar estos cambios en el código, reconstruya su PWA para incorporar las actualizaciones.

Ahora puede aplicar esta solución para actualizar otro contenido de prueba en su PWA al incluir los encabezados necesarios en las solicitudes de GraphQL.

cómo corregir el error de vista previa en magento pwa
puesta en escena del contenido de magento pwa

Ultimas palabras

La imposibilidad de obtener una vista previa de las campañas en Content Staging puede ser un obstáculo frustrante al administrar las tiendas de Adobe Commerce PWA. Sin embargo, armado con el conocimiento y la solución proporcionados en esta publicación de blog, ahora tiene las herramientas para superar este problema y aprovechar todo el potencial de la puesta en escena del contenido.

Siguiendo las instrucciones paso a paso, puede personalizar la URL de vista previa, personalizar su escaparate de PWA y garantizar la recuperación de datos de prueba para una experiencia de vista previa perfecta. Con la capacidad de previsualizar y programar con precisión sus actualizaciones de contenido, puede mejorar con confianza la experiencia del usuario de su tienda en línea y generar conversiones.

Artículos Relacionados:

¿Cuánto tiempo lleva construir una PWA de Magento?

Cómo elegir el tema PWA adecuado para Magento 2

Las 7 fases del ciclo de vida de desarrollo de Magento PWA

Tendencias de desarrollo de Magento PWA para delinear en el futuro