Impossibile visualizzare in anteprima una campagna in Magento PWA Content Staging? Ecco come risolverlo

Pubblicato: 2023-05-24

Stai riscontrando difficoltà nell'anteprima delle campagne in Magento PWA Content Staging? Non preoccuparti, ci pensiamo noi! In questo post del blog, esploreremo il problema comune dell'impossibilità di visualizzare l'anteprima delle campagne e ti forniremo una soluzione dettagliata per risolverlo. Con la nostra guida esperta, sbloccherai tutto il potenziale della messa in scena dei contenuti in Magento PWA e acquisirai la possibilità di visualizzare in anteprima e pianificare senza problemi gli aggiornamenti dei contenuti. Immergiamoci!

Messa in scena dei contenuti di Magento Commerce

Che cos'è la messa in scena dei contenuti?

La messa in scena dei contenuti è una potente funzionalità offerta da Magento Commerce (Adobe) che consente al tuo team aziendale di creare, visualizzare in anteprima e pianificare facilmente un'ampia gamma di aggiornamenti dei contenuti per il tuo negozio online direttamente dall'interfaccia di amministrazione.

Caratteristiche principali di Content Staging

Programmazione flessibile: sfruttando la gestione temporanea dei contenuti, puoi programmare le modifiche ai contenuti del tuo negozio per periodi di tempo specifici. Quando la modifica pianificata scade, il contenuto torna automaticamente alla versione precedente. Ciò garantisce che il tuo sito web rimanga aggiornato e rifletta le modifiche desiderate al momento giusto. Inoltre, puoi creare più versioni del contenuto di base per facilitare gli aggiornamenti futuri e navigare facilmente tra le versioni precedenti.
Gestione della campagna: una "campagna" nella messa in scena dei contenuti si riferisce a un insieme registrato di modifiche pianificate che possono essere visualizzate su un calendario o una sequenza temporale. La Staging Dashboard ti consente di gestire queste campagne in modo efficace, fornendo una panoramica di tutti gli aggiornamenti programmati. Ogni modifica pianificata , nota anche come "Aggiornamento pianificato", si riferisce a una singola modifica all'interno di una campagna.

Come funziona

Stabilire il contenuto della linea di base: il contenuto della linea di base rappresenta lo stato predefinito di una risorsa senza alcuna campagna. Comprende tutto il contenuto sotto la sezione "Modifiche programmate" nella parte superiore della pagina. Il contenuto della linea di base rimane attivo a meno che una campagna in corso con modifiche pianificate non si sovrapponga alla sequenza temporale.
Avvio della prima campagna: crea la tua campagna iniziale specificando le date di inizio e di fine desiderate. Per una campagna a tempo indeterminato, lascia vuota la data di fine. Al termine della prima campagna, il contenuto originale di base viene ripristinato automaticamente.
Aggiunta di campagne successive: è possibile creare campagne aggiuntive, ciascuna assegnata a un periodo di tempo univoco. Tuttavia, assicurati che le campagne per la stessa risorsa non si sovrappongano. Ciò consente di ospitare più campagne come richiesto.
Ripristino del contenuto di base: quando tutte le campagne attive raggiungono la data di fine, il contenuto di base viene ripristinato automaticamente, fornendo una transizione senza soluzione di continuità al termine delle campagne.

Sfruttando la potenza di Magento Commerce Content Staging, ottieni un controllo preciso sugli aggiornamenti dei contenuti, garantendo modifiche tempestive senza interrompere l'esperienza utente complessiva del tuo negozio online.

Limitazioni della messa in scena dei contenuti in Magento PWA

Sfortunatamente, alcuni aspetti del Content Staging in Magento PWA (Progressive Web Application) presentano sfide di compatibilità, che richiedono risoluzioni specifiche.

Un problema comune riscontrato è correlato alla modalità di anteprima della campagna , che può causare errori durante il tentativo di visualizzare in anteprima le modifiche ai contenuti all'interno di una campagna.

In questo articolo, ci occuperemo principalmente della messa in scena del contenuto del prodotto , con la consapevolezza che soluzioni simili possono essere applicate ad altri tipi di contenuto come categorie, regole del prezzo del catalogo, regole del prezzo del carrello, pagine CMS e blocchi CMS.

Come forse saprai, la messa in scena del contenuto nel backend di Magento si basa su un iframe per visualizzare il contenuto di anteprima. La struttura dell'URL di anteprima originale comprende tre elementi essenziali: preview_store, preview_url e preview_version.

Ad esempio, considera il seguente esempio in cui è stata apportata una modifica a un prodotto, risultando nel seguente URL di anteprima:

non è possibile visualizzare in anteprima la modalità di contenuto a stadi

la modalità di anteprima non funziona con pwa

Ripartizione dei componenti dell'URL:

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

Tuttavia, questi URL non funzionano come previsto nello storefront PWA a causa dei seguenti problemi:

Percorso mancante: il tentativo di accedere a "catalogo/prodotto/vista/id/1/" sullo storefront PWA porta a una pagina 404 Not Found poiché non esiste un percorso definito per questo URL specifico.
Sfide di recupero dei dati: il processo di recupero dei dati nello storefront PWA si basa su query GraphQl. Sfortunatamente, in questo scenario, i dati necessari non sono disponibili per l'interrogazione.
Requisito della chiave di autorizzazione: per accedere ai dati del prodotto tramite l'API GraphQl, è obbligatoria una chiave di autorizzazione. Questa chiave serve sia per scopi di autenticazione che di autorizzazione, consentendo il recupero delle informazioni sul prodotto desiderato.
Recupero dati incoerente: attualmente, durante il recupero dei dati tramite l'API, vengono restituiti dati reali anziché dati di staging. Per acquisire i dati di staging, è essenziale specificare la versione di anteprima desiderata all'interno della richiesta API.

