WooCommerce Mağazası için Gutenberg ile ShopEngine Entegrasyonu

Yayınlanan: 2022-04-05

Nihayet bekleme bitti! ShopEngine artık Gutenberg blok düzenleyicinizle uyumludur. Daha önce ShopEngine widget'larına yalnızca Elementor penceresinden erişebiliyordunuz, değil mi?

Ama şimdi ShopEngine bunun ötesinde kullanılabilir. ShopEngine widget'larına Elementor aracılığıyla erişmenin yanı sıra, WooCommerce mağazası için Gutenberg'deki ShopEngine'i kullanabilirsiniz. Ancak Gutenberg'de bu widget'lar bloklar olarak görünecektir.

Nitekim, Elementor widget'larının ve Gutenberg bloklarının işlevleri aynıdır. O zaman, fark nerede? Fark uygulamada yatmaktadır. Elementor widget'ları için, çıktıyı görüntülemek için widget'ları belirlenen alanlara sürükleyip bırakmanız gerekiyordu. Ancak Gutenberg blokları için bloklara tıklamanız yeterlidir ve işiniz biter.

İçindekiler gizle
1 Gutenberg'e Genel Bir Bakış:
2 ShopEngine'i Gutenberg ile Neden Entegre Etmelisiniz:
3 Gutenberg'deki Önemli ShopEngine Bloklarından Bazıları:
3.1 Ürün Başlığı:
3.2 Ürün Listesi:
3.3 Ürün Açıklaması:
3.4 Ödeme Ödemesi:
3.5 Arşiv Ürünleri:
3.6 Sepet Tablosu:
3.7 Son Görüntülenen Ürünler:
4 Sarma:

Gutenberg'e Genel Bir Bakış:

Bir WordPress kullanıcısı olarak Gutenberg terimine aşina olmalısınız. WordPress blok düzenleyici olarak da bilinen bir WordPress içerik düzenleyicisidir. Günümüzde Gutenberg, kullanım kolaylığı nedeniyle WordPress kullanıcıları arasında en popüler WordPress editörüdür. Birçok WordPress Gutenberg eklentisi, 3. taraf geliştiricilerden de edinilebilir.

Önceden, insanlar başka bir WordPress editörü olan “Klasik Düzenleyici”yi kullanmaya daha alışkındı. Gutenberg'in ortaya çıkışından bu yana, insanlar blok düzenleyiciyi Klasik Düzenleyici'ye kıyasla daha fazla benimsiyorlar. Gutenberg'in özelliği, blok tabanlı içeriğidir .

Paragraf, resim veya düğme olsun, bu öğelerin her biri bir bloktur. Klasik Düzenleyici'den farklı olarak, bu blok tabanlı içerik düzenleyici, içeriğinizi daha fazla kontrolle değiştirmenize olanak tanır. Bu blok düzenleyicinin en iyi yanı, 3. taraf geliştiricilerin özel bloklar yerleştirmesine izin vermesidir.

Ve bundan böyle bu bilgilendirici blogda tam olarak buna odaklanacağız, ShopEngine'in bir yığın özelliği WooCommerce için Gutenberg'de hizmetinizde olacak. ShopEngine'in Gutenberg'deki özel bloklarını genişletmeden önce, ShopEngine'i neden WooCommerce için Gutenberg ile entegre ettiğimize ışık tutayım .

ShopEngine'i Gutenberg ile Neden Entegre Etmelisiniz:

ShopEngine başlangıçta yalnızca Elementor için tasarlandı. Bu, WooCommerce sayfalarınızı yalnızca Elementor için oluşturabileceğiniz anlamına gelir. Ama şimdi daha önce de belirttiğim gibi ShopEngine, Gutenberg ile entegre olduktan sonra bir adım öne çıktı.

ShopEngine Gutenberg entegrasyonu

Peki, ShopEngine'i WooCommerce için Gutenberg ile entegre etmemizi sağlayan şey neydi ? Bu soruyu cevaplamak için, size veri parçalarını sunmama izin verin-

gutenstats.blog'a göre, Gutenberg şimdiye kadar 76 milyon aktif kurulum aldı. Üstelik Gutenberg ile bugüne kadar 264,5 milyon yazı yazıldı.

