Özel Magento 2 Widget'ları Nasıl Oluşturulur

Widget'lar, Magento 2 mağaza yöneticilerinin CMS sayfalarına ve bloklarına statik/dinamik içerik eklemesine izin vererek birçok işlevsellik ve basit uygulama sağlar. Widget'lar, Magento 2'nin herhangi bir CMS bloğuna eklenebilen yeniden kullanılabilir bileşenlerdir.

Bu nedenle, Magento 2 geliştiricilerinin ve mağaza yöneticilerinin programlama hakkında fazla bir şey bilmeden ön uçta etkileşimli arayüzler ve özellikler eklemelerine izin verirler. Tabii ki, bir widget oluşturmak için Magento'da yollarını bilmeleri gerekiyor.

Bu makalenin amacı, özel widget'lara vurgu yaparak Magento 2'de widget'ların nasıl oluşturulacağını göstermektir.

Magento 2 Widget'ları

Magento 2, günümüzün önde gelen e-ticaret platformlarından biri olan Magento'nun en son sürümüdür. Widget'lar, özellikle işlevsellik açısından Magento 2'de önemli bir rol oynar. Magento widget'ları, daha fazla kullanıcı tarafı işlevselliği sunmanın yanı sıra, yöneticilerin CMS sayfalarına ve bloklarına statik veya dinamik içerik eklemesine yardımcı olur.

Ancak, teknik açıdan... Magento widget'ı nedir?

Bir Magento 2 widget'ı, bir dizi gelişmiş yapılandırma seçeneğiyle tasarlanmış bir Magento uzantısıdır. Daha fazla esneklik ve kontrol nedeniyle, Magento Yönetici paneli aracılığıyla bilgi ve pazarlama içeriği sağlamak için kullanılırlar. Magento 2 widget'larının avantajlarından biri, onları sitenin herhangi bir yerinden “arayabilmeniz”dir.

Widget'lar ayrıca yöneticilerin Magento ön ucuna kodlama yapmak zorunda kalmadan (aslında kod yazmayı bile bilmeden) etkileşimli arayüzler ve özellikler eklemesine izin verir.

Magento 2 Çoklu Widget Türleri Sunar

Uygulamaya geçmeden önce, Magento 2'de desteklenen standart widget yelpazesine daha yakından bakalım:

• Son Karşılaştırılan Ürünler — Favori e-ticaret sitelerinizde ürünlere göz atarken bu widget'ı gözlemlemiş olmalısınız. Bu pencere öğesi, son görüntülenen veya karşılaştırılan ürünleri bir katalog sayfasının kenar çubuğunda görüntülemek için kullanılır. Temaya bağlı olarak mağazanızda da görünebilirler. Önemli noktalardan biri, her bir blokta listelenen ürün sayısının yapılandırılabilmesidir.
• Siparişler ve İadeler — Çevrimiçi olarak bir ürün satın aldığınızda, siparişlere ve iadelere hızlı erişim sağlayan olmazsa olmaz bir widget vardır. Bir kullanıcı, sipariş edilen veya iade edilen ürünleri incelemek isterse, Sipariş Kimliği, Son Faturalandırma, Sipariş Bul, E-posta vb. gibi gerekli bilgileri doldurabilir.
• Katalog Ürün Listesi — Bu, yaygın olarak kullanılan başka bir pencere öğesidir; Hemen hemen her sitede olduğu gibi, e-ticaret sitelerindeki "özellikli ürün" bölümlerine herkes aşinadır. Öne çıkan ürünler, genellikle ürün tanıtımı amacıyla ana sayfaya yerleştirilir. Belirli ürün, fiyat, özellikler ve sepete ekleme, istek listesine ekleme ve bir karşılaştırma özelliğine ekleme gibi seçenekler gibi kısa ayrıntılarla gösterilir.
• Katalog Ürün Bağlantısı — Katalog Ürün Bağlantısı pencere aracının temel amacı, yöneticilerin ilgili ürünler, çapraz satışlar, yukarı satışlar ve gruplandırılmış ürünler dahil olmak üzere ürünler için bağlantıları yönetmesine olanak sağlamasıdır. Katalog ürün bağlantı sayfasını ziyaret ettiğinizde, bir giriş ile başlatılan farklı katalog kategorileri göreceksiniz. Burada, katalog ürün bağlantı atama, katalog ürün bağlantı özellikleri, katalog ürün bağlantı kaldırma, katalog ürün bağlantı türleri ve daha fazlası gibi çeşitli alt bağlantılara sahip katalog ürün bağlantılarını bulacaksınız.
• Katalog Kategori Bağlantısı - E-Ticaret web sitelerinde, özellikle ürün tabanlı web sitelerinde, katalog kategorisi bağlantı widget'ları sıkıntısı çekmeyeceksiniz.
• Özel Blok Pencere Öğesi — Katalog bölümlerini veya müşterilerin yararlı bulabileceği diğer bilgileri görüntülemek için blokları, pencere öğelerini ve özel sayfaları birleştirmek mümkündür.