Affrontare questi problemi aprirà la strada a una perfetta integrazione di Content Staging in Magento PWA, garantendo esperienze di anteprima coerenti e consentendo una gestione efficace dei contenuti per vari tipi di contenuti all'interno del tuo negozio.

Come risolvere l'errore della modalità di anteprima della campagna

Ecco i passaggi che puoi eseguire per risolvere questo problema:

Passaggio 1: gestisci l'URL di anteprima

Crea un plug-in che consenta la personalizzazione dell'URL di anteprima:

 <type name="Magento\Staging\Model\Preview\UrlBuilder"> <plugin name="url_builder" type="Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview\UrlBuilder" /> </type>

Puoi utilizzare la funzione di generazione del token di Magento, che genera un token utilizzando l'utente admin per includere il parametro della chiave di autorizzazione dell'amministratore nell'URL. Ciò garantisce la corretta autenticazione e autorizzazione per l'anteprima del contenuto:

 <?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); } }

Per evitare conflitti con le query esistenti, crea una nuova query GraphQL in Magento appositamente per gestire la funzionalità di anteprima:

 type Query { product ( preview_version: String authorization: String ): Product @doc(description: "The Product object") }

Passaggio 2: personalizza la vetrina PWA

Aggiungi un nuovo percorso per la pagina di anteprima nella tua vetrina PWA:

 route.push({ name: 'ProductPreview', pattern: '/catalog/product/view/id/:id/preview_version/:preview_version/authorization/:authorization', path: 'src/components/ProductPreview' });

Per il componente Anteprima prodotto, puoi creare un componente di dettaglio del prodotto simile facendo riferimento al componente Venia.

Dobbiamo utilizzare una nuova query GraphQl per ottenere i dati di staging.

 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 };

Per recuperare i dati di staging anziché i dati del prodotto corrente in una normale query GraphQL del prodotto, procedi nel seguente modo:

Verifica il modulo Magento_StagingGraphQl: assicurati che il modulo Magento_StagingGraphQl sia installato e configurato correttamente nella tua istanza Magento. Questo modulo fornisce il supporto per l'accesso ai dati di gestione temporanea utilizzando la versione di anteprima.
Includere la chiave di autorizzazione e la versione di anteprima nell'intestazione della richiesta: anziché utilizzare i parametri della query, la versione di anteprima deve essere ottenuta dall'intestazione della richiesta. Includere sia la chiave di autorizzazione dell'amministratore che la versione di anteprima nell'intestazione della richiesta quando si effettua la chiamata API GraphQL.
Imposta la chiave di autorizzazione nell'intestazione della richiesta: aggiungi la chiave di autorizzazione dell'amministratore all'intestazione della richiesta come token di autorizzazione. Ciò garantisce la corretta autenticazione e autorizzazione per l'accesso ai dati di staging.
Imposta la versione di anteprima nell'intestazione della richiesta: includi la versione di anteprima nell'intestazione della richiesta utilizzando la chiave e il valore dell'intestazione appropriati. Questo indica a Magento di recuperare i dati di staging corrispondenti per la versione di anteprima specificata.

Includendo la chiave di autorizzazione e la versione di anteprima nell'intestazione della richiesta, la chiamata API GraphQL recupererà i dati di gestione temporanea desiderati invece dei dati di prodotto correnti.

Passaggio 3: personalizza l'anteprima di GraphQl

Devi aggiungere una nuova query in supportedQuery nel file 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>

Infine, aggiorna il file useAdapter.js nella directory @magento/peregrine/lib/talons/Adapter con il codice fornito:

 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 } }; }), [] );

Questo codice aggiunge una condizione per verificare se il nome dell'operazione è 'getProductDetailForPreviewProductPage'. Se la condizione è soddisfatta e le variabili richieste (anteprima_versione e autorizzazione) sono presenti, le intestazioni vengono aggiornate di conseguenza.

Dopo aver apportato queste modifiche al codice, ricostruisci la tua PWA per incorporare gli aggiornamenti.

Ora puoi applicare questa soluzione per aggiornare altri contenuti di staging nella tua PWA includendo le intestazioni necessarie nelle richieste GraphQL.

come correggere l'errore di anteprima in magento pwa

Messa in scena del contenuto pwa magento

Parole finali

L'impossibilità di visualizzare in anteprima le campagne in Content Staging può essere un ostacolo frustrante durante la gestione degli store Adobe Commerce PWA. Tuttavia, grazie alle conoscenze e alle soluzioni fornite in questo post del blog, ora hai gli strumenti per superare questo problema e sfruttare tutto il potenziale della messa in scena dei contenuti.

Seguendo le istruzioni dettagliate, puoi personalizzare l'URL di anteprima, personalizzare la tua vetrina PWA e garantire il recupero dei dati di gestione temporanea per un'esperienza di anteprima senza problemi. Con la possibilità di visualizzare in anteprima e pianificare con precisione gli aggiornamenti dei contenuti, puoi migliorare con sicurezza l'esperienza utente del tuo negozio online e favorire le conversioni.

Post correlati:

Quanto tempo ci vuole per costruire una PWA Magento?

Come scegliere il tema PWA giusto per Magento 2

Le 7 fasi del ciclo di vita dello sviluppo di Magento PWA

Tendenze di sviluppo di Magento PWA da delineare in futuro