Bu veri parçaları, ShopEngine'in ürün yelpazesini neden Gutenberg'e kadar genişlettiğimize herkesi ikna etmek için yeterli olduğunu düşünüyorum. Milyonlarca insan, içeriklerini geliştirmek için Gutenberg'i kullanıyor ve onların ShopEngine'in sunduğu etkileyici özellikleri kaçırmalarını istemiyoruz.

ShopEngine'in Gutenberg ile Entegrasyonunun birkaç nedeni daha:

Gutenberg'in sadece bir içerik editörü olmadığının altını çizmek isterim. Gutenberg projesi, yakın gelecekte blok düzenleyiciyi tam site düzenleme aracına dönüştürmeyi hedefliyor.

Buradaki fikir, WooCommerce sitenizin %100'ünü Gutenberg editörüyle tasarlamanıza izin vermektir. Bu olursa, Gutenberg'e olan talebin hızla artması muhtemeldir. Öyleyse, WooCommerce için ShopEngine'i Gutenberg ile entegre etmeye değer, değil mi?

  • Gutenberg ile içeriği gömmek için kısa kodlar kullanmanız gerekmez. Bunun yerine, gerekli sayfa öğelerini eklemek için blokları dağıtabilirsiniz.
  • Gutenberg, uyumluluk sorunları içermez, bu nedenle geliştiriciler, Gutenberg desteğini eklentilerine kolayca dahil edebilir.
  • Gutenberg hafif bir kod üretir ve aynı zamanda hızlı yüklenen bir araçtır.
ShopEngine İndirmeye Git

Gutenberg'deki Önemli ShopEngine Bloklarından Bazıları:

ShopEngine bloklarına ışık tutmadan önce, ShopEngine'in Elementor kullanıcılarına hitap eden WooCommerce mağaza sayfaları için 65+ widget , 13+ modül ve sayısız şablonla geldiğini açıklığa kavuşturmama izin verin. ShopEngine'in WooCommerce için Gutenberg ile entegrasyonundan sonra, artık Gutenberg'deki 45'ten fazla ShopEngine bloğuna erişebilirsiniz.

Gutenberg'deki ShopEngine blokları

WooCommerce mağazanız için bir şablon oluşturmak için seçtiğiniz sayfa türüne bağlı olarak, Gutenberg blokları buna göre görünecektir. Ayrıca Hızlı Görünüm, Varyasyon Renk Örnekleri, Ürün Karşılaştırma ve İstek Listesi gibi modüllere de erişim elde edeceksiniz.

WooCommerce mağazası için Gutenberg'deki ShopEngine bloklarından bazılarına bir göz atalım-

Ürün başlığı:

Ürün başlık bloğu, belirli bir ürün için tek bir sayfada görünür. Şablonunuzu oluşturmak için tek sayfa türünü seçtikten sonra, kenar çubuğundan Ürün Başlığı bloğunu tıklamanız yeterlidir.

Bundan hemen sonra, ürün başlığınız sayfada görünecektir. Sağ kenar çubuğundan başlık etiketini, hizalamayı, rengi ve tipografiyi değiştirebilirsiniz.

Ürün listesi:

Ürün listesi, WooCommerce mağazanızda sattığınız her tür ürünü gösterir. Ürün listesi bloğu, tek, mağaza, ödeme ve alışveriş sepeti sayfaları dahil tüm sayfa türlerinde görünür. Sayfa türünü seçtikten sonra açılır pencereden veya kenar çubuğundan ürün listesine tıklayın.

Gösterilecek ürünler için ürün kategorisini seçtiğinizden emin olun. Sağ kenar çubuğundan, ürün listesinin farklı öğelerini seçebilir ve özelleştirebilirsiniz. Sayfa başına ürün sayısını, etiketleri, satış rozetini göster/gizle, indirim yüzdesini vb. seçebilirsiniz.

Ürün Açıklaması:

Tek sayfa şablonu oluşturursanız, kenar çubuğunda ürün açıklama bloğu görünür. Ürün açıklamasının sayfanızda görünmesini sağlamak için ürün açıklaması bloğuna tıklayın. Açıklamayı özelleştirebilir ve ayrıca tipografiyi, rengi, hizalamayı vb. değiştirerek stilize edebilirsiniz.

