Magento PWA 콘텐츠 스테이징에서 캠페인을 미리 볼 수 없습니까? 문제를 해결하는 방법은 다음과 같습니다.

게시 됨: 2023-05-24

Magento PWA Content Staging에서 캠페인을 미리 보는 데 어려움이 있습니까? 걱정하지 마세요. 저희가 도와드리겠습니다! 이 블로그 게시물에서는 캠페인을 미리 볼 수 없는 일반적인 문제를 살펴보고 문제를 해결하기 위한 단계별 솔루션을 제공합니다. 당사의 전문가 안내를 통해 Magento PWA에서 콘텐츠 스테이징의 잠재력을 최대한 활용하고 콘텐츠 업데이트를 원활하게 미리 보고 예약할 수 있습니다. 다이빙하자!

Magento Commerce 콘텐츠 스테이징

콘텐츠 스테이징이란 무엇입니까?

콘텐츠 스테이징은 Magento Commerce(Adobe)에서 제공하는 강력한 기능으로, 비즈니스 팀이 관리 인터페이스에서 직접 온라인 스토어에 대한 광범위한 콘텐츠 업데이트를 손쉽게 생성하고, 미리 보고, 예약할 수 있도록 합니다.

콘텐츠 스테이징의 주요 기능

유연한 예약: 콘텐츠 스테이징을 활용하여 특정 기간 동안 매장 콘텐츠 변경 일정을 잡을 수 있습니다. 예약된 변경이 만료되면 콘텐츠가 자동으로 이전 버전으로 되돌아갑니다. 이렇게 하면 웹 사이트가 최신 상태로 유지되고 적시에 원하는 변경 사항이 반영됩니다. 또한 기본 콘텐츠의 여러 버전을 생성하여 향후 업데이트를 용이하게 하고 이전 버전을 쉽게 탐색할 수 있습니다.
캠페인 관리: 콘텐츠 스테이징의 "캠페인"은 일정 또는 타임라인에서 볼 수 있는 예약된 변경 사항의 기록된 세트를 말합니다. 스테이징 대시보드를 사용하면 이러한 캠페인을 효과적으로 관리하여 예약된 모든 업데이트에 대한 개요를 제공할 수 있습니다. "예약 업데이트" 라고도 하는 각 예약 변경은 캠페인 내의 개별 수정을 나타냅니다.

작동 방식

기본 콘텐츠 설정: 기본 콘텐츠는 캠페인이 없는 자산의 기본 상태를 나타냅니다. 페이지 상단의 "예정된 변경" 섹션 아래에 있는 모든 콘텐츠를 포함합니다. 예약된 변경 사항이 있는 진행 중인 캠페인이 타임라인에서 겹치지 않는 한 기본 콘텐츠는 활성 상태로 유지됩니다.
첫 번째 캠페인 시작: 원하는 시작 날짜와 종료 날짜를 지정하여 초기 캠페인을 만듭니다. 개방형 캠페인의 경우 종료일을 비워 둡니다. 첫 번째 캠페인이 종료되면 원본 기본 콘텐츠가 자동으로 복원됩니다.
후속 캠페인 추가: 각각 고유한 기간에 할당된 추가 캠페인을 만들 수 있습니다. 그러나 동일한 자산에 대한 캠페인이 겹치지 않도록 하십시오. 이를 통해 필요에 따라 여러 캠페인을 수용할 수 있습니다.
기본 콘텐츠 복원: 모든 활성 캠페인이 종료 날짜에 도달하면 기본 콘텐츠가 자동으로 복원되어 캠페인이 종료되면 원활하게 전환됩니다.

Magento Commerce Content Staging의 기능을 활용하면 콘텐츠 업데이트를 정밀하게 제어할 수 있어 온라인 상점의 전반적인 사용자 경험을 방해하지 않고 적시에 변경할 수 있습니다.

Magento PWA에서 콘텐츠 스테이징의 제한 사항

안타깝게도 Magento PWA(Progressive Web Application)의 콘텐츠 스테이징의 특정 측면은 특정 해결 방법이 필요한 호환성 문제를 나타냅니다.

공통적으로 발생하는 한 가지 문제는 캠페인 미리보기 모드 와 관련되어 있으며 캠페인 내에서 콘텐츠 변경 사항을 미리보려고 할 때 오류가 발생할 수 있습니다.

이 기사에서는 카테고리, 카탈로그 가격 규칙, 장바구니 가격 규칙, CMS 페이지 및 CMS 블록과 같은 다른 콘텐츠 유형에 유사한 솔루션을 적용할 수 있다는 점을 이해하고 제품 콘텐츠 스테이징을 주로 다룹니다.

