无法在 Magento PWA 内容暂存中预览活动？ 这是修复它的方法

已发表: 2023-05-24

您在 Magento PWA Content Staging 中预览活动时遇到困难吗？ 别担心，我们已经为您准备好了！ 在这篇博文中，我们将探讨无法预览活动的常见问题，并为您提供解决该问题的分步解决方案。 在我们的专家指导下，您将释放 Magento PWA 中内容暂存的全部潜力，并获得无缝预览和安排内容更新的能力。 让我们开始吧！

Magento Commerce 内容暂存

什么是内容暂存？

内容暂存是 Magento Commerce (Adobe) 提供的一项强大功能，它使您的业务团队能够直接从管理界面毫不费力地为您的在线商店创建、预览和安排各种内容更新。

内容暂存的主要功能

  1. 灵活的计划：通过利用内容暂存，您可以安排特定时间段内商店内容的更改。 当计划的更改到期时，内容会自动恢复到之前的版本。 这可确保您的网站保持最新状态并在正确的时间反映所需的更改。 此外，您可以创建多个版本的基线内容以促进未来的更新并轻松浏览以前的版本。
  2. 活动管理：内容暂存中的“活动”是指一组记录的计划更改，可以在日历或时间轴上查看。 Staging Dashboard 允许您有效地管理这些活动，提供所有计划更新的概览。 每个预定更改，也称为“预定更新”，是指活动中的单个修改。

怎么运行的

  1. 建立基线内容：基线内容表示没有任何活动的资产的默认状态。 它包含页面顶部“计划更改”部分下方的所有内容。 除非计划更改的正在进行的活动在时间线上重叠，否则基线内容将保持活动状态。
  2. 启动第一个活动：通过指定所需的开始和结束日期来创建您的初始活动。 对于开放式活动，将结束日期留空。 一旦第一个活动结束，原始基准内容将自动恢复。
  3. 添加后续活动：您可以创建额外的活动，每个活动都分配给一个唯一的时间段。 但是，请确保同一资产的广告系列不会重叠。 这使您可以根据需要容纳多个活动。
  4. 恢复基线内容：当所有活动的活动都达到其结束日期时，基线内容将自动恢复，从而在活动结束后提供无缝过渡。

通过利用 Magento Commerce Content Staging 的强大功能，您可以精确控制内容更新，确保及时更改，而不会破坏在线商店的整体用户体验。

Magento PWA 中内容暂存的局限性

不幸的是，Magento PWA（渐进式 Web 应用程序）中内容暂存的某些方面存在兼容性挑战，需要特定的解决方案。

遇到的一个常见问题与活动预览模式有关，当尝试预览活动中的内容更改时可能会导致错误。

在本文中，我们将主要解决产品内容分级问题，并了解类似的解决方案可以应用于其他内容类型，例如类别、目录价格规则、购物车价格规则、CMS 页面和 CMS 块。

您可能知道，Magento 后端中的内容暂存依赖于 iframe 来显示预览内容。 原始预览 URL 结构包含三个基本元素： preview_store、preview_url和preview_version。

例如，请考虑以下示例，其中对产品进行了更改，导致以下预览 URL：

无法预览暂存内容模式
预览模式不适用于 pwa

URL 组件的细分：

  • Preview_store：th
  • Preview_url: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
  • 预览版本：1684578000

但是，由于以下问题，这些 URL 在 PWA 店面中无法正常运行：

在预览模式 pwa 中显示 404
  1. 缺少路由：尝试访问 PWA 店面上的“catalog/product/view/id/1/”会导致 404 Not Found 页面，因为没有为该特定 URL 定义的路由。
  2. 数据检索挑战： PWA 店面中的数据检索过程依赖于 GraphQl 查询。 不幸的是，在这种情况下，无法查询所需的数据。
  3. 授权密钥要求：要通过 GraphQl API 访问产品数据，授权密钥是必需的。 此密钥用于身份验证和授权目的，允许检索所需的产品信息。
  4. 不一致的数据检索：目前，通过 API 获取数据时，返回的是真实数据，而不是暂存数据。 要获取暂存数据，必须在 API 请求中指定所需的预览版本。

解决这些问题将为在 Magento PWA 中无缝集成 Content Staging 铺平道路，确保一致的预览体验并为整个店面的各种内容类型实现有效的内容管理。

如何解决活动预览模式错误

您可以采取以下步骤来解决此问题：

第 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); } }
  • 为避免与现有查询发生冲突，请在 Magento 中创建一个新的 GraphQL 查询，专门用于处理预览功能：
 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' });
  • Product Preview 组件可以参考Venia 组件构建一个类似的product detail 组件。
  • 我们需要使用新的 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 实例中安装并正确配置了 Magento_StagingGraphQl 模块。 此模块支持使用预览版访问登台数据。
  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 内容暂存

最后的话

在管理 Adob​​e Commerce PWA 商店时，无法在 Content Staging 中预览活动可能是一个令人沮丧的障碍。 但是，借助本博文中提供的知识和解决方案，您现在拥有了克服此问题并充分利用内容暂存潜力的工具。

按照分步说明，您可以自定义预览 URL，自定义 PWA 店面，并确保检索暂存数据以获得无缝预览体验。 凭借准确预览和安排内容更新的能力，您可以自信地增强在线商店的用户体验并推动转化。

相关文章：

构建 Magento PWA 需要多长时间？

如何为 Magento 2 选择合适的 PWA 主题

Magento PWA 开发生命周期的 7 个阶段

Magento PWA发展趋势勾勒未来