Belajar Twig Untuk Templating jejualan.com

Twig adalah sebuah template engine, twig semacam framework yang digunakan untuk memudahkan programer dan designer dalam membuat template.

Programer membuat sistem yang akan ada di dalam template, sedangkan designer mendesign bermacam tampilan yang mempunyai sistem core yang sama.

Konsep twig untuk designer sendiri adalah memudahkan pemanggilan data dengan menampilkan array yang diminta, sehingga data yang tambil bukan data statis, melainkan data dinamis seperti apa yang telah disediakan oleh programmer.

Untuk menampilkan variable yang sudah disediakan kita menggunakan {{nama variable}}

Dan untuk array yang isinya banyak bisa kita panggil juga misal array bernama content, dan array[0] dinamai layout, maka untuk memanggilnya kita gunakan {{namaArray.namaVariable}} → {{content.layout}}

Pemanggilan file dari direkori lain seperti css atau js, kita biasanya menggunakan baseurl() yang telah di set oleh programmer, disini akan ditulis seperti ini 

{{ ‘style.css’|asset_url }} | asset_url berisi link mengarahkan kita ke folder asset, sedangkan style.css adalah nama file css yang dipanggil.

Jejualan sendiri merupakan situs web yang menyediakan berbagai macam template untuk keperluan penjualan online. Dalam template ini ada fitur fitur yang selalu ada dalam setiap design template

Jejualan memiliki struktur direktori seperti berikut

Pertama kita akan membahas apa isi dari masing masing direktori

  1. Welcome

Welcome adalah halaman yang tampil sebelum memasuki halaman utama, seperti landing page, yang mungkin isinya bukan berupa content, melainkan hanya pintu untuk memasuki halaman online store sesungguhnya.

File welcome biasanya memiliki css yang berbeda dengan file css yang dipanggil di dalam file layout.

  1. Layout

Layout adalah tampilan utama atau kerangka dari tampilan yang akan ditampilkan. Jadi bisa dikatakan sebagai “index.php”-nya  kalo dalam localhost.

Layout ini adalah sebuah sebuah file dengan sistem memanggil file file lain yang ada di dalam direktori blocks

Dalam hal ini bisa kita lihat kerangkanya, sebagai backbone ada site nav, site-banner, page, copy.
Sebagai contoh dalam site nav, ada {% include “blocks/menu-top.html” %}

adalah sintak untuk memanggil file yang ada dalam direktori blocks yang bernama menu-top.html, begitu juga dengan file file lain yang dipanggil.

  1. Blocks

Blocks, dari namanya sendiri bisa kita ketahui kalo blocks berisi komponen yang serupa dan terkait yang sudah dipackage dalam blocks. Programmer telah memisahkan blocks blocks yang biasa dibutuhkan dalam membangun sebuah online store. sehingga kita bisa panggil saja file ini sesuai apa yang kita butuhkan untuk ditampilkan, file file yang ada dalam block adalah sebagai berikut

maka akan ketahuan apa yang butuh untuk dipanggil, ketika kita butuh menu. maka tinggal memanggil file menu-top.html dengan sintak yang sudah kita bahas di awal.

mari kita bahas terlebih dahulu apa yang sebenarnya ada di dalam menu-top.html.

————————————   pembahasannya   —————————————

{% if menu_top|length > 0 %}

itu berarti jika isi menu_top berisi lebih dari 0 maka akan ditampilkan.

{% for item in menu_top %}

itu berarti mengulang banyaknya <li></li> yang ada dalam database

{{ item.title }}

adalah variable yang ditampilkan

{% endfor %}

{% endif %}

  1. Assets

assets adalah folder gudang, dimana tempat menyimpan semua resource seperti file gambar, file css, file javascript, sehingga mudah dalam pemanggilan kalau dijadikan satu direktori. untuk pemula lebih disarankan untuk meletakkan file tidak di dalam direktori buatan sendiri.

yang juga menjadi catatan disini adalah proses penggantian thumbnail tema yang kita buat untuk ditampilkan di halaman admin bisa kita ganti dengan cara mereplace file atas nama preview.jpeg dengan gambar preview baru.

  1. Sinppets

snippet adalah (menurut google) istilah pemrograman untuk sebagian kecil dari re-usable source code atau teks. Biasanya, unit operatif yang didefinisikan secara formal ini seringkali digunakan untuk memperjelas makna dari sebuah fungsi yang “kacau”, atau untuk meminimalkan pemakaian kode berulang yang umum bagi fungsi-fungsi lain.

Jadi semacam template yang bisa kita gunakan kapan aja, karena saking seringnya digunakan maka dibuatlah folder snippet ini oleh para programmer, sehingga ketika ingin menggunakannya tinggal dipanggil saja.

untuk lebih jelasnya, saya contohkan penggunaan salah satu elemen yang ada di folder ini. Pagination.html adalah falisitas yang digunakan ketika item yang ditampilkan melebihi batas yang telah ditentukan, misal pada halaman home item yang ditentukan dibatasi 12 item untuk kepentingan keindahan, padahal ada total 200 item yang ada, makan akan tampil halaman seperti gambar berikut ini

dan pagination ini sering sekali digunakan, untuk menunjukan bahwa sebenarnya ada banyak item yang tersedia, tetapi hanya ada beberapa yang bisa ditampilkan, untuk melihat silahkan ke halaman berikutnya.

  1. Setting

Setting.html, seperti nama file ini, setting berfungsi untuk membuat preferensi untuk mengatur apa saja yang akan ditampilkan di halaman toko online yang biasanya berbeda template satu dengan template yang lain.

berikut ini conoh isi dari file setting.html

file ini adalah file html dengan struktur tabel, berupa baris baris yang nantinya akan membentuk form isian di halaman admin seperti berikut

setiap baris yang kita buat di html membuat kolom di halaman admin sesuai dengan apa yang kita butuhkan, untuk menampilkannya juga sederhana, kita bisa melakukan pemanggilan value berdasarkan id

maka hasil yang akan kita dapatkan di tampilan online shop menjadi sebagai berikut

mengganti judul cs menjadi customer support.

  1. Setting.json

setting json adalah file yang digunakan untuk menyimpan nilai dari setting.html, untuk ditampilkan di halaman web, isi dari file setting.json adalah sebagai berikut

Leave A Comment?

You must be logged in to post a comment.