Bir Kampanyayı Magento PWA İçerik Aşamasında Önizleyemiyor musunuz? İşte Nasıl Düzeltilir?

Magento PWA Content Staging'de kampanyaları önizlerken zorluklarla mı karşılaşıyorsunuz? Endişelenme, seni koruduk! Bu blog gönderisinde, kampanyaları önizleyememek gibi yaygın bir sorunu keşfedeceğiz ve size bu sorunu çözmek için adım adım bir çözüm sunacağız. Uzman rehberliğimizle, Magento PWA'da içerik hazırlamanın tüm potansiyelini ortaya çıkaracak ve içerik güncellemelerinizi sorunsuz bir şekilde ön izleme ve planlama becerisi kazanacaksınız. Haydi dalalım!

Magento Ticaret İçeriği Hazırlama

İçerik Hazırlama nedir?

İçerik hazırlama, Magento Commerce (Adobe) tarafından sunulan ve iş ekibinizin doğrudan Yönetici arabiriminden çevrimiçi mağazanız için çok çeşitli içerik güncellemelerini zahmetsizce oluşturmasını, önizlemesini ve planlamasını sağlayan güçlü bir özelliktir.

İçerik Hazırlamanın temel özellikleri

1. Esnek Planlama: İçerik hazırlığından yararlanarak, mağazanızın içeriğinde yapılacak değişiklikleri belirli zaman dilimleri için planlayabilirsiniz. Planlanan değişikliğin süresi dolduğunda, içerik otomatik olarak önceki sürümüne geri döner. Bu, web sitenizin güncel kalmasını ve istenen değişiklikleri doğru zamanlarda yansıtmasını sağlar. Ek olarak, gelecekteki güncellemeleri kolaylaştırmak ve önceki sürümler arasında kolayca gezinmek için temel içeriğin birden çok sürümünü oluşturabilirsiniz.
2. Kampanya Yönetimi: İçerik hazırlamadaki bir "Kampanya", bir takvimde veya zaman çizelgesinde görüntülenebilen, kaydedilmiş planlanmış değişiklikler grubunu ifade eder. Hazırlama Panosu, planlanmış tüm güncellemelere genel bir bakış sunarak bu kampanyaları etkili bir şekilde yönetmenize olanak tanır. "Planlı güncelleme" olarak da bilinen her Planlanmış değişiklik , bir kampanya içindeki bireysel bir değişikliği ifade eder.

Nasıl çalışır

1. Temel İçerik Oluşturma: Temel içerik, herhangi bir kampanya olmaksızın bir varlığın varsayılan durumunu temsil eder. Sayfanın üst kısmındaki "Planlanmış Değişiklikler" bölümünün altındaki tüm içeriği kapsar. Temel içerik, planlanmış değişikliklere sahip devam eden bir kampanya zaman çizelgesinde çakışmadıkça etkin kalır.
2. İlk Kampanyayı Başlatma: İstenen başlangıç ​​ve bitiş tarihlerini belirterek ilk kampanyanızı oluşturun. Ucu açık bir kampanya için bitiş tarihini boş bırakın. İlk kampanya sona erdiğinde, orijinal temel içerik otomatik olarak geri yüklenir.
3. Sonraki Kampanyaları Ekleme: Her biri benzersiz bir zaman dilimine atanan ek kampanyalar oluşturabilirsiniz. Ancak, aynı öğeye yönelik kampanyaların çakışmadığından emin olun. Bu, gerektiğinde birden çok kampanyayı barındırmanıza olanak tanır.
4. Temel İçeriği Geri Yükleme: Tüm aktif kampanyalar bitiş tarihlerine ulaştığında, temel içerik otomatik olarak eski haline getirilir ve kampanyalar sona erdiğinde sorunsuz bir geçiş sağlanır.

Magento Commerce Content Staging'in gücünden yararlanarak, içerik güncellemeleriniz üzerinde hassas kontrol elde edersiniz ve çevrimiçi mağazanızın genel kullanıcı deneyimini kesintiye uğratmadan değişikliklerin zamanında yapılmasını sağlarsınız.