아시다시피 Magento 백엔드의 콘텐츠 스테이징은 iframe을 사용하여 미리 보기 콘텐츠를 표시합니다. 원래 미리보기 URL 구조는 세 가지 필수 요소인 preview_store, preview_url 및 preview_version을 포함합니다.

예를 들어, 제품이 변경되어 다음과 같은 미리보기 URL이 생성된 다음 예를 고려하십시오.

URL 구성요소 분석:

Preview_store: 일
Preview_url: https://demo-enterprise.tigrendev.com/catalog/product/view/id/1
미리보기_버전: 1684578000

그러나 이러한 URL은 다음 문제로 인해 PWA 스토어프론트에서 의도한 대로 작동하지 않습니다.

누락된 경로: 이 특정 URL에 대해 정의된 경로가 없기 때문에 PWA 스토어프론트에서 "catalog/product/view/id/1/"에 액세스하려고 하면 404 찾을 수 없음 페이지가 표시됩니다.
데이터 검색 문제: PWA 상점 첫화면의 데이터 검색 프로세스는 GraphQl 쿼리에 의존합니다. 안타깝게도 이 시나리오에서는 쿼리에 필요한 데이터를 사용할 수 없습니다.
인증 키 요구 사항: GraphQl API를 통해 제품 데이터에 액세스하려면 인증 키가 필수입니다. 이 키는 인증 및 승인 용도로 사용되어 원하는 제품 정보를 검색할 수 있습니다.
일관성 없는 데이터 검색: 현재 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>

admin 사용자를 사용하여 토큰을 생성하여 URL에 admin 인증 키 매개변수를 포함하는 Magento의 토큰 생성 기능을 활용할 수 있습니다. 이렇게 하면 콘텐츠 미리 보기에 대한 적절한 인증 및 승인이 보장됩니다.

 <?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 구성 요소를 참조하여 유사한 제품 상세 구성 요소를 빌드할 수 있습니다.

준비 데이터를 가져오려면 새 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 쿼리에서 현재 제품 데이터 대신 스테이징 데이터를 검색하려면 다음 단계를 따르세요.

Magento_StagingGraphQl 모듈 확인: Magento_StagingGraphQl 모듈이 설치되어 있고 Magento 인스턴스에 올바르게 구성되어 있는지 확인하십시오. 이 모듈은 미리보기 버전을 사용하여 스테이징 데이터에 액세스하기 위한 지원을 제공합니다.
요청 헤더에 인증 키 및 미리보기 버전 포함: 쿼리 매개변수를 사용하는 대신 요청 헤더에서 미리보기 버전을 가져와야 합니다. GraphQL API를 호출할 때 요청 헤더에 관리자 인증 키와 미리 보기 버전을 모두 포함합니다.
요청 헤더에 인증 키 설정: 관리자 인증 키를 인증 토큰으로 요청 헤더에 추가합니다. 이렇게 하면 스테이징 데이터에 액세스하기 위한 적절한 인증 및 승인이 보장됩니다.
요청 헤더에 미리보기 버전 설정: 적절한 헤더 키와 값을 사용하여 요청 헤더에 미리보기 버전을 포함합니다. 이렇게 하면 지정된 미리 보기 버전에 해당하는 준비 데이터를 검색하도록 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 및 인증)가 있는 경우 그에 따라 헤더가 업데이트됩니다.

이러한 코드를 변경한 후 PWA를 다시 빌드하여 업데이트를 통합하십시오.

이제 이 솔루션을 적용하여 GraphQL 요청에 필요한 헤더를 포함하여 PWA의 다른 스테이징 콘텐츠를 업데이트할 수 있습니다.

마지막 말

Content Staging에서 캠페인을 미리 볼 수 없다는 점은 Adobe Commerce PWA 스토어를 관리할 때 실망스러운 장애물이 될 수 있습니다. 그러나 이 블로그 게시물에서 제공하는 지식과 솔루션으로 무장하면 이제 이 문제를 극복하고 콘텐츠 준비의 잠재력을 최대한 활용할 수 있는 도구가 생겼습니다.

단계별 지침에 따라 미리 보기 URL을 사용자 지정하고, PWA 상점 첫화면을 사용자 지정하고, 원활한 미리 보기 환경을 위해 스테이징 데이터를 검색할 수 있습니다. 콘텐츠 업데이트를 정확하게 미리 보고 예약할 수 있는 기능을 통해 온라인 상점의 사용자 경험을 자신 있게 향상하고 전환을 유도할 수 있습니다.

관련 게시물:

Magento PWA를 구축하는 데 얼마나 걸립니까?

Magento 2에 적합한 PWA 테마를 선택하는 방법

Magento PWA 개발 수명 주기의 7단계

미래에 대한 Magento PWA 개발 동향