Não é possível visualizar uma campanha na preparação de conteúdo do Magento PWA? Veja como corrigi-lo

Publicados: 2023-05-24

Você está enfrentando dificuldades para visualizar campanhas no Magento PWA Content Staging? Não se preocupe, nós cuidamos de você! Nesta postagem do blog, exploraremos o problema comum de não conseguir visualizar as campanhas e forneceremos uma solução passo a passo para corrigi-lo. Com nossa orientação especializada, você desbloqueará todo o potencial da preparação de conteúdo no Magento PWA e obterá a capacidade de visualizar e agendar facilmente suas atualizações de conteúdo. Vamos mergulhar!

Estadiamento de conteúdo Magento Commerce

O que é Staging de conteúdo?

A preparação de conteúdo é um recurso poderoso oferecido pelo Magento Commerce (Adobe) que capacita sua equipe de negócios a criar, visualizar e agendar sem esforço uma ampla variedade de atualizações de conteúdo para sua loja online diretamente da interface do administrador.

Principais recursos do Content Staging

  1. Agendamento flexível: ao aproveitar a preparação de conteúdo, você pode agendar alterações no conteúdo de sua loja para períodos de tempo específicos. Quando a alteração agendada expira, o conteúdo volta automaticamente para a versão anterior. Isso garante que seu site permaneça atualizado e reflita as alterações desejadas nos momentos certos. Além disso, você pode criar várias versões de conteúdo básico para facilitar atualizações futuras e navegar facilmente pelas versões anteriores.
  2. Gerenciamento de campanha: uma “Campanha” na preparação de conteúdo refere-se a um conjunto registrado de alterações programadas que podem ser visualizadas em um calendário ou linha do tempo. O Staging Dashboard permite que você gerencie essas campanhas de forma eficaz, fornecendo uma visão geral de todas as atualizações agendadas. Cada alteração programada , também conhecida como “atualização programada”, refere-se a uma modificação individual dentro de uma campanha.

Como funciona

  1. Estabelecendo o conteúdo da linha de base: o conteúdo da linha de base representa o estado padrão de um ativo sem nenhuma campanha. Abrange todo o conteúdo abaixo da seção “Alterações programadas” na parte superior da página. O conteúdo da linha de base permanece ativo, a menos que uma campanha em andamento com alterações programadas se sobreponha na linha do tempo.
  2. Iniciando a primeira campanha: crie sua campanha inicial especificando as datas de início e término desejadas. Para uma campanha aberta, deixe a data final em branco. Depois que a primeira campanha é concluída, o conteúdo da linha de base original é restaurado automaticamente.
  3. Adicionando Campanhas Subseqüentes: Você pode criar campanhas adicionais, cada uma atribuída a um período de tempo exclusivo. No entanto, certifique-se de que as campanhas do mesmo recurso não se sobreponham. Isso permite que você acomode várias campanhas conforme necessário.
  4. Restauração do conteúdo de linha de base: quando todas as campanhas ativas atingem suas datas de término, o conteúdo de linha de base é restabelecido automaticamente, proporcionando uma transição perfeita assim que as campanhas são concluídas.

Ao aproveitar o poder do Magento Commerce Content Staging, você obtém controle preciso sobre suas atualizações de conteúdo, garantindo alterações oportunas sem interromper a experiência geral do usuário em sua loja online.

Limitações da preparação de conteúdo no Magento PWA

Infelizmente, certos aspectos do Content Staging no Magento PWA (Progressive Web Application) apresentam desafios de compatibilidade, exigindo resoluções específicas.

Um problema comum encontrado está relacionado ao modo de visualização da campanha , que pode resultar em erros ao tentar visualizar as alterações de conteúdo em uma campanha.

Neste artigo, abordaremos principalmente a preparação do conteúdo do produto , com o entendimento de que soluções semelhantes podem ser aplicadas a outros tipos de conteúdo, como categorias, regras de preço de catálogo, regras de preço de carrinho, páginas CMS e blocos CMS.

Como você deve saber, a preparação de conteúdo no back-end do Magento depende de um iframe para exibir o conteúdo de visualização. A estrutura de URL de visualização original abrange três elementos essenciais: preview_store, preview_url e preview_version.

Por exemplo, considere o exemplo a seguir em que uma alteração foi feita em um produto, resultando na seguinte URL de visualização:

não é possível visualizar o modo de conteúdo encenado
modo de visualização não funciona com pwa

Detalhamento dos componentes do URL:

  • Preview_store: th
  • Preview_url: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
  • Preview_version: 1684578000

No entanto, essas URLs não funcionam conforme o esperado na vitrine do PWA devido aos seguintes problemas:

mostrar 404 no modo de visualização pwa
  1. Rota ausente: a tentativa de acessar “catalog/product/view/id/1/” na vitrine PWA leva a uma página 404 Not Found, pois não há rota definida para este URL específico.
  2. Desafios de recuperação de dados: o processo de recuperação de dados na vitrine PWA depende de consultas GraphQl. Infelizmente, neste cenário, os dados necessários não estão disponíveis para consulta.
  3. Requisito de chave de autorização: para acessar os dados do produto por meio da API GraphQl, uma chave de autorização é obrigatória. Essa chave serve para fins de autenticação e autorização, permitindo a recuperação das informações do produto desejado.
  4. Recuperação de dados inconsistentes: atualmente, ao buscar dados por meio da API, dados reais são retornados em vez de dados de preparação. Para adquirir os dados de preparação, é essencial especificar a versão de visualização desejada na solicitação da API.