Bunlar, kullanıcı deneyimini geliştirmek ve mağazaya işlevsellik eklemek için kullanılabilir. Bloklar ve widget'lar, çoğu e-ticaret web sitesinin önemli unsurlarıdır. Kullanıcıların içeriği hızla oluşturmasına ve kontrol etmesine olanak tanır ve aşağıdakiler gibi şeyler yapmak için kullanılabilir:

• Kenar çubuklarına dinamik/bilgi blokları ekleyin
• CMS sayfalarına banner ekleyin
• Özel menüler ekleyin
• Etkileşimli kullanıcı arayüzleri ekleyin

Magento 2 Özel Widget'ları İçin Durum

Herhangi bir web sitesi veya web sayfasının sorunsuz çalışması ve daha fazla ziyaretçinin ilgisini çekmesi için çok sayıda işlevselliğe ihtiyacı vardır ve e-ticarette ilgi çekici bir kullanıcı deneyimi oluşturmak bir zorunluluktur. Özel Magento 2 widget'larının devreye girdiği yer burasıdır ve yapmaları gereken de budur.

Widget'lar, mağazaya ekleyebileceğimiz daha küçük kod kümeleridir. Widget'lar, dinamik koda basit bağlantılar kullanarak, ziyaretçilere yardımcı olmak ve deneyimlerini iyileştirmek için uyarlanmış her türlü yararlı veriyi görüntüleyebilir. Düşük maliyetli, yeniden kullanılabilir widget'ları kullanarak etkileşimi artırma yeteneği, açıkçası çok şey ifade ediyor, ancak bazen bu yalnızca kullanıma hazır bir widget'ı seçip eklemekten ibaret değil.

Magento 2'deki Özel Pencere Öğesi işlevini kullanmak, kendi pencere öğesi şablonlarımızı oluşturmamıza olanak tanır. Özel bir pencere öğesi, bazen CMS blokları veya sayfalarının içine kaliteli içerik düzenlemek veya eklemek için daha da iyi bir yol sunabilir.

Ancak, özel widget'lara geçmeden önce, Magento 2'deki widget'lar için standart bir kullanım durumunu incelememiz gerekiyor. Temel ve yaygın olarak kullanılan bir şeye bir göz atalım, örneğin:

Widget Kullanarak Ana Sayfaya Yeni Ürün Listesi Nasıl Eklenir

Bu basit pencere öğesi, web sitesinde gerektiğinde yeni bir ürün listesi eklememize olanak tanır ve Magento 2'de yeni ürünlerin listelenmesinin çeşitli yolları vardır.

Ana sayfaya bir Magento ürün listesi eklemek için basit bir süreci izlemeniz yeterlidir:

• Magento 2 yönetici sayfasına giriş yapın ve İçerik > Widget'a gidin

• Widget Ekle düğmesine tıklayın. Bundan sonra, Tür ve Tasarım seçeneklerini ve temalarını seçmemiz gereken Ayarlar sekmesine yönlendirileceğiz.

• Ön uçta görüntüleyeceğimiz Katalog Yeni Ürün Listesini zaten seçtiğimiz aşağıdaki ekran görüntüsünü görebiliriz.

• Tasarım Teması seçeneği olarak LUMA'yı seçtik.

