لا يمكن معاينة حملة في تنظيم محتوى Magento PWA؟ إليك كيفية إصلاحه

هل تواجه صعوبات في معاينة الحملات في Magento PWA Content Staging؟ لا تقلق ، لقد قمنا بتغطيتك! في منشور المدونة هذا ، سنستكشف المشكلة الشائعة المتمثلة في عدم القدرة على معاينة الحملات وتزويدك بحل خطوة بخطوة لإصلاحها. من خلال إرشادات الخبراء لدينا ، ستطلق العنان للإمكانات الكاملة للمحتوى التدريجي في Magento PWA وستكتسب القدرة على معاينة تحديثات المحتوى الخاصة بك وجدولتها بسلاسة. دعنا نتعمق!

تنظيم محتوى Magento Commerce

ما هو المحتوى التدريجي؟

يعد تدريج المحتوى ميزة قوية تقدمها Magento Commerce (Adobe) والتي تمكن فريق عملك من إنشاء مجموعة كبيرة من تحديثات المحتوى ومعاينتها وجدولتها بسهولة لمتجرك عبر الإنترنت مباشرةً من واجهة المسؤول.

الملامح الرئيسية للمحتوى التدريجي

1. جدولة مرنة: من خلال الاستفادة من التدريج المرحلي للمحتوى ، يمكنك جدولة التغييرات على محتوى متجرك لفترات زمنية محددة. عند انتهاء صلاحية التغيير المجدول ، يعود المحتوى تلقائيًا إلى نسخته السابقة. هذا يضمن أن يظل موقع الويب الخاص بك محدثًا ويعكس التغييرات المطلوبة في الأوقات المناسبة. بالإضافة إلى ذلك ، يمكنك إنشاء إصدارات متعددة من المحتوى الأساسي لتسهيل التحديثات المستقبلية والتنقل بسهولة عبر الإصدارات السابقة.
2. إدارة الحملة: تشير "الحملة" في تنظيم المحتوى إلى مجموعة مسجلة من التغييرات المجدولة التي يمكن عرضها على تقويم أو مخطط زمني. تتيح لك لوحة المعلومات المرحلية إدارة هذه الحملات بفعالية ، وتوفر نظرة عامة على جميع التحديثات المجدولة. يشير كل تغيير مجدول ، يُعرف أيضًا باسم "التحديث المجدول" ، إلى تعديل فردي داخل الحملة.

كيف تعمل

1. إنشاء محتوى الأساس: يمثل المحتوى الأساسي الحالة الافتراضية للأصل بدون أي حملات. وهي تشمل كل المحتوى الموجود أسفل قسم "التغييرات المجدولة" في الجزء العلوي من الصفحة. يظل المحتوى الأساسي نشطًا ما لم تتداخل حملة جارية ذات تغييرات مجدولة على المخطط الزمني.
2. بدء الحملة الأولى: قم بإنشاء حملتك الأولية عن طريق تحديد تاريخي البدء والانتهاء المطلوبين. بالنسبة للحملة المفتوحة ، اترك تاريخ الانتهاء فارغًا. بمجرد انتهاء الحملة الأولى ، تتم استعادة المحتوى الأساسي الأصلي تلقائيًا.
3. إضافة حملات لاحقة: يمكنك إنشاء حملات إضافية ، يتم تعيين كل منها لفترة زمنية فريدة. ومع ذلك ، تأكد من عدم تداخل الحملات الخاصة بنفس مادة العرض. يسمح لك هذا باستيعاب حملات متعددة على النحو المطلوب.
4. استعادة المحتوى الأساسي: عندما تصل جميع الحملات النشطة إلى تواريخ انتهائها ، تتم إعادة محتوى الأساس تلقائيًا ، مما يوفر انتقالًا سلسًا بمجرد انتهاء الحملات.

من خلال الاستفادة من قوة Magento Commerce Content Staging ، يمكنك التحكم بدقة في تحديثات المحتوى الخاصة بك ، مما يضمن التغييرات في الوقت المناسب دون الإخلال بتجربة المستخدم الإجمالية لمتجرك عبر الإنترنت.

حدود تنظيم المحتوى في Magento PWA

لسوء الحظ ، تمثل بعض جوانب المحتوى التدريجي في Magento PWA (تطبيق الويب التقدمي) تحديات توافق تتطلب قرارات محددة.