Magento PWA'da İçerik Hazırlamanın Sınırlamaları

Ne yazık ki, Magento PWA'da (Aşamalı Web Uygulaması) İçerik Hazırlamanın belirli yönleri, belirli çözümler gerektiren uyumluluk sorunları sunar.

Karşılaşılan yaygın sorunlardan biri, bir kampanya içindeki içerik değişikliklerini önizlemeye çalışırken hatalarla sonuçlanabilecek Kampanya Önizleme moduyla ilgilidir.

Benzer çözümlerin kategoriler, katalog fiyat kuralları, sepet fiyatı kuralları, CMS sayfaları, CMS blokları gibi diğer içerik türlerine de uygulanabileceği anlayışıyla bu yazımızda öncelikle Ürün içerik aşamalandırmasını ele alacağız.

Bildiğiniz gibi, Magento arka ucundaki içerik hazırlığı, önizleme içeriğini görüntülemek için bir iframe'e dayanır. Orijinal önizleme URL yapısı üç temel öğeyi kapsar: önizleme_mağazası, önizleme_url'si ve önizleme_versiyonu.

Örneğin, bir üründe yapılan değişikliğin aşağıdaki önizleme URL'sine yol açtığı aşağıdaki örneği göz önünde bulundurun:

URL bileşenlerinin dökümü:

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

Ancak bu URL'ler, aşağıdaki sorunlardan dolayı PWA vitrininde amaçlandığı gibi çalışmaz:

1. Eksik Yol: PWA vitrininde "katalog/ürün/görünüm/id/1/"ye erişmeye çalışmak, bu belirli URL için tanımlanmış bir yol olmadığı için 404 Bulunamadı sayfasına yol açar.
2. Veri Alma Zorlukları: PWA vitrinindeki veri alma işlemi, GraphQl sorgularına dayanır. Ne yazık ki, bu senaryoda, sorgulama için gerekli veriler mevcut değildir.
3. Yetkilendirme Anahtarı Gereksinimi: GraphQl API aracılığıyla ürün verilerine erişmek için bir yetkilendirme anahtarı zorunludur. Bu anahtar, hem kimlik doğrulama hem de yetkilendirme amaçlarına hizmet ederek istenen ürün bilgilerinin alınmasına olanak tanır.
4. Tutarsız Veri Alma: Şu anda, API aracılığıyla veri alınırken, hazırlama verileri yerine gerçek veriler döndürülür. Hazırlama verilerini elde etmek için, API isteğinde istenen önizleme sürümünün belirtilmesi esastır.

Bu sorunların ele alınması, Magento PWA'da İçerik Hazırlamanın sorunsuz entegrasyonunun önünü açacak, tutarlı önizleme deneyimleri sağlayacak ve vitrininizdeki çeşitli içerik türleri için etkili içerik yönetimini mümkün kılacaktır.

Kampanya Önizleme Modu Hatası Nasıl Çözülür?

Bu sorunu çözmek için uygulayabileceğiniz adımlar şunlardır:

1. Adım: Önizleme URL'sini kullanın

• Önizleme URL'sinin özelleştirilmesine izin veren bir eklenti oluşturun:

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

• URL'ye yönetici yetkilendirme anahtarı parametresini dahil etmek için yönetici kullanıcıyı kullanarak bir belirteç oluşturan Magento'nun belirteç oluşturma işlevini kullanabilirsiniz. Bu, içeriği önizlemek için uygun kimlik doğrulama ve yetkilendirme sağlar:

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

• Mevcut sorgularla çakışmaları önlemek için, Magento'da özellikle önizleme işlevini kullanmak için yeni bir GraphQL sorgusu oluşturun:

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

2. Adım: PWA vitrinini özelleştirin

• PWA vitrininizdeki önizleme sayfası için yeni bir rota ekleyin:

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

• Ürün Önizleme bileşeni için, Venia bileşenine başvurarak benzer bir ürün detay bileşeni oluşturabilirsiniz.

