Magento PWA コンテンツ ステージングでキャンペーンをプレビューできませんか? 修正方法は次のとおりです

公開: 2023-05-24

Magento PWA コンテンツ ステージングでキャンペーンをプレビューするときに問題が発生していますか? 心配しないでください。 このブログ投稿では、キャンペーンをプレビューできないという一般的な問題を調査し、それを修正するための段階的な解決策を提供します。 私たちの専門家によるガイダンスにより、Magento PWA でのコンテンツ ステージングの可能性を最大限に引き出し、コンテンツの更新をシームレスにプレビューしてスケジュールできるようになります。 飛び込んでみましょう！

Magento Commerce コンテンツのステージング

コンテンツステージングとは何ですか?

コンテンツ ステージングは​​、Magento Commerce (Adobe) が提供する強力な機能で、ビジネス チームが管理インターフェイスから直接、オンライン ストアの幅広いコンテンツ更新を簡単に作成、プレビュー、スケジュールできるようにします。

コンテンツステージングの主な機能

  1. 柔軟なスケジュール設定:コンテンツ ステージングを利用することで、特定の期間におけるストアのコンテンツの変更をスケジュールできます。 スケジュールされた変更の有効期限が切れると、コンテンツは自動的に前のバージョンに戻ります。 これにより、Web サイトが常に最新の状態に保たれ、必要な変更が適切なタイミングで反映されます。 さらに、ベースライン コンテンツの複数のバージョンを作成して、将来の更新を容易にし、以前のバージョンに簡単に移動することができます。
  2. キャンペーン管理:コンテンツ ステージングにおける「キャンペーン」とは、カレンダーまたはタイムラインで表示できる、スケジュールされた変更の記録されたセットを指します。 ステージング ダッシュボードを使用すると、これらのキャンペーンを効果的に管理でき、スケジュールされたすべての更新の概要が表示されます。 「スケジュールされた更新」とも呼ばれる各スケジュールされた変更は、キャンペーン内の個々の変更を指します。

使い方

  1. ベースライン コンテンツの確立:ベースライン コンテンツは、キャンペーンのないアセットのデフォルト状態を表します。 これには、ページ上部の「予定されている変更」セクションの下にあるすべてのコンテンツが含まれます。 変更が予定されている進行中のキャンペーンがタイムライン上で重ならない限り、ベースライン コンテンツはアクティブなままになります。
  2. 最初のキャンペーンの開始:希望の開始日と終了日を指定して、最初のキャンペーンを作成します。 期限のないキャンペーンの場合は、終了日を空白のままにします。 最初のキャンペーンが終了すると、元のベースライン コンテンツが自動的に復元されます。
  3. 後続のキャンペーンの追加:追加のキャンペーンを作成し、それぞれを固有の期間に割り当てることができます。 ただし、同じアセットのキャンペーンが重複しないようにしてください。 これにより、必要に応じて複数のキャンペーンに対応できます。
  4. ベースライン コンテンツの復元:すべてのアクティブなキャンペーンが終了日に達すると、ベースライン コンテンツが自動的に復元され、キャンペーン終了後のシームレスな移行が可能になります。

Magento Commerce コンテンツ ステージングの機能を活用することで、コンテンツ更新を正確に制御できるようになり、オンライン ストア全体のユーザー エクスペリエンスを中断することなく、タイムリーな変更を確実に行うことができます。

Magento PWA でのコンテンツ ステージングの制限

残念ながら、Magento PWA (プログレッシブ Web アプリケーション) のコンテンツ ステージングの特定の側面には互換性の問題があり、特定の解決策が必要です。

よく発生する問題の 1 つはキャンペーン プレビュー モードに関連しており、キャンペーン内のコンテンツの変更をプレビューしようとするとエラーが発生する可能性があります。

この記事では、カテゴリ、カタログ価格ルール、カート価格ルール、CMS ページ、CMS ブロックなどの他のコンテンツ タイプにも同様のソリューションを適用できることを理解した上で、主に製品コンテンツのステージングについて説明します。

ご存知かもしれませんが、Magento バックエンドでのコンテンツ ステージングは​​ iframe に依存してプレビュー コンテンツを表示します。 元のプレビュー URL 構造には、preview_store、preview_url、 preview_version という 3 つの必須要素が含まれています。

たとえば、製品に変更が加えられ、次のプレビュー URL が生成された次の例を考えてみましょう。

ステージングコンテンツモードをプレビューできない
プレビュー モードは pwa では機能しません

URL コンポーネントの内訳:

  • プレビューストア: 番目
  • プレビュー URL: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
  • プレビュー バージョン: 1684578000

ただし、次の問題により、これらの URL は PWA ストアフロントでは意図したとおりに機能しません。

プレビュー モードで 404 を表示する pwa
  1. ルートがありません: PWA ストアフロントの「catalog/product/view/id/1/」にアクセスしようとすると、この特定の URL に定義されたルートがないため、404 Not Found ページが表示されます。
  2. データ取得の課題: PWA ストアフロントのデータ取得プロセスは、GraphQl クエリに依存しています。 残念ながら、このシナリオでは、クエリに必要なデータを利用できません。
  3. 認証キーの要件: GraphQl API 経由で製品データにアクセスするには、認証キーが必須です。 このキーは認証と認可の両方の目的に使用され、必要な製品情報を取得できるようになります。
  4. 一貫性のないデータ取得:現在、API を介してデータを取得すると、ステージング データではなく実際のデータが返されます。 ステージング データを取得するには、API リクエスト内で希望のプレビュー バージョンを指定することが重要です。

