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

Membuat Theme Magento: Category Page, Bagian 2

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Category Page, Part 1
Magento Theme Development: Product Page, Part 1

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

Pada artikel sebelumnya di category page, kita telah mengedit tampilan toolbar, grid dan list. Dalam artikel kedua ini untuk meng-customize category page, kita akan meng-customize sidebar dan melakukan beberapa perbaikan CSS.

Pertama-tama, kita akan menambahkan beberapa komponen di sidebar, sehingga kita bisa men-styling mereka. Di sini, untuk tujuan demonstrasi, kita hanya akan menambahkan satu atau dua komponen kemudian memodifikasi mereka. Hal itu akan memberi anda pemahaman yang cukup tentang bagaimana anda dapat memodifikasi komponen sidebar lainnya juga.

Untuk saat ini kita hanya akan menambahkan 'compare products' dan sebuah sidebar banner ke dalam sidebar. Kita akan melakukan itu dari kode local.xml. Jika anda ingat dari artikel pertama dari seri ini, anda dapat menemukan file local.xml di folder layout pada file theme anda.

Kami akan menambahkan reference ke bagian kiri, lalu menambahkan banner dan meng-compare product module di dalam sidebar, dengan menggunakan kode di bawah ini:

Gunakan itu hanya sebagai kode referensi, anda bisa menambahkan lebih banyak module atau banner menggunakan prosedur yang sama.

Jika kita melihat design HTML kita, kita akan melihat bahwa semua komponen dirancang dengan baik, terutama bagian heading, yang memiliki banyak warna di dalamnya.

Sidebar Module

Sedangkan design kita saat ini masih sedikit kurang, walaupun kita bisa memodifikasi design melalui CSS, tapi kita perlu memodifikasi HTML untuk menambahkan class untuk berbagai warna dalam heading.

Sidebar Before editing

Untuk memodifikasi HTML, pertama-tama kita akan mengaktifkan emplate hints, dan mencari tahu bahwa file yang bertanggung jawab untuk itu adalah template\catalog/product/compare/sidebar.phtml.

Sekarang kita akan membuka file sidebar.phtml ini, dan bandingkannya dengan kode HTML.

Design kode HTML kita untuk sidebar terlihat seperti ini:

Kita dapat melihat bahwa heading memiliki tag h3 dengan class title, dan memiliki tag strong di sekitar bagian heading, yang memiliki warna yang berbeda.

Untuk ini, kita akan mengganti bagian div title dengan ini:

Refresh halaman, dan seharusnya terlihat sangat mirip dengan design HTML kita sekarang. Anda bisa menambahkan dan menonjolkan komponen sidebar lainnya dengan cara yang sama.

Setelah selesai mengedit file phtml, mari kita mulai memperbaiki style CSS.

Kita akan mulai memperbaiki style dari bagian atas. Komponen pertama yang perlu diperhatikan adalah heading page. Seperti yang bisa kita lihat, ini masih cukup jauh, dan tidak sesuai dengan persyaratan HTML kita.

Heading before styling

Kita akan menambahkan baris ini ke dalam file CSS yang baru untuk memberikan style pada heading.

Di sini kita baru saja memberikannya font text yang bagus, line height, text align, background image, dll. Kita juga sudah membuat background transparent tanpa border. Seharusnya itu terlihat seperti ini sekarang:

Heading after styling

Selanjutnya kita perlu memodifikasi bagian toolbar. Untuk itu kita akan menambahkan style ini ke dalam file CSS kita:

Di sini kita baru saja menspesifikasikan beberapa background image, width, height, dll, dan itu sedikit banyak akan mencapai hasil yang diinginkan. Halaman akan terlihat seperti ini:

Toolbar after styling

Sekarang, mari kita mulai mengedit bagian product dalam tampilan grid. Saat ini halaman terlihat seperti berikut:

Grid View before styling

Kita hanya perlu membuat beberapa penyesuaian style width dan hover. Price color perlu juga perlu diubah. Kami akan melakukan semua itu dengan menambahkan baris CSS ini:

Sekarang bagian grid akan terlihat seperti ini:

Grid View after styling

Pada bagian terakhir kita perlu memperbaiki bagian product dalam mode list. Saat ini terlihat cukup kacau, tapi jangan khawatir, beberapa baris CSS akan mengatur semuanya dengan benar.

List View before Styling

Agar terlihat bagus, kami akan menggunakan style CSS ini:

Di sini kita telah mengatur width dari product image, float bagian price ke sebelah kanan, memberikan keseluruhan bagian background yang bagus, efek border dan hover, dan sedikit memodifikasi button atau tombolnya. Halaman atau page akan terlihat seperti ini:

List view after styling

Dengan semua yang sudah dilakukan, page catalog anda seharusnya sudah terlihat bagus dan mendekati dengan persyaratan desain HTML kita. Anda mungkin memerlukan beberapa penyesuaian CSS lainnya, tapi terlepas dari itu anda sudah siap.

Pada artikel berikutnya dari seri ini, kita akan mulai mengedit halaman product detail.

Tolong berikan saran dan masukan anda di bagian komentar. Kita akan menantikannya.

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.