Biliyorsunuz şirket olarak No-Code aşkımızı olabildiğince sık dile getiriyoruz… Webflow Designer/Developer’lardan oluşan özel ekibimiz Quicksilver ile son dönemde müşterilerimize sunduğumuz hizmetin kalitesini Webflow Expert ortaklığı aşamasına yükselterek bir kademe daha artırdık!
Webflow'la henüz tanışmadıysanız "Görsel Web Geliştirme Platformu: Webflow" adlı bülten içeriğimizi mutlaka inceleyin :)
Webflow her ne kadar no-code bir tool olsa da, her no-code tool gibi kısıtları mevcut. Quicksilver ekibi olarak bu kısıtları kesinlikle engel olarak görmeyip challenge olarak kabul ediyoruz! Son karşılaştığımız challenge ile kullanıcı deneyimi için no-code dünyasında ileriye doğru bir adım daha attık!
Userspots.com üzerinde Collection List (CMS) olarak ürettiğimiz Rehber yazılarımızda kullanıcı deneyimini artırmak için sayfanın sağında yer alan eğitim modülünü içeriğimizin akışı sırasında okuyucularımıza göstermek istedik.
Webflow'da içeriğimizi Rich Text olarak oluşturduğumuz için CMS’e bağlı bu alanın içerisine modül yerleştirmek ne yazık ki pek mümkün görünmüyordu. Modülü yerleştirmek için 2 seçeneğimiz vardı… Ya içeriği ikiye bölecektik ve tüm rehber yazılarını tekrar düzenleyecektik -ekipte ufak çaplı bir isyan çıkmasına neden olacağı için bu seçeneği tercih edemezdik- ya da low-code yeteneklerimizi ortaya döküp bu işi Javascript ile çözecektik… Nitekim benim ve Emre’nin uzun uğraşlarımız sonucunda öyle de oldu.
Artık Webflow’da istediğimiz bir modülü, CMS’e bağlı bir Rich Text içeriğinin istediğimiz alanına, tamamen CMS üzerinden kontrol ederek kopyalayabiliyoruz! Ne yaptığımızı canlı sitede görmek isterseniz Anket rehber yazımızı inceleyebilirsiniz.
Adım adım size nelerle karşılaştığımızı anlatmak ve aynı senaryoya ihtiyacınız olduğunda size zaman kazandırmak istiyorum.
Bu gibi engellerde sorunu temelinden başlayarak parça parça ele almak çözüme ulaşmayı hızlandıracaktır. Bu nedenle yapmak istediğimiz işlemi en basit şekilde tanımlayarak başladık.
Sayfa içerisindeki bir modülü Rich Text içine kopyalamak istiyoruz. Peki bunu nasıl yapabiliriz? Tabi ki modüle ID tanımlayıp JavaScript ile tanımlı ID’den modülü çekmemiz gerekiyor. Burada Emre’ye ihtiyaç duyuyoruz -Emre Quicksilver ekibinin yazılımcısı- Emre bana hemen bir kod yazarak ID tanımladığımız modülün kopyasını Rich Text içerisine yerleştirmem için yardımcı oldu. Bu kadar kolay olacağını zannetmiştik ama hayal kırıklığı kapıyı çalıyordu ve aşağıdaki manzarayla karşılaştık…
En azından modülü kopyalayabildiğimiz için mutluyduk. Şimdi yapmamız gereken sorunun nedenini tespit edip düzeltmekti.
Buradaki ana problem modülü Rich Text içerisine kopyaladığımız için artık Rich Text’in CSS’inin, kopyaladığımız modülün CSS’ine override olmasıydı, yani modül artık Rich Text içerisindeki bir element gibi davranıyordu ve onun still özelliklerini kullanıyordu. Koda bir kaç satır CSS eklemesi yaparak bunu çözebileceğimizi düşündük fakat bunun Rich Text içeriğini de bozacağını fark ettiğimiz için CSS’i Webflow üzerinden düzenlemenin daha mantıklı ve stabil çalışacak bir karar olduğu sonucuna vardık.
Çözüm olarak kopyalayacağımız modül için Rich Text’in CSS’i ile beraber responsive çalışacak bir tasarım yapmamız gerekiyordu. Bu modülü çalıştıktan sonra Webflow içinde gizledik ve Emre modülü kodla istediğimiz yere taşıdıktan sonra görünür olmasını sağlayan bir kod eklemesi yaptı ve sonunda istediğimiz görüntüye kavuştuk!
Modülü istediğimiz gibi yerleştiriyorduk fakat bu modülü sürekli aynı yerde konumlandıramazdık. Her rehber içeriği birbirinden farklı, alakasız bir alanda içeriği kesmek okuyucunun deneyimini olumsuz etkileyeceğinden bu konuya da bir çözüm bulmalıydık. Modül için en uygun konumu sadece içerik editörü seçebilirdi.
Burada Webflow’un çok sevdiğimiz özelliği devreye giriyor... Webflow’da CMS template sayfasına eklediğimiz kod içerisine Collection’ımızın içinden belirlediğimiz bir Field’ın verisini çekebiliyoruz. Bu sayede template sayfasını ufak değişikler için yüzlerce satır kod ile doldurmak yerine, gerekli verileri CMS’ten çekerek içeriğe göre özelleştirebiliyoruz!
Webflow’un bu tatlı özelliğini kullanarak kodu güncelledik ve artık editörlerimiz, kopyaladığımız modülü istedikleri yere sadece CMS üzerinden konumunu(sıra numarasını) belirterek yerleştirebiliyorlar.
Aşağıda kullanıdığımız kodu ve sizin nasıl kullanabileceğinizin açıklamasını bulabilirsiniz.
Aşağıdaki kodu template sayfa ayarında bulunan “before </body>” alanına yapıştırmanız ve adımları takip etmeniz yeterli olacaktır.
<script>
var c = document.getElementById("richtext-id").childElementCount;
var number=0;
var c = document.getElementById("richtext-id").childNodes;
var c = document.getElementById("richtext-id").childNodes;
var itm = document.getElementById("hidden-banner");
var cln = itm.cloneNode(true);
cln.classList.add("board");
c[cms-field].appendChild(cln);
</script>
<style>
.board {display: flex;}
</style>
1. "richtext-id" gördüğünüz alanlara, Webflow Template sayfanızda CMS’e bağlı Rich Text’inize tanımlayacağınız ID’yi tırnak içerisinde yazmanız gerek.
2. "hidden-banner" gördüğünüz alanlara, Webflow içerisinde hazırlayıp gizlenmiş şekilde yayınlayacağınız modüle tanımlayacağınız ID’yi tırnak içerisinde yazmanız gerek. (Rich Text içerisine yerleştirmek üzere -responsive- çalıştığınız modül.)
3. “cms-field” gördüğünüz alana, CMS’te sıra numarasını belirleyeceğiniz field’ı bağlamanız gerekiyor(sayfa ayarlarında veya embed element içerisinde sağ üstte bulunan “add field” butonuna tıklayarak bağlantıyı yapabilirsiniz.). Bağlantı tamamlandığında aşağıdaki gibi görünecek;
(Bu bağlantıyı, sayfa ayarlarından yapabilmek için Collection Template sayfasında çalışıyor olmanız; static bir sayfada yapmak için Embed elementinizin bir collection list içerisinde yer alması gerekiyor.)
4. Rich Text içerisine yerleştireceğiniz modülün Display: hidden olduğundan emin olduktan sonra sitenizi publish edebilirsiniz.
Yeni challenge’larda görüşmek üzere!
Önemli not: Userspots'un Webflow servisi sayesinde web sitenizde karşılaşacağınız bu gibi engelleri atlatmak için Quicksilver ekibimizden destek alabilirsiniz. Hatta ekibimiz hayalinizdeki web sitesini sıfırdan tasarlayabilir! Detaylar servis sayfamızda.
.jpg)