これらの問題に対処することで、Magento PWA でのコンテンツ ステージングのシームレスな統合への道が開かれ、一貫したプレビュー エクスペリエンスが確保され、ストアフロント全体のさまざまなコンテンツ タイプの効果的なコンテンツ管理が可能になります。

キャンペーンプレビューモードエラーを解決する方法

この問題を解決するために実行できる手順は次のとおりです。

ステップ 1: プレビュー URL を処理する

  • プレビュー URL のカスタマイズを可能にするプラグインを作成します。
 <type name="Magento\Staging\Model\Preview\UrlBuilder"> <plugin name="url_builder" type="Tigren\StagingGraphQl\Plugin\Magento\Staging\Model\Preview\UrlBuilder" /> </type>
  • Magento のトークン生成機能を利用すると、管理者ユーザーを使用してトークンを生成し、URL に管理者認証キー パラメーターを含めることができます。 これにより、コンテンツをプレビューするための適切な認証と認可が保証されます。
 <?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); } }
  • 既存のクエリとの競合を回避するには、特にプレビュー機能を処理するための新しい GraphQL クエリを Magento で作成します。
 type Query { product ( preview_version: String authorization: String ): Product @doc(description: "The Product object") }

ステップ 2: PWA ストアフロントをカスタマイズする

  • PWA ストアフロントのプレビュー ページに新しいルートを追加します。
 route.push({ name: 'ProductPreview', pattern: '/catalog/product/view/id/:id/preview_version/:preview_version/authorization/:authorization', path: 'src/components/ProductPreview' });
  • 製品プレビュー コンポーネントの場合、Venia コンポーネントを参照して、同様の製品詳細コンポーネントを構築できます。
  • ステージング データを取得するには、新しい GraphQl クエリを使用する必要があります。
 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 };

通常の製品 GraphQL クエリで現在の製品データの代わりにステージング データを取得するには、次の手順に従います。

  1. Magento_StagingGraphQl モジュールを確認する: Magento_StagingGraphQl モジュールが Magento インスタンスにインストールされ、適切に構成されていることを確認します。 このモジュールは、プレビュー バージョンを使用したステージング データへのアクセスのサポートを提供します。
  2. リクエスト ヘッダーに認証キーとプレビュー バージョンを含めます。クエリ パラメーターを使用する代わりに、プレビュー バージョンをリクエスト ヘッダーから取得する必要があります。 GraphQL API 呼び出しを行うときに、管理者認証キーとプレビュー バージョンの両方をリクエスト ヘッダーに含めます。
  3. リクエスト ヘッダーに認可キーを設定する: 管理者認可キーを認可トークンとしてリクエスト ヘッダーに追加します。 これにより、ステージング データにアクセスするための適切な認証と認可が保証されます。
  4. リクエスト ヘッダーにプレビュー バージョンを設定する: 適切なヘッダー キーと値を使用して、リクエスト ヘッダーにプレビュー バージョンを含めます。 これは、指定されたプレビュー バージョンに対応するステージング データを取得するように Magento に指示します。

リクエスト ヘッダーに認証キーとプレビュー バージョンを含めることにより、GraphQL API 呼び出しは現在の製品データの代わりに必要なステージング データを取得します。

ステップ 3: プレビュー GraphQl をカスタマイズする

  • app/code/Tigren/StagingGraphQl/etc/graphql/di.xmlファイルのsupportedQueriesに新しいクエリを追加する必要があります。
 <?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>
  • 最後に、 @magento/peregrine/lib/talons/AdapterディレクトリにあるuseAdapter.jsファイルを、提供されたコードで更新します。
 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 } }; }), [] );

このコードは、操作名が「getProductDetailForPreviewProductPage」であるかどうかを確認する条件を追加します。 条件が満たされ、必要な変数 (preview_version および authorization) が存在する場合、ヘッダーはそれに応じて更新されます。

これらのコード変更を行った後、PWA を再構築して更新を組み込んでください。

GraphQL リクエストに必要なヘッダーを含めることで、このソリューションを適用して PWA 内の他のステージング コンテンツを更新できるようになりました。

Magento pwaのプレビューエラーを修正する方法
Magento PWA コンテンツのステージング

最後の言葉

Content Staging でキャンペーンをプレビューできないことは、Adobe Commerce PWA ストアを管理する際にイライラする障害となる可能性があります。 ただし、このブログ投稿で提供される知識と解決策があれば、この問題を克服し、コンテンツ ステージングの可能性を最大限に活用するためのツールが手に入ります。

段階的な手順に従うことで、プレビュー URL をカスタマイズし、PWA ストアフロントをカスタマイズし、ステージング データを確実に取得してシームレスなプレビュー エクスペリエンスを実現できます。 コンテンツの更新を正確にプレビューしてスケジュールできる機能により、自信を持ってオンライン ストアのユーザー エクスペリエンスを向上させ、コンバージョンを促進できます。

関連記事：

Magento PWA の構築にはどのくらい時間がかかりますか?

Magento 2 に適切な PWA テーマを選択する方法

Magento PWA 開発ライフサイクルの 7 つのフェーズ

今後概説される Magento PWA 開発トレンド