تتعلق إحدى المشكلات الشائعة التي تمت مواجهتها بوضع "معاينة الحملة" ، والذي يمكن أن يؤدي إلى حدوث أخطاء عند محاولة معاينة تغييرات المحتوى داخل الحملة.

في هذه المقالة ، سنتناول بشكل أساسي تنظيم محتوى المنتج ، على أساس أنه يمكن تطبيق حلول مماثلة على أنواع المحتوى الأخرى مثل الفئات وقواعد أسعار الكتالوج وقواعد أسعار سلة التسوق وصفحات CMS وكتل CMS.

كما تعلم ، يعتمد المحتوى التدريجي في الواجهة الخلفية لـ Magento على iframe لعرض محتوى المعاينة. تشتمل بنية عنوان URL للمعاينة الأصلية على ثلاثة عناصر أساسية: preview_store و preview_url و preview_version.

على سبيل المثال ، ضع في اعتبارك المثال التالي حيث تم إجراء تغيير على أحد المنتجات ، مما أدى إلى عنوان URL للمعاينة التالي:

تفصيل مكونات عنوان URL:

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

ومع ذلك ، لا تعمل عناوين URL هذه على النحو المنشود في واجهة متجر PWA بسبب المشكلات التالية:

1. المسار المفقود: تؤدي محاولة الوصول إلى "الكتالوج / المنتج / العرض / المعرف / 1 /" على واجهة متجر PWA إلى صفحة 404 غير موجودة نظرًا لعدم وجود مسار محدد لعنوان URL المحدد هذا.
2. تحديات استرداد البيانات: تعتمد عملية استرداد البيانات في واجهة متجر PWA على استعلامات GraphQl. لسوء الحظ ، في هذا السيناريو ، البيانات الضرورية غير متوفرة للاستعلام.
3. متطلبات مفتاح التفويض: للوصول إلى بيانات المنتج عبر واجهة برمجة تطبيقات GraphQl ، يكون مفتاح التفويض إلزاميًا. يخدم هذا المفتاح كلاً من أغراض المصادقة والترخيص ، مما يسمح باسترداد معلومات المنتج المطلوبة.
4. استرداد البيانات غير المتسقة: في الوقت الحالي ، عند جلب البيانات من خلال واجهة برمجة التطبيقات ، يتم إرجاع البيانات الحقيقية بدلاً من البيانات المرحلية. للحصول على البيانات المرحلية ، من الضروري تحديد إصدار المعاينة المطلوب داخل طلب 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

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

• أخيرًا ، قم بتحديث ملف useAdapter.js في دليل @ magento / peregrine / lib / talons / Adapter بالكود المقدم:

 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". إذا تم استيفاء الشرط وكانت المتغيرات المطلوبة (نسخة المعاينة والتفويض) موجودة ، يتم تحديث الرؤوس وفقًا لذلك.

بعد إجراء هذه التغييرات على التعليمات البرمجية ، أعد إنشاء PWA لدمج التحديثات.

يمكنك الآن تطبيق هذا الحل لتحديث محتوى التدريج الآخر في PWA عن طريق تضمين الرؤوس الضرورية في طلبات GraphQL.

الكلمات الأخيرة

يمكن أن تكون عدم القدرة على معاينة الحملات في Content Staging عقبة محبطة عند إدارة متاجر Adobe Commerce PWA. ومع ذلك ، مسلحًا بالمعرفة والحل المقدمين في منشور المدونة هذا ، لديك الآن الأدوات اللازمة للتغلب على هذه المشكلة وتسخير الإمكانات الكاملة لتنظيم المحتوى.

باتباع الإرشادات خطوة بخطوة ، يمكنك تخصيص عنوان URL للمعاينة وتخصيص واجهة متجر PWA والتأكد من استرداد البيانات المرحلية للحصول على تجربة معاينة سلسة. من خلال القدرة على المعاينة الدقيقة وجدولة تحديثات المحتوى الخاصة بك ، يمكنك بثقة تحسين تجربة مستخدم متجرك عبر الإنترنت وزيادة التحويلات.

المنشورات ذات الصلة:

كم من الوقت يستغرق لبناء Magento PWA؟

كيفية اختيار سمة PWA المناسبة لـ Magento 2

المراحل السبع لدورة حياة تطوير Magento PWA

اتجاهات تطوير Magento PWA لتلخيصها في المستقبل