Nu puteți previzualiza o campanie în Magento PWA Content Staging? Iată cum să o remediați

Publicat: 2023-05-24

Întâmpinați dificultăți la previzualizarea campaniilor în Magento PWA Content Staging? Nu vă faceți griji, vă avem acoperit! În această postare pe blog, vom explora problema comună de a nu putea previzualiza campaniile și vă vom oferi o soluție pas cu pas pentru a o remedia. Cu îndrumarea noastră de experți, veți debloca întregul potențial al punerii în scenă a conținutului în Magento PWA și veți obține capacitatea de a previzualiza și programa fără probleme actualizările de conținut. Să ne scufundăm!

Staging de conținut Magento Commerce

Ce este Content Staging?

Organizarea conținutului este o funcție puternică oferită de Magento Commerce (Adobe) care dă putere echipei dvs. de afaceri să creeze, să previzualizeze și să programeze fără efort o gamă largă de actualizări de conținut pentru magazinul dvs. online direct din interfața de administrare.

Caracteristicile cheie ale Content Staging

  1. Programare flexibilă: prin utilizarea în scenă a conținutului, puteți programa modificări ale conținutului magazinului dvs. pentru anumite perioade de timp. Când modificarea programată expiră, conținutul revine automat la versiunea anterioară. Acest lucru vă asigură că site-ul dvs. rămâne actualizat și reflectă modificările dorite la momentele potrivite. În plus, puteți crea mai multe versiuni ale conținutului de bază pentru a facilita actualizările viitoare și pentru a naviga cu ușurință prin versiunile anterioare.
  2. Gestionarea campaniei: o „Campanie” în punerea în scenă a conținutului se referă la un set înregistrat de modificări programate care pot fi vizualizate pe un calendar sau cronologie. Tabloul de bord Staging vă permite să gestionați eficient aceste campanii, oferind o imagine de ansamblu asupra tuturor actualizărilor programate. Fiecare modificare programată , cunoscută și ca „Actualizare programată”, se referă la o modificare individuală în cadrul unei campanii.

Cum functioneaza

  1. Stabilirea conținutului de referință: conținutul de referință reprezintă starea implicită a unui material fără campanii. Acesta cuprinde tot conținutul de sub secțiunea „Modificări programate” din partea de sus a paginii. Conținutul de referință rămâne activ cu excepția cazului în care o campanie în desfășurare cu modificări programate se suprapune pe cronologie.
  2. Inițierea primei campanii: creați campania inițială specificând datele de început și de încheiere dorite. Pentru o campanie deschisă, lăsați necompletat data de încheiere. Odată ce prima campanie se încheie, conținutul inițial de referință este restaurat automat.
  3. Adăugarea de campanii ulterioare: puteți crea campanii suplimentare, fiecare alocată unei perioade de timp unice. Cu toate acestea, asigurați-vă că campaniile pentru același material nu se suprapun. Acest lucru vă permite să găzduiți mai multe campanii după cum este necesar.
  4. Restaurarea conținutului de bază: când toate campaniile active își ating datele de încheiere, conținutul de bază este restabilit automat, oferind o tranziție fără probleme odată ce campaniile se încheie.

Prin valorificarea puterii Magento Commerce Content Staging, obțineți control precis asupra actualizărilor de conținut, asigurând schimbări în timp util, fără a perturba experiența generală a utilizatorului a magazinului dvs. online.

Limitări ale punerii în scenă a conținutului în Magento PWA

Din păcate, anumite aspecte ale Content Staging în Magento PWA (Progressive Web Application) prezintă provocări de compatibilitate, necesitând rezoluții specifice.

O problemă frecvent întâlnită este legată de modul de previzualizare a campaniei , care poate duce la erori atunci când încercați să previzualizați modificările de conținut dintr-o campanie.

În acest articol, vom aborda în primul rând punerea în scenă a conținutului produsului , înțelegând că soluții similare pot fi aplicate altor tipuri de conținut, cum ar fi categorii, reguli de preț de catalog, reguli de preț pentru coș, pagini CMS și blocuri CMS.

După cum probabil știți, punerea în scenă a conținutului în backend-ul Magento se bazează pe un iframe pentru a afișa conținutul de previzualizare. Structura URL de previzualizare originală cuprinde trei elemente esențiale: preview_store, preview_url și preview_version.

De exemplu, luați în considerare următorul exemplu în care a fost făcută o modificare la un produs, rezultând următoarea adresă URL de previzualizare:

nu poate previzualiza modul conținut în etape
Modul de previzualizare nu funcționează cu pwa

Defalcarea componentelor URL:

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

Cu toate acestea, aceste adrese URL nu funcționează așa cum este prevăzut în vitrina PWA din cauza următoarelor probleme:

arată 404 în modul de previzualizare pwa
  1. Rută lipsă: Încercarea de a accesa „catalog/product/view/id/1/” pe vitrina PWA duce la o pagină 404 Not Found, deoarece nu există o rută definită pentru această adresă URL specifică.
  2. Provocări de recuperare a datelor: Procesul de recuperare a datelor din vitrina PWA se bazează pe interogări GraphQl. Din păcate, în acest scenariu, datele necesare nu sunt disponibile pentru interogare.
  3. Cerință cheie de autorizare: Pentru a accesa datele despre produs prin API-ul GraphQl, este obligatorie o cheie de autorizare. Această cheie servește atât pentru autentificare, cât și pentru autorizare, permițând regăsirea informațiilor despre produs dorite.
  4. Preluare inconsecventă a datelor: în prezent, la preluarea datelor prin intermediul API-ului, datele reale sunt returnate în loc de datele provizorii. Pentru a obține datele de staging, este esențial să specificați versiunea de previzualizare dorită în cadrul solicitării API.