• Her iki değeri de seçtikten sonra, vitrin özelliklerini doldurmamız gereken ikinci adıma geçmeliyiz. Şimdi Widget Başlığı ve Mağaza Görünümü gibi Widget Başlığı ve Vitrin Özelliklerini ayarlamamız gerekiyor. Toptal Yeni Ürün Listesi ve Tüm Mağaza Görünümlerini kullanıyoruz.

• En önemli kısım, bu widget'ın nerede görüneceğini bize bildirecek olan Düzen Güncellemeleri bölümüdür (örneğin, ana sayfa, listeleme sayfası, ödeme sayfası, vb.). Kapsayıcının görüneceği bir alan tanımlamak da mümkündür; örneğin, üstbilginin altında, altbilginin üstünde, altbilgi vb.

Düzen Güncellemeleri ayarları size aşağıdaki seçenekleri sunar:

• Görüntüleme Açık: Belirtilen Sayfa veya Tüm sayfalar.
• Sayfa: CMS Ana Sayfası
• Kapsayıcı: Ana İçerik Alanı
• Şablon: Burada, yeni ürünleri hangi tarzda görüntülemek istediğinizi seçebilirsiniz. Izgara modu veya Liste modu

Belirtilen Sayfa seçeneğini seçtikten sonra, widget'ı belirli bir sayfada görüntülememize izin vererek özellikleri ayarlamaya devam edebiliriz. Burada, CMS Ana Sayfasını seçmemize izin veren Sayfa açılır menüsüne sahibiz. Ardından, widget'ı belirli bir bölümde görüntülemek için kullanacağımız kapsayıcıyı ve şablonu seçmemiz gerekiyor.

Son olarak, widget seçeneklerini içeren son sekmeye geçiyoruz. Burada, ne tür ürünlerin görüntüleneceği gibi Koşul ayarlayabilir veya ürün sayısına sınırlamalar ekleyebiliriz vb.

Tüm Ürünler'i seçersek en son eklenen ürün bu bölümde görüntülenecektir. Yeni Ürünler'i seçersek, bu bölümde sadece "Yeni" olarak işaretlediğimiz ürünler görüntülenecektir. Müşterilerimizin birden fazla liste için gezinmeyi kontrol etmesine izin vermek istiyorsak, Görüntüleme Sayfası Kontrolünü “Evet” olarak ayarlamamız gerekir. “Evet”i seçtiysek, listeye ürün sayısını girmek gerekir.

Görüntülenecek Ürün Sayısı bölümünde Yeni Ürünler bölümünde kaç adet ürün görüntülenebileceğini tanımlayabiliriz. Ayrıca gerekirse Önbellek Ömrü ayarlarını değiştirebiliriz.

Şimdi bu widget'ı kaydetmeli ve Magento 2 önbelleğini temizlemeliyiz. Bu, yöneticiden veya komut satırından yapılabilir. Önbelleği temizlemek için aşağıdaki komutu kullanabiliriz:

php bin/magento cache:clean and php bin/magento cache:flush

Ardından yeni ürünleri ana sayfada görebileceğiz.

Magento 2'de Özel Widget Nasıl Oluşturulur

Şimdi, Magento 2 için özel widget'ların nasıl oluşturulacağını öğreneceğiz. Özel widget'lar, CMS blokları veya sayfalarına içerik eklemenin ve düzenlemenin en iyi yolunu sunar, çünkü gereksinimlerinize uyacak şekilde uyarlanabilirler.

Temel bilgilerle başlayalım. Modül oluşturmayı hepimiz biliyoruz, değil mi? Magento 2'de özel modüllerin oluşturulmasına aşina değilseniz, süreci derinlemesine kapsayan harika bir eğitimimiz var.

Şimdi, Magento 2'de özel widget'lar oluşturma adım adım sürecine geçelim.

Öncelikle, ad alanı ve modül klasörleri gerektirecek yeni bir modül oluşturmamız gerekiyor. Bu örnekte, ad alanı için Toptal ve modül adı için CustomWidget kullanacağız. O halde, her zamanki gibi composer.json , registration.php ve etc/module.xml ile başlayalım.

app/code/Toptal/CustomWidget/composer.json

Modülümüzle aslında Composer kullanmıyor olsak da, bu dosya her çalıştırdığımızda Composer tarafından yüklenecektir.

