Wix Blocks Eğitimi: Geri Sayım Widget'ı Oluşturma
Şablonda neler var?
- Bir geri sayım widget'ı. Widget'ın tasarımını tamamlamanız ve işlevlerini/özelliklerini kodlamanız gerekir.
- Tamamlamanız ve geri sayım widget'ınıza eklemeniz gereken bir kayıt widget'ı.
- Widget'ınızın işlevselliğini implemente etmek için kullanabileceğiniz bazı genel yardımcı programlar.
- E-posta bildirim işlevlerini implemente etmek için kullanabileceğiniz bazı arka uç kodları.
1. Adım | Widget'ınızın Tasarımını Tamamlayın
- Şablonu açın.
- Widget'lar ve Tasarım altından Countdown'a tıklayın.
- Üst çubuktaki Öge Ekle simgesine tıklayın.
- Metin'i seçin. 48px Title metin kutusunu widget'ınıza sürükleyip bırakın.
- Metni Düzenle'ye tıklayın ve metni SS olarak değiştirin.
- Denetçi panelini kullanarak metin rengini beyaz yapın ve metni ortalayın.
- Metin kutusunu seçin ve kullanarak Seconds etiketinin yukarısındaki kılavuz karesine sürükleyin.
- Kenarlarda kullanarak metin kutusunu yeniden boyutlandırın.
2. Adım | Widget'ınızın API Özelliklerini Ekleyin ve Tanımlayın
- endDate: Geri sayımın sıfıra ulaşacağı bitiş tarihini tanımlar. Site tasarımcıları bu özellik sayesinde widget'ın bitiş tarihini kendi sitelerinde değiştirebilirler.
- emailId: Bildirimler için kaydolan kullanıcılara gönderilecek e-posta mesajını tanımlar.
Widget ögelerinize kimlik atayın
- Metin kutusuna tıklayın.
- Özellikler ve Olaylar panelindeki ID alanına metin kutusu kimliğini (
secondsTxt
) girin. Diğer ögelere zaten birer kimlik atanmıştır.
"endDate" ve "emailId" özelliklerini tanımlayın
- API panelinde Yeni Özellik Ekle'ye tıklayın.
- Özellik adını (
endDate
) girin. - Özellik türünü (Tarih ve Saat) seçin. (Örneğimizde tarih aa/gg/yyyy ABD biçiminde gösterilmektedir).
- Bir varsayılan tarih girin (widget'ınızı editörlerden yükleyen site tasarımcıları bu tarihi değiştirebilir).
- Özellikler bölümünün üzerine gelin ve simgesine tıklayın.
- Tetiklenen e-posta için başka bir özellik oluşturun ve
emailId
olarak adlandırın. Bu herhangi bir varsayılan değeri olmayan Metin türünde bir özellik olmalıdır.
3. Adım | Widget'ınızı çalıştırmak için kod ekleyin
Yardımcı programlarınızı içe aktarın
- Herkese Açık / Arka Uç menüsüne tıklayın.
- Herkese Açık altından dateUtils.js seçeneğine tıklayın. Dosya kod panelinde açılır.
Kodununuzu yeni işlevinizi içerecek şekilde değiştirin
Geri sayım widget'ınızın sayımı güncellemesi için updateTime()
işlevi oluşturun. Yeni işleviniz şöyle görünmelidir:
1$widget.onPropsChanged(function () { }); function updateTime() { const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate)); $w('#daysTxt').text = days.toString(); $w('#hoursTxt').text = hours.toString(); $w('#minutesTxt').text = minutes.toString(); $w('#secondsTxt').text = seconds.toString(); }
Ayrıca widget'ın kalan süreyi ne sıklıkta güncelleyeceğine ilişkin bir aralık belirlemeniz gerekir.
Bunun için aşağıdaki kodu onReady()
işlevinizin içine ekleyin. Böylece widget'ınız saniyede bir güncellenir.
1$w.onReady(function () { updateTime(); if (wixWindow.viewMode !== "Editor") { setInterval(updateTime, 1000); } });
Widget'ınızı önizleyin ve API özelliklerini test edin
- Önizle'ye tıklayın. Widget'ınız bitiş tarihine kadar saniye bazında geri sayım yapmalıdır.
- API Özelliklerini Test Et'e tıklayın. Daha önce belirlediğiniz varsayılan değerin bulunduğu bir panel görünür.
- Widget'ın yanıt verip vermediğini ve yeni bitiş tarihine doğru geri sayım yapıp yapmadığını kontrol etmek için bitiş tarihini değiştirin.
4. Adım | Özel panel oluşturun ve kodlayın
Özel panel oluşturun
- Üst çubuktaki Paneller sekmesine tıklayın.
- Panel Oluştur'a tıklayın.
- Panelinize bir ad verin. Bu örnekte: "My Settings".
- Panel Oluştur'a tıklayın.
- + Öge Ekle'ye tıklayın.
- Metin Girişi'ni seçin. Bu öge bitiş tarihi içindir.
- Özellikler ve Olaylar simgesine tıklayın. ID alanına metin girişi kimliğini girin:
endDateInput
- Metin ögesini seçin ve Ayarlar'a tıklayın.
- Alan Başlığı alanına "Bitiş Tarihi" yazın.
- Varsayılan Metin alanındaki metni silin.
- Yer tutucu metni "Bitiş Tarihi" olarak değiştirin.
- Bir ayırıcı ekleyin.
- Ayarlar'a tıklayın. Bölüm Başlığı alanına bir başlık girin. Bu örnekte: "Triggered email".
- Başka bir Metin Girişi ögesi ekleyin. ID alanına metin girişi kimliğini girin:
endDateInput
- Metin ögesini seçin ve Ayarlar'a tıklayın.
- Alan Başlığı alanına "E-posta Kimliği" yazın.
- Varsayılan Metin alanındaki metni silin.
- Yer tutucu metni "E-posta Kimliği" olarak değiştirin.
Özel panelinize kod ekleme
Panel ögelerinin widget'ınızla etkileşime girmesini ve editörde eylemler gerçekleştirmesini sağlamak için kodunuzdaki Velo wix-widget
modülünü kullanabilirsiniz.
Widget API'sini kullanmak için wixWidget
dosyasını wix-widget
modülünden içe aktarın.
Aşağıdaki kodu onReady()
işlevinizin öncesine ekleyin.
1import wixWidget from 'wix-widget';
Değerler değiştiğinde widget'ınızın güncellenmesini istiyorsunuz. Bunun için onChange
etkinlik kaydı oluşturmanız gerekir. Ayrıca bazı asenkron işlevleri kullanacağınız için onReady ()
işlevinize async
eklemelisiniz.
onReady()
işleviniz şöyle görünmelidir:
1$w.onReady(async function () { const { endDate, emailId } = await wixWidget.getProps(); $w('#endDateInput').value = endDate; $w('#emailIdInput').value = emailId; $w('#endDateInput').onChange(e => { wixWidget.setProps({ endDate: e.target.value }); }); $w('#emailIdInput').onChange(e => { wixWidget.setProps({ emailId: e.target.value }); }); });
5. Adım | Widget'ınızı yapılandırın
Özel panelinizi widget'ınızın eylem çubuğuna ekleyin
- Üst çubuktaki Yapılandırma sekmesine tıklayın.
- Geri sayım widget'ınıza tıklayın. Bir eylem çubuğu görünür.
- Ayarlar'a tıklayın.
- Eylem Düğme Ayarları'nı seçin. Ana Eylem Ayarları paneli açılır.
- Açılır listeden My Settings özel panelinizi seçin.
6. Adım | İkinci bir widget (iç widget) ekleyin ve kayıt mantığını implemente edin
Kayıt widget'ınızı geri sayım widget'ına ekleyin
- Tasarım sekmesinde geri sayım widget'ınıza tıklayın.
- Diğer Eylemler simgesine tıklayın ve Widget Ekle'yi seçin.
- Registration'a tıklayın. İç widget'ınız geri sayım widget'ınızın ortasında görünür.
- İç widget'ınızı geri sayım widget'ınızın alt bölümüne sürükleyin ve sığacak şekilde uzatın.
- Özellikler ve Olaylar panelindeki ID (kimlik) bilgisini
registration
olarak değiştirin.
Uygulama koduna kayıt mantığını implemente edin
Kullanıcı kayıt kodunu, şablonda yüklü olarak bulunan contactUtils.js
yardımcı programını kullanarak ana widget'a (geri sayım widget'ına) implemente edin. İlgili kullanıcı wix-crm
API'si üzerinden koleksiyonunuza bağlanır.
Kullanıcının girdiği bilgileri koleksiyonunuza yönlendiren bu kod, koleksiyonu oluştururken kullanacağınız yardımcı programı kullanır. Kodda getSubscriptionsCollectionName()
ifadesini görebilirsiniz.
- Yeni bir asenktron işlev oluşturun.
onSubmit
olarak adlandırın. İşlev createContact yardımcı programını kullanır.
Kodunuz şöyle görünmelidir:
1 async function onSubmit({ email }) { const contact = await createContact(email); wixData.insert(getSubscriptionsCollectionName(), { endDate: new Date($widget.props.endDate), emailId: $widget.props.emailId, contactId: contact.contactId }); }
2
onSubmit etkinliği için kayıt oluşturun
onReady()
içine, updateTime()
işlevinizden sonra, aşağıdaki kodu ekleyin:
1$w('#registration').onSubmit(onSubmit);
7. Adım | Uygulamanızı oluşturun ve bir isim uzayı verin
Ana sürümünüz
- Oluştur'a tıklayın.
- Uygulamanız için bir isim uzayı girin ve İleri'ye tıklayın.
- Ana Sürüm'ü işaretleyin ve Oluştur'a tıklayın.
- Sürüm 1.0 Oluşturuldu mesajı alırsınız. Uygulama üzerinde çalışmaya devam etmek için Tamam'a tıklayın.
8. Adım | Widget'ınıza koleksiyon ekleyin
Şablonda Herkese Açık / Arka Uç menüsündeki collectionUtils.js içinde getSubscriptionsCollectionName()
adlı bir yardımcı program yüklü olarak bulunur. Bu koleksiyonun tam adını oluşturur, böylece kodda her referans verişinizde uygulama isim uzayını eklemeniz gerekmez.
Koleksiyon yardımcı programınızı yapılandırın
- Herkese Açık / Arka Uç altından collectionUtils.js seçeneğine tıklayın.
- Uygulamanızın isim uzayını ekleyin.
1
2const NAMESPACE = '@mywixaccount/my-app-namespace'; export function getSubscriptionsCollectionName() { return `${NAMESPACE}/subscriptions`; }
Koleksiyonunuzu oluşturun
- Veri Tabanları simgesine tıklayın.
- + Koleksiyon Oluştur'a tıklayın.
- Koleksiyonunuza anlamlı bir ad verin. Bu örnekte: Abonelikler.
- Oluştur'a tıklayın.
Koleksiyonunuza alanlar ekleyin
- Alan Ekle simgesine tıklayın.
- Alan Türü açılır menüsünden Tarih'i seçin.
- Alan Adı alanına endDate girin. Bu kullanıcıların kaydolabileceği son tarih olacaktır.
- Kaydet'e tıklayın.
- Tetiklenen e-posta için Metin alanı ekleyin ve emailId olarak adlandırın.
- Başka bir Metin alanı ekleyin ve contactId olarak adlandırın. Bu alanda kayıtlı kullanıcıların iletişim bilgileri saklanacaktır.
- Son olarak bir Boolean alanı oluşturun ve notified olarak adlandırın. Bu abonelerin yalnızca bir kez bildirim almalarını sağlar.
Koleksiyon izinlerini ayarlayın
- Veri Tabanları menüsünde koleksiyonunuzun yanındaki Diğer Eylemler simgesine tıklayın.
- İzinler ve Gizlilik'i seçin.
- İçerik ekleyebilir açılır menüsüne tıklayın.
- Herkes'i seçin.
- Kaydet'e tıklayın.
9. Adım | Uygulamanızı Wix Editor'da siteye yükleyin
- Uygulamanızı oluşturduktan sonra web sitenizi açın.
- Uygulamalar simgesine tıklayın.
- Özel Uygulamalar'a tıklayın. Tüm uygulamalarınızın bir listesi görünür.
- Mevcut Uygulamalar listesinden uygulamanızı seçin.
- Uygulamayı Yükle'ye tıklayın.
- Öge Ekle simgesine tıklayın.
- Uygulama Widget'ları sekmesine tıklayın.
- Widget'ınıza çift tıklayarak siteye ekleyin.
E-posta kimliğini ayarlayın
- Üst çubuktaki Site menüsünden Kontrol Panelim'i seçin.
- Geliştirici Araçları sekmesindeki Tetiklenen E-Postalar'a gidin.
- Başla'ya tıklayın.
- Konu satırını girin.
- Editör araçlarını kullanarak e-postayı tasarlayın.
- Kaydet ve Yayınla'ya tıklayın.
- Gönderen Adı ve Yanıt E-Postası bilgilerini ekleyin ve Kaydet'e tıklayın.
- Tamam'a tıklayın.
- Tekrar Kaydet ve Yayınla'ya tıklayın. Kaydolan herkese gönderilmesi için tasarladığınız e-postayla ilişkilendirilmiş bir kimlik kodu alırsınız.
- Bu kodu özel panelinizdeki E-posta Kimliği alanına girin.
Abonelere bildirim göndermek için Wix Editor'da arka uç kodunu kullanın
Bildirim işlevinizi çağırın
- Wix editöründe Herkese Açık / Arka Uç altındaki Arka Uç menüsünden Yeni Web Modulü'ne tıklayın.
- Adı
backend.jsw
olarak girin. - Sitenizin kod bölümünde arka uç işlevini backend.jsw altına aktarın.
Kodunuz şöyle görünmelidir:
1import { notify } 'myWixId/my-application-name-backend';
Şimdi sitenizin kod bölümünde backend.jsw
içinde invokeNotify dışa aktarma işlevini oluşturun.
Kodunuz şöyle görünmelidir:
1export function invokeNotify() { return notify (); }
- Arka Uç bölümünde Ekle simgesine tıklayın.
- Zamanlanmış işler ekle'ye tıklayın. Sitenizin kod bölümünde jobs.config altına aşağıdaki kodu ekleyin. Bu örnekte bildirim işlevi, saatte bir olmak üzere, her tam saati 10 dakika geçe çağrılmaktadır.
1{ "jobs": [{ "functionLocation": "/backend.jsw", "functionName": "invokeNotify", "description": "", "executionConfig": { "cronExpression": "10 * * * *" } }] }
10. Adım | Uygulamanızı test edin
- Sitenizi yayınlayın.
- E-posta bildirimi almak için kaydolun.
- Editöre geri dönün ve koleksiyonunuzu kontrol edin.
- Yeni bir aboneniz olduğunu görürsünüz. Ayrıca, bildirim e-postası gönderildiğinde bildirim alanında bir onay işareti görünür.