Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento

Membuat Theme Magento: Category Page, Bagian 1

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page Styling
Magento Theme Development: Category Page, Part 2

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Selamat sudah menyelesaikan theme home page baru anda, dan mari mulai dengan page atau halaman berikutnya. Dalam tutorial ini, kita akan mulai memodifikasi category page (halaman kategori) pada theme Magento kita.

Category page pada dasarnya terdiri dari empat bagian: toolbar, grid mode, list mode dan sidebar. Kita akan membahas tiga bagian pertama dalam artikel ini, dan kemudian di tutorial berikutnya, kita akan memodifikasi sidebar dan melakukan beberapa perbaikan di CSS.

Jika anda melihat category page dari theme kita, saat ini akan terlihat seperti berikut:

Category Page before editing

Sementara itu kita akan membuatnya terlihat seperti ini:

HTML design Category Page

Jika anda perhatikan, category page kita saat ini memiliki space kosong yang luas di sebelah kiri dan kanan. Kita perlu mencari tahu mengapa area content tidak mengambil cukup ruang. Mari kita lihat dulu template mana yang bertanggung jawab untuk merender halaman ini. Kita bisa melakukan ini dengan mengaktifkan template hints dari admin panel, seperti yang telah anda lakukan beberapa kali sebelumnya dalam seri ini.

Di sini kita menemukan bahwa ada three-column layout (tiga kolom layout)  yang menampilkan halaman ini, dan inilah alasan ada ruang kosong di sebelah kiri, karena tidak ada block yang ditugaskan di sidebar kiri.

Template Hints for Category Page

Agar page ini terlihat seperti desain HTML kita, kita akan mengubahnya menjadi dua column (kolom). Dari admin panel, meuju Catalog > Manage Categories > Custom Design > Page Layout dan ubah menjadi 2 columns with left bar.

Changing Page Layout

Sekarang halaman kita harus memiliki two-column layout (dua kolom layout) dengan sidebar di sebelah kiri, seperti kebutuhan design kita.

Seperti tujuan artikel ini, kita hanya akan mengubah area yang tepat (bukan sidebar), kita akan memulai proses editing dari toolbar. Dengan template hints aktif, kita akan memeriksa file phtml yang bertanggung jawab untuk melakukan rendering sehingga sekali lagi mengaktifkan template hints.

Seperti yang kita ketahui, ini adalah filenya: \template\catalog/product/list/toolbar.phtml.

Kita akan mengcopynya ke dalam theme yang baru, bandingkan dengan kode file HTML kita, lalu mulai membuat perubahan. Kode kita saat ini dari file toolbar.phtml terlihat seperti berikut:

Kita harus membandingkannya dengan kode HTML yang bertanggung jawab atas bagian toolbar, yaitu:

Kita akan mulai memodifikasi kode ini dengan memasukkan dynamic tag (tag dinamis) dan statement yang berbeda for dan if. Misalnya, untuk membuat link untuk mode grid dan list untuk mode view, kita akan menambahkan kode ini:

Kode ini pada dasarnya adalah iterate dari semua mode yang aktif (list dan grid), dan kemudian mendaftarkan tag anchor untuk masing-masingnya. Di sini, dengan sangat cerdas, kita telah menugaskan class dan title yang berbeda kepada mereka, dengan menggunakan variable $_label, yang akan berbeda untuk setiap mode-nya.

Demikian pula anda dapat memodifikasi bagian sort-by dan limiter anda sendiri dengan membandingkannya dengan file toolbar.phtml yang sebenarnya. Setelah dimodifikasi, kode akhir untuk file ini akan terlihat seperti berikut:

Dan jika kita me-refresh halaman sekarang, akan terlihat seperti ini. Semuanya berada di tempatnya, tapi masih ada kekurangan di bagian CSS, yang akan kita perbaiki di artikel berikutnya.

Toolbar after editing

Sekarang saatnya mengubah display product pada halaman ini. Product di sini dapat diperlihatkan dengan dua cara yang berbeda, yaitu mode list dan mode grid. Jika kita mengaktifkan template hints untuk mengetahui file yang bertanggung jawab atas bagian ini, kita akan melihat bahwa kode untuk mode grid dan list ditulis dalam file yang sama, yaitu frontend\rwd\default\template\catalog/product/list.phtml.

Kode list dalam file ini ada pada baris 44 sampai 116, yaitu:

Kita sekarang harus membandingkannya dengan kode list HTML di productlist.html dalam template HTML kita.

Memodifikasi kode ini cukup sederhana. Kita akan menggunakan baris inisialisasi ini:

Lalu kita akan menempatkannya loop di sekitar tag li:

Dan terakhir kita akan mengganti product name, price, description, link file image dan URL dengan dynamic tag atau tag dinamis. Kode akhir akan terlihat seperti ini:

Sekarang, kalau kita refresh page ini, kita akan melihat category page dalam mode list akan terlihat seperti ini. Saya tahu bukan itu yang kita inginkan, tapi semua kode HTML kita sudah berada di tempatnya, jadi sekarang kita hanya perlu memodifikasi CSS-nya, yang akan kita lakukan di tutorial berikutnya.

List Mode after editing

Sekarang masuk ke mode grid, kode untuk ini dari line 118 sampai 176 dalam file list.phtml yang sama.

Kode HTML terlihat seperti ini di file productgrid.html dalam template HTML kita:

Memodifikasi bagian ini akan sangat mirip dengan apa yang kita lakukan di bagian list. Pertama-tama kita akan melakukan beberapa inisialisasi, sama seperti pada file default tlist.phtml.

Selanjutnya kita akan me-wrap atau membungkus setiap item li di dalamnya untuk di loop untuk iterate atau pengulangan atas semua produk.

Terakhir, kita akan mengganti atribut pada product seperti product name, price, description, dll., dengan dynamic tag yang relevan. Anda dapat menemukannya dengan mudah dari file list.phtml yang sebenarnya.

Kode akhirnya akan terlihat seperti ini:

Sekarang jika anda me-refresh page atau halaman, mode grid akan terlihat seperti berikut:

Grid Mode after editing

Pada artikel ini, kita telah memodifikasi toolbar dan bagian list dan grid dari page ini. Di artikel selanjutnya kita akan memodifikasi sidebar, dan melakukan beberapa perbaikan style CSS. Pada akhir artikel berikutnya, category page kita akan terlihat sangat mirip dengan desain HTML.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.