Şimdi modülümüzü Magento'ya kaydetmemiz gerekiyor, bu nedenle aşağıdaki konumda register.php oluşturmamız gerekiyor: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Şimdi son kayıt dosyası olan module.xml dosyasını oluşturacağız.

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

Kayıt adımını tamamladıktan sonra widget.xml yapılandırma dosyasını oluşturuyoruz.

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

Yukarıdaki kodda, widget'ın çağrıldığı her yerde görüntülenecek parametreler olarak Title ve Content alıyoruz. <widget> etiketi, Toptal\CustomWidget\Block\Widget\Samplewidget blok sınıfını içerir. Bu sınıf Block/Widget/Samplewidget.php içinde yavaşlatılır. Sınıf, widget'larımıza hangi şablonun kullanılacağını bildirir.

Sonraki kod parçacığı, pencere öğesi için bir bloğun nasıl tanımlanacağını gösterir; şablonumuzu burada ayarlayacağız. Nasıl göründüğüne bir bakalım.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget yukarıdaki kod olarak bildirildi. Bu dosyada $_template değişkeninin içine özel bir şablon dosyası atadık.

Ardından, widget şablonumuzu neyin içerdiğini göreceğiz.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Burada, widget parametrelerinden değerin nasıl alınacağını görebiliriz. Basit:

$this->getData('widgettitle');

ve

$this->getData('widgetcontent');

Nihai sonucumuz nedir? Size Magento Admin'de nasıl göründüğünü göstereyim:

Şimdi bu widget'ı kaydetmeli ve önbelleği temizlemeliyiz. Daha önce belirtildiği gibi, bu, php bin/magento cache:clean ve php bin/magento cache:flush kullanılarak admin veya komut satırından yapılabilir.

Bu basit modülü buradan indirebilirsiniz. Açıkçası tam bir Magento 2 widget şablonu değil, ancak yine de bir öğrenme yardımı. Daha fazla kaynağa ihtiyacınız varsa veya Magento'da nispeten yeniyseniz, resmi Magento 2 belgeleri başlamak için bariz bir yerdir.

Son olarak, oldukça faydalı bulduğum birkaç kişisel geliştirici blogundan bahsetmek istiyorum. Alan Storm, Magento öğrenme konusunda muhtemelen en öğretici içeriğe sahiptir ve bence Alan Kent'in bloguna da göz atmalısınız.

Widget'lar: Büyük Resmin Çok Önemli Bir Parçası

Bu makalenin amacı, Magento 2 pencere öğesi geliştirme ve özel pencere öğesi oluşturmayı kapsayan adım adım temel bir eğitimle başlayarak, Magento 2'de pencere öğesi oluşturma kılavuzu sağlamaktı. Açıkça ikincisinin hayranıyım, çünkü özel çözümler daha fazla esneklik ve işlevsellik sağlama eğiliminde.

Magento widget'ları çok önemli ön uç işlevsellik sağlar, bu nedenle akıllı özel widget'ların bir sonraki Magento projenizi bir sonraki seviyeye taşımanıza yardımcı olabileceğini söylemek zor değil. Bu, daha fazla işlevsellik uygulamamıza, farklı widget'lar kullanarak ana sayfaya farklı türde öğeler eklememize ve nihayetinde geliştiricilere daha fazla yaratıcı özgürlük sağlamamıza olanak tanır.

Ancak mesele sadece kullanıcı deneyimini ve dönüşümleri iyileştirmek ya da harika görünen bir tasarım yapmak değildir. Bunların tümü, herhangi bir müşteri için açıkça bir önceliktir, ancak daha küçük, daha az belirgin kazanımlar vardır. Örneğin, Magento widget'ları yönetici tarafında da çok fazla zaman ve baş ağrısı tasarrufu sağlayabilir ve her müşteri aynı zamanda adam-saatten tasarruf etmek ister.

Ancak bu, bu makalenin kapsamı dışındadır. Amacım, hızlı bir teknik genel bakış, takip etmesi kolay bir Magento 2 widget öğreticisi sağlamaktı, yatırım getirisi ve pazarlamayı tartışmak değil.