• Aşama verilerini almak için yeni bir GraphQl sorgusu kullanmamız gerekiyor.

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

Normal bir ürün GraphQL sorgusunda mevcut ürün verileri yerine hazırlama verilerini almak için şu adımları izleyin:

1. Magento_StagingGraphQl modülünü doğrulayın: Magento_StagingGraphQl modülünün kurulu olduğundan ve Magento bulut sunucunuzda doğru şekilde yapılandırıldığından emin olun. Bu modül, önizleme sürümünü kullanarak hazırlama verilerine erişim için destek sağlar.
2. Yetkilendirme anahtarını ve önizleme sürümünü istek başlığına dahil edin: Sorgu parametrelerini kullanmak yerine, istek başlığından Önizleme Sürümü alınmalıdır. GraphQL API çağrısı yaparken istek başlığına hem yönetici yetkilendirme anahtarını hem de önizleme sürümünü ekleyin.
3. Yetkilendirme anahtarını istek başlığında ayarlayın: Yönetici yetkilendirme anahtarını, yetkilendirme belirteci olarak istek başlığına ekleyin. Bu, hazırlama verilerine erişim için uygun kimlik doğrulama ve yetkilendirme sağlar.
4. İstek başlığında önizleme sürümünü ayarlayın: Uygun başlık anahtarını ve değerini kullanarak önizleme sürümünü istek başlığına dahil edin. Bu, Magento'ya belirtilen önizleme sürümü için karşılık gelen hazırlama verilerini alması talimatını verir.

İstek başlığına yetkilendirme anahtarını ve önizleme sürümünü dahil ederek, GraphQL API çağrısı, mevcut ürün verileri yerine istenen hazırlama verilerini alacaktır.

3. Adım: GraphQl önizlemesini özelleştirin

• app/code/Tigren/StagingGraphQl/etc/graphql/di.xml dosyasında desteklenen Sorgulara yeni bir sorgu eklemeniz gerekir.

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

• Son olarak, @magento/peregrine/lib/talons/Adapter dizinindeki useAdapter.js dosyasını sağlanan kodla güncelleyin:

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

Bu kod, işlem adının 'getProductDetailForPreviewProductPage' olup olmadığını kontrol etmek için bir koşul ekler. Koşul karşılanırsa ve gerekli değişkenler (preview_version ve yetkilendirme) mevcutsa, başlıklar buna göre güncellenir.

Bu kod değişikliklerini yaptıktan sonra güncellemeleri dahil etmek için PWA'nızı yeniden oluşturun.

Artık gerekli başlıkları GraphQL isteklerine dahil ederek PWA'nızdaki diğer hazırlama içeriğini güncellemek için bu çözümü uygulayabilirsiniz.

Son sözler

Kampanyaları Content Staging'de önizleyememek, Adobe Commerce PWA mağazalarını yönetirken can sıkıcı bir engel olabilir. Ancak, bu blog gönderisinde sağlanan bilgi ve çözümle donanmış olarak, artık bu sorunun üstesinden gelmek ve içerik hazırlamanın tüm potansiyelinden yararlanmak için araçlara sahipsiniz.

Adım adım talimatları izleyerek önizleme URL'sini özelleştirebilir, PWA vitrininizi özelleştirebilir ve sorunsuz bir önizleme deneyimi için hazırlama verilerinin alınmasını sağlayabilirsiniz. İçerik güncellemelerinizi doğru bir şekilde önizleme ve planlama yeteneği sayesinde, çevrimiçi mağazanızın kullanıcı deneyimini güvenle geliştirebilir ve dönüşümleri artırabilirsiniz.

İlgili Mesajlar:

Bir Magento PWA Oluşturmak Ne Kadar Sürer?

Magento 2 İçin Doğru PWA Temasını Nasıl Seçersiniz?

Magento PWA Geliştirme Yaşam Döngüsünün 7 Aşaması

Gelecekte Belirlenecek Magento PWA Geliştirme Eğilimleri