Resolver esses problemas abrirá caminho para uma integração perfeita do Content Staging no Magento PWA, garantindo experiências de visualização consistentes e permitindo o gerenciamento eficaz de conteúdo para vários tipos de conteúdo em sua vitrine.

Como resolver o erro do modo de visualização da campanha

Aqui estão as etapas que você pode seguir para resolver esse problema:

Etapa 1: lidar com o URL de visualização

  • Crie um plug-in que permita a personalização da URL de visualização:
 <type name="Magento\Staging\Model\Preview\UrlBuilder"> <plugin name="url_builder" type="Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview\UrlBuilder" /> </type>
  • Você pode utilizar a função de geração de token do Magento, que gera um token usando o usuário admin para incluir o parâmetro de chave de autorização admin na URL. Isso garante autenticação e autorização adequadas para visualizar o conteúdo:
 <?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 conflitos com consultas existentes, crie uma nova consulta GraphQL no Magento especificamente para lidar com a funcionalidade de visualização:
 type Query { product ( preview_version: String authorization: String ): Product @doc(description: "The Product object") }

Etapa 2: personalizar a vitrine do PWA

  • Adicione uma nova rota para a página de visualização em sua vitrine PWA:
 route.push({ name: 'ProductPreview', pattern: '/catalog/product/view/id/:id/preview_version/:preview_version/authorization/:authorization', path: 'src/components/ProductPreview' });
  • Para o componente Product Preview, você pode criar um componente de detalhe de produto semelhante referindo-se ao componente Venia.
  • Precisamos usar uma nova consulta GraphQl para obter os dados de preparação.
 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 dados de preparação em vez de dados de produto atuais em uma consulta GraphQL de produto normal, siga estas etapas:

  1. Verifique o módulo Magento_StagingGraphQl: Certifique-se de que o módulo Magento_StagingGraphQl esteja instalado e configurado corretamente em sua instância Magento. Este módulo fornece suporte para acessar dados de preparação usando a versão de visualização.
  2. Inclua a chave de autorização e a versão de visualização no cabeçalho da solicitação: em vez de usar parâmetros de consulta, a versão de visualização deve ser obtida no cabeçalho da solicitação. Inclua a chave de autorização do administrador e a versão de visualização no cabeçalho da solicitação ao fazer a chamada da API GraphQL.
  3. Defina a chave de autorização no cabeçalho da solicitação: adicione a chave de autorização admin ao cabeçalho da solicitação como um token de autorização. Isso garante autenticação e autorização adequadas para acessar os dados de preparação.
  4. Defina a versão de visualização no cabeçalho da solicitação: inclua a versão de visualização no cabeçalho da solicitação usando a chave e o valor do cabeçalho apropriados. Isso instrui o Magento a recuperar os dados de teste correspondentes para a versão de visualização especificada.

Ao incluir a chave de autorização e a versão de visualização no cabeçalho da solicitação, a chamada da GraphQL API recuperará os dados de preparação desejados em vez dos dados do produto atual.

Etapa 3: personalizar a visualização do GraphQl

  • Você precisa adicionar uma nova consulta em supportedQueries no arquivo 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 fim, atualize o arquivo useAdapter.js no diretório @magento/peregrine/lib/talons/Adapter com o código fornecido:
 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 adiciona uma condição para verificar se o nome da operação é 'getProductDetailForPreviewProductPage'. Se a condição for atendida e as variáveis ​​necessárias (preview_version e authorization) estiverem presentes, os cabeçalhos serão atualizados de acordo.

Depois de fazer essas alterações de código, reconstrua seu PWA para incorporar as atualizações.

Agora você pode aplicar esta solução para atualizar outro conteúdo de preparação em seu PWA incluindo os cabeçalhos necessários nas solicitações GraphQL.

como corrigir erro de visualização no magento pwa
preparação de conteúdo magento pwa

Palavras Finais

A incapacidade de visualizar campanhas no Content Staging pode ser um obstáculo frustrante ao gerenciar lojas Adobe Commerce PWA. No entanto, munido do conhecimento e da solução fornecidos nesta postagem do blog, você agora tem as ferramentas para superar esse problema e aproveitar todo o potencial da preparação de conteúdo.

Seguindo as instruções passo a passo, você pode personalizar o URL de visualização, personalizar sua vitrine PWA e garantir a recuperação de dados de teste para uma experiência de visualização perfeita. Com a capacidade de visualizar e agendar com precisão suas atualizações de conteúdo, você pode aprimorar com confiança a experiência do usuário de sua loja online e gerar conversões.

Postagens relacionadas:

Quanto tempo leva para criar um Magento PWA?

Como escolher o tema PWA certo para Magento 2

As 7 fases do ciclo de vida de desenvolvimento do Magento PWA

Tendências de desenvolvimento do Magento PWA para delinear no futuro