Ödeme Ödemesi:

Elementor'daki Checkout Payment pencere öğesi gibi, Checkout Payment bloğu da Gutenberg'de çalışır. Ödeme sayfanız için şablon oluşturmaya giderseniz, "Ödeme Ödemesi" bloğunu görüntüleyebilirsiniz. Bundan sonra, WooCommerce mağazanız için ihtiyacınız olan ödeme bloğunu ekleyebilirsiniz.

İçerik stilini, ödeme yöntemlerini, düğmeyi vb. değiştirme seçeneklerine sahip olacaksınız. Onay kutusu konumunu, düğme rengini, tipografiyi, kenarlığı vb. değiştirebilirsiniz.

Arşiv Ürünleri:

Arşivlenmiş ürünler sayfası, yayınlanan tüm ürünleri tek bir yerde içerir. WooCommerce için Gutenberg'de arşiv sayfası için bir şablon oluşturmak için sol kenar çubuğuna gidin ve Arşiv Ürünleri bloğunu tıklayın. Envanterdeki tüm ürünler birbiri ardına görünecektir.

Arşiv ürünleri sayfası, düzen, içerik, sayfalandırma, derecelendirme vb. dahil olmak üzere çok sayıda segment içerir. Sayfa, ürün başlığı, ürün resmi, ürün fiyatı, ürün açıklaması, ürün alt bilgisi vb. gibi çok sayıda öğe içerir.

Sepet Tablosu:

Sepet tablosunda, ürün adı, fiyat, miktar, ara toplam ve toplam tutar dahil olmak üzere seçtiğiniz ürünlerin tüm ayrıntıları gösterilir. ShopEngine'in Sepet Tablosu bloğu ile, WooCommerce sepet sayfasındaki bir sepet tablosu aracılığıyla ürünlerinizle ilgili tüm bilgileri alıcılarınıza sergileyebilirsiniz.

İçeriği özelleştirmek ve sepet tablosunun farklı öğelerini stilize etmek için sağ kenar çubuğunda parametreler alacaksınız. Ürün üstbilgi ve altbilgi renklerini, kenarlık rengini, metin rengini değiştirebilir ve başlık, fiyat, miktar, toplam vb. dahil olmak üzere içerik bölümlerini uyarlayabilirsiniz.

Son görüntülenen ürünler:

ShopEngine'in Son Görüntülenen Ürünler bloğu ile, kullanıcılarınızın WooCommerce mağazanızda son zamanlarda göz attığı veya görüntülediği ürünleri sergileyebilirsiniz. En son görüntülenen ürünleri mağaza sayfasında, ürün sayfasında, sepet sayfasında vb. görüntüleyebilirsiniz.

Diğer bloklarda olduğu gibi, son görüntülenen ürünlerle ilgili parametreleri sağ kenar çubuğunda görebilirsiniz. Parametrelerden yararlanarak, gösterilecek ürün sayısını belirleyebilir, satış rozetlerini gösterebilir/gizleyebilir, sütun ve satır aralığını ayarlayabilir, ürün görsellerinin yüksekliklerini ayarlayabilirsiniz, vb.

sarma:

Peki, ShopEngine'i WooCommerce için Gutenberg ile entegre etme hamlemize ne dersiniz? WooCommerce mağazası için Gutenberg'de ShopEngine bloklarını dağıtma deneyiminizi bize bildirin.

WooCommerce için Gutenberg entegrasyonu hakkında olumlu veya olumsuz herhangi bir geri bildirimde bulunabilirsiniz. Entegrasyon sürecimizi kolaylaştırmak için sizden öneriler almaktan da memnuniyet duyarız. Ancak ShopEngine ile Gutenberg entegrasyonu ile ilgili çalışmalarımız devam etmektedir. Kısa süre sonra projemiz bitecek.

ShopEngine'ı Şimdi Alın

ShopEngine ile bir e-ticaret web sitesinin nasıl oluşturulacağını bilmek ister misiniz? Aşağıdaki bağlantıya tıklayarak bloga gidin-

ShopEngine ile e-ticaret sitesi nasıl kurulur?