Abordarea acestor probleme va deschide calea pentru integrarea perfectă a Content Staging în Magento PWA, asigurând experiențe de previzualizare coerente și permițând gestionarea eficientă a conținutului pentru diferite tipuri de conținut în vitrina dvs.

Cum se rezolvă eroarea modului de previzualizare a campaniei

Iată pașii pe care îi puteți lua pentru a rezolva această problemă:

Pasul 1: gestionați adresa URL de previzualizare

  • Creați un plugin care permite personalizarea adresei URL de previzualizare:
 <type name="Magento\Staging\Model\Preview\UrlBuilder"> <plugin name="url_builder" type="Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview\UrlBuilder" /> </type>
  • Puteți utiliza funcția de generare a token-ului Magento, care generează un jeton utilizând utilizatorul administrator pentru a include parametrul cheie de autorizare admin în adresa URL. Acest lucru asigură autentificarea și autorizarea corespunzătoare pentru previzualizarea conținutului:
 <?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); } }
  • Pentru a evita conflictele cu interogările existente, creați o nouă interogare GraphQL în Magento special pentru gestionarea funcționalității de previzualizare:
 type Query { product ( preview_version: String authorization: String ): Product @doc(description: "The Product object") }

Pasul 2: personalizați vitrina PWA

  • Adăugați o rută nouă pentru pagina de previzualizare în vitrina dvs. PWA:
 route.push({ name: 'ProductPreview', pattern: '/catalog/product/view/id/:id/preview_version/:preview_version/authorization/:authorization', path: 'src/components/ProductPreview' });
  • Pentru componenta Previzualizare produs, puteți construi o componentă similară cu detalii despre produs, referindu-vă la componenta Venia.
  • Trebuie să folosim o nouă interogare GraphQl pentru a obține datele de 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 };

Pentru a prelua datele de punere în pas în loc de datele curente despre produse într-o interogare GraphQL de produs normală, urmați acești pași:

  1. Verificați modulul Magento_StagingGraphQl: asigurați-vă că modulul Magento_StagingGraphQl este instalat și configurat corect în instanța dvs. Magento. Acest modul oferă suport pentru accesarea datelor de staging folosind versiunea de previzualizare.
  2. Includeți cheia de autorizare și versiunea de previzualizare în antetul solicitării: în loc să utilizați parametrii de interogare, versiunea de previzualizare ar trebui să fie obținută din antetul solicitării. Includeți atât cheia de autorizare a administratorului, cât și versiunea de previzualizare în antetul solicitării atunci când efectuați apelul API GraphQL.
  3. Setați cheia de autorizare în antetul cererii: adăugați cheia de autorizare de administrator la antetul solicitării ca simbol de autorizare. Acest lucru asigură autentificarea și autorizarea corespunzătoare pentru accesarea datelor de staging.
  4. Setați versiunea de previzualizare în antetul cererii: includeți versiunea de previzualizare în antetul solicitării folosind cheia și valoarea de antet corespunzătoare. Acest lucru îi indică Magento să recupereze datele corespunzătoare pentru versiunea de previzualizare specificată.

Prin includerea cheii de autorizare și a versiunii de previzualizare în antetul solicitării, apelul API GraphQL va prelua datele de punere în pas dorite în loc de datele curente ale produsului.

Pasul 3: Personalizați previzualizarea GraphQl

  • Trebuie să adăugați o nouă interogare în interogările suportate în fișierul 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>
  • În cele din urmă, actualizați fișierul useAdapter.js din directorul @magento/peregrine/lib/talons/Adapter cu codul furnizat:
 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 } }; }), [] );

Acest cod adaugă o condiție pentru a verifica dacă numele operației este „getProductDetailForPreviewProductPage”. Dacă condiția este îndeplinită și variabilele necesare (preview_version și autorizare) sunt prezente, anteturile sunt actualizate în consecință.

După ce faceți aceste modificări de cod, reconstruiți-vă PWA pentru a încorpora actualizările.

Acum puteți aplica această soluție pentru a actualiza alt conținut de staging din PWA, incluzând anteturile necesare în solicitările GraphQL.

cum să remediați eroarea de previzualizare în magento pwa
punerea în scenă a conținutului magento pwa

Cuvinte finale

Incapacitatea de a previzualiza campanii în Content Staging poate fi un obstacol frustrant în gestionarea magazinelor Adobe Commerce PWA. Cu toate acestea, înarmat cu cunoștințele și soluția oferite în această postare pe blog, aveți acum instrumentele pentru a depăși această problemă și a valorifica întregul potențial al punerii în scenă a conținutului.

Urmând instrucțiunile pas cu pas, puteți personaliza adresa URL de previzualizare, vă puteți personaliza vitrina PWA și puteți asigura preluarea datelor de pregătire pentru o experiență de previzualizare perfectă. Cu capacitatea de a previzualiza și programa cu precizie actualizările de conținut, puteți îmbunătăți cu încredere experiența utilizatorului magazinului dvs. online și puteți genera conversii.

Postări asemănatoare:

Cât durează construirea unui PWA Magento?

Cum să alegi tema PWA potrivită pentru Magento 2

Cele 7 faze ale ciclului de viață al dezvoltării Magento PWA

Tendințele de dezvoltare Magento PWA pe care le conturează în viitor