Kann eine Kampagne im Magento PWA Content Staging nicht in der Vorschau angezeigt werden? Hier erfahren Sie, wie Sie das Problem beheben können

Veröffentlicht: 2023-05-24

Haben Sie Schwierigkeiten, eine Kampagnenvorschau im Magento PWA Content Staging anzuzeigen? Machen Sie sich keine Sorgen, wir sind für Sie da! In diesem Blogbeitrag gehen wir auf das häufig auftretende Problem ein, dass Kampagnen nicht in der Vorschau angezeigt werden können, und bieten Ihnen eine Schritt-für-Schritt-Lösung zur Behebung des Problems. Mit unserer fachkundigen Anleitung erschließen Sie das volle Potenzial der Inhaltsbereitstellung in Magento PWA und erhalten die Möglichkeit, Ihre Inhaltsaktualisierungen nahtlos in der Vorschau anzuzeigen und zu planen. Lass uns eintauchen!

Staging von Magento Commerce-Inhalten

Was ist Content Staging?

Content Staging ist eine leistungsstarke Funktion von Magento Commerce (Adobe), mit der Ihr Geschäftsteam mühelos eine Vielzahl von Inhaltsaktualisierungen für Ihren Online-Shop direkt über die Admin-Oberfläche erstellen, in der Vorschau anzeigen und planen kann.

Hauptmerkmale von Content Staging

Flexible Planung: Durch die Nutzung der Inhaltsbereitstellung können Sie Änderungen an den Inhalten Ihres Shops für bestimmte Zeiträume planen. Wenn die geplante Änderung abläuft, wird der Inhalt automatisch auf die vorherige Version zurückgesetzt. Dadurch wird sichergestellt, dass Ihre Website aktuell bleibt und die gewünschten Änderungen zum richtigen Zeitpunkt widerspiegelt. Darüber hinaus können Sie mehrere Versionen des Basisinhalts erstellen, um zukünftige Aktualisierungen zu erleichtern und einfach durch frühere Versionen zu navigieren.
Kampagnenmanagement: Eine „Kampagne“ in der Inhaltsbereitstellung bezieht sich auf eine aufgezeichnete Reihe geplanter Änderungen, die in einem Kalender oder einer Zeitleiste angezeigt werden können. Mit dem Staging-Dashboard können Sie diese Kampagnen effektiv verwalten und erhalten einen Überblick über alle geplanten Updates. Jede geplante Änderung , auch „geplante Aktualisierung“ genannt, bezieht sich auf eine einzelne Änderung innerhalb einer Kampagne.

Wie es funktioniert

Basisinhalt festlegen: Der Basisinhalt stellt den Standardzustand eines Assets ohne Kampagnen dar. Es umfasst den gesamten Inhalt unterhalb des Abschnitts „Geplante Änderungen“ oben auf der Seite. Der Basisinhalt bleibt aktiv, es sei denn, eine laufende Kampagne mit geplanten Änderungen überschneidet sich auf der Zeitachse.
Initiieren der ersten Kampagne: Erstellen Sie Ihre erste Kampagne, indem Sie das gewünschte Start- und Enddatum angeben. Lassen Sie bei einer Kampagne mit offenem Ende das Enddatum leer. Sobald die erste Kampagne abgeschlossen ist, wird der ursprüngliche Basisinhalt automatisch wiederhergestellt.
Nachfolgende Kampagnen hinzufügen: Sie können zusätzliche Kampagnen erstellen, die jeweils einem eindeutigen Zeitraum zugeordnet sind. Stellen Sie jedoch sicher, dass sich Kampagnen für dasselbe Asset nicht überschneiden. Dadurch können Sie je nach Bedarf mehrere Kampagnen unterbringen.
Wiederherstellen des Basisinhalts: Wenn alle aktiven Kampagnen ihr Enddatum erreichen, wird der Basisinhalt automatisch wiederhergestellt, sodass nach Abschluss der Kampagnen ein nahtloser Übergang gewährleistet ist.

Durch die Nutzung der Leistungsfähigkeit von Magento Commerce Content Staging erhalten Sie eine präzise Kontrolle über Ihre Inhaltsaktualisierungen und stellen so zeitnahe Änderungen sicher, ohne das gesamte Benutzererlebnis Ihres Online-Shops zu beeinträchtigen.

Einschränkungen der Inhaltsbereitstellung in Magento PWA

Leider stellen bestimmte Aspekte des Content Staging in Magento PWA (Progressive Web Application) Kompatibilitätsprobleme dar, die spezielle Lösungen erfordern.

Ein häufig auftretendes Problem hängt mit dem Kampagnenvorschaumodus zusammen, der zu Fehlern führen kann, wenn versucht wird, Inhaltsänderungen innerhalb einer Kampagne in der Vorschau anzuzeigen.

In diesem Artikel befassen wir uns hauptsächlich mit der Bereitstellung von Produktinhalten , wobei wir davon ausgehen, dass ähnliche Lösungen auf andere Inhaltstypen wie Kategorien, Katalogpreisregeln, Warenkorbpreisregeln, CMS-Seiten und CMS-Blöcke angewendet werden können.

Wie Sie vielleicht wissen, basiert die Inhaltsbereitstellung im Magento-Backend auf einem Iframe, um den Vorschauinhalt anzuzeigen. Die ursprüngliche Vorschau-URL-Struktur umfasst drei wesentliche Elemente: Vorschau_Store, Vorschau_URL und Vorschau_Version.

Betrachten Sie beispielsweise das folgende Beispiel, bei dem eine Änderung an einem Produkt vorgenommen wurde, was zur folgenden Vorschau-URL führte:

Im Modus für bereitgestellte Inhalte kann keine Vorschau angezeigt werden

Der Vorschaumodus funktioniert nicht mit PWA

Aufschlüsselung der URL-Komponenten:

Preview_store: Th
Vorschau_URL: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
Vorschauversion: 1684578000

Aufgrund der folgenden Probleme funktionieren diese URLs jedoch nicht wie vorgesehen in der PWA-Storefront:

Fehlende Route: Der Versuch, auf „catalog/product/view/id/1/“ auf der PWA-Storefront zuzugreifen, führt zur Seite „404 Not Found“, da für diese bestimmte URL keine definierte Route vorhanden ist.
Herausforderungen beim Datenabruf: Der Datenabrufprozess in der PWA-Storefront basiert auf GraphQl-Abfragen. Leider stehen in diesem Szenario die notwendigen Daten nicht für die Abfrage zur Verfügung.
Autorisierungsschlüssel-Anforderung: Für den Zugriff auf Produktdaten über die GraphQl-API ist ein Autorisierungsschlüssel erforderlich. Dieser Schlüssel dient sowohl der Authentifizierung als auch der Autorisierung und ermöglicht den Abruf der gewünschten Produktinformationen.
Inkonsistenter Datenabruf: Beim Abrufen von Daten über die API werden derzeit echte Daten anstelle von Staging-Daten zurückgegeben. Um die Staging-Daten zu erhalten, ist es unbedingt erforderlich, die gewünschte Vorschauversion innerhalb der API-Anfrage anzugeben.

Die Lösung dieser Probleme ebnet den Weg für eine nahtlose Integration von Content Staging in Magento PWA, sorgt für konsistente Vorschauerlebnisse und ermöglicht ein effektives Content-Management für verschiedene Content-Typen in Ihrer Storefront.

So beheben Sie den Fehler im Kampagnenvorschaumodus

Mit den folgenden Schritten können Sie dieses Problem beheben:

Schritt 1: Behandeln Sie die Vorschau-URL

Erstellen Sie ein Plugin, das die Anpassung der Vorschau-URL ermöglicht:

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

Sie können die Token-Generierungsfunktion von Magento nutzen, die mithilfe des Admin-Benutzers ein Token generiert, um den Admin-Autorisierungsschlüsselparameter in die URL aufzunehmen. Dadurch wird eine ordnungsgemäße Authentifizierung und Autorisierung für die Vorschau von Inhalten sichergestellt:

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

Um Konflikte mit vorhandenen Abfragen zu vermeiden, erstellen Sie in Magento eine neue GraphQL-Abfrage speziell für die Handhabung der Vorschaufunktion:

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

Schritt 2: Passen Sie die PWA-Storefront an

Fügen Sie eine neue Route für die Vorschauseite in Ihrer PWA-Storefront hinzu:

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

Für die Produktvorschau-Komponente können Sie eine ähnliche Produktdetailkomponente erstellen, indem Sie auf die Venia-Komponente verweisen.

Wir müssen eine neue GraphQl-Abfrage verwenden, um die Staging-Daten abzurufen.

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

Um Staging-Daten anstelle der aktuellen Produktdaten in einer normalen GraphQL-Produktabfrage abzurufen, führen Sie die folgenden Schritte aus:

Überprüfen Sie das Magento_StagingGraphQl-Modul: Stellen Sie sicher, dass das Magento_StagingGraphQl-Modul in Ihrer Magento-Instanz installiert und ordnungsgemäß konfiguriert ist. Dieses Modul bietet Unterstützung für den Zugriff auf Staging-Daten mithilfe der Vorschauversion.
Fügen Sie den Autorisierungsschlüssel und die Vorschauversion in den Anforderungsheader ein: Anstatt Abfrageparameter zu verwenden, sollte die Vorschauversion aus dem Anforderungsheader abgerufen werden. Fügen Sie sowohl den Administrator-Autorisierungsschlüssel als auch die Vorschauversion in den Anforderungsheader ein, wenn Sie den GraphQL-API-Aufruf durchführen.
Legen Sie den Autorisierungsschlüssel im Anforderungsheader fest: Fügen Sie den Administrator-Autorisierungsschlüssel als Autorisierungstoken zum Anforderungsheader hinzu. Dies stellt eine ordnungsgemäße Authentifizierung und Autorisierung für den Zugriff auf die Staging-Daten sicher.
Legen Sie die Vorschauversion im Anforderungsheader fest: Fügen Sie die Vorschauversion mit dem entsprechenden Headerschlüssel und -wert in den Anforderungsheader ein. Dadurch wird Magento angewiesen, die entsprechenden Staging-Daten für die angegebene Vorschauversion abzurufen.

Durch die Aufnahme des Autorisierungsschlüssels und der Vorschauversion in den Anforderungsheader ruft der GraphQL-API-Aufruf die gewünschten Staging-Daten anstelle der aktuellen Produktdaten ab.

Schritt 3: Passen Sie die Vorschau von GraphQl an

Sie müssen eine neue Abfrage zu „ supportedQueries“ in der Datei „app/code/Tigren/StagingGraphQl/etc/graphql/di.xml“ hinzufügen

 <?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>

Aktualisieren Sie abschließend die Datei useAdapter.js im Verzeichnis @magento/peregrine/lib/talons/Adapter mit dem bereitgestellten Code:

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

Dieser Code fügt eine Bedingung hinzu, um zu überprüfen, ob der Vorgangsname „getProductDetailForPreviewProductPage“ lautet. Wenn die Bedingung erfüllt ist und die erforderlichen Variablen (Vorschauversion und Autorisierung) vorhanden sind, werden die Header entsprechend aktualisiert.

Nachdem Sie diese Codeänderungen vorgenommen haben, erstellen Sie Ihre PWA neu, um die Updates zu integrieren.

Sie können diese Lösung jetzt anwenden, um andere Staging-Inhalte in Ihrer PWA zu aktualisieren, indem Sie die erforderlichen Header in die GraphQL-Anfragen einbinden.

So beheben Sie den Vorschaufehler in Magento PWA

Letzte Worte

Die fehlende Möglichkeit, Kampagnen im Content Staging in der Vorschau anzuzeigen, kann ein frustrierendes Hindernis bei der Verwaltung von Adobe Commerce PWA-Shops sein. Mit dem in diesem Blogbeitrag bereitgestellten Wissen und der Lösung verfügen Sie nun jedoch über die Werkzeuge, um dieses Problem zu lösen und das volle Potenzial der Inhaltsinszenierung auszuschöpfen.

Indem Sie die Schritt-für-Schritt-Anleitung befolgen, können Sie die Vorschau-URL anpassen, Ihre PWA-Storefront anpassen und den Abruf von Staging-Daten für ein nahtloses Vorschau-Erlebnis sicherstellen. Mit der Möglichkeit, Ihre Inhaltsaktualisierungen genau in der Vorschau anzuzeigen und zu planen, können Sie das Benutzererlebnis Ihres Online-Shops sicher verbessern und die Conversions steigern.

Zusammenhängende Posts:

Wie lange dauert die Erstellung einer Magento-PWA?

So wählen Sie das richtige PWA-Theme für Magento 2 aus

Die 7 Phasen des Magento PWA-Entwicklungslebenszyklus

Magento PWA-Entwicklungstrends, die in der Zukunft skizziert werden sollen