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

Membuat Theme Magento: Product Page, Bagian 1

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

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

Setelah kita menyelesaikan home page dan category page, dalam tutorial ini kita akan mulai mengedit halaman terpenting ketiga dari situs eCommerce: yaitu product page. Pertama mari kita membuka product page, dan lihat tampilannya sekarang dan kita menginginkannya terlihat seperti apa.

Product page dalam desain HTML kita terlihat seperti ini:

HTML design of product page

Halaman produk kita saat ini terlihat seperti berikut:

Product Page before editing

Untuk mulai mengeditnya, kita akan melakukan langkah yang sama seperti yang telah kita lakukan lusinan kali sejauh ini, yaitu mengaktifkan template hints untuk mencari tahu file template mana yang bertanggung jawab untuk merender halaman ini.

Enabling template hints

Seperti yang bisa kita lihat, halaman itu adalah kompilasi dari lebih selusin file, tapi untungnya kita tidak perlu mengedit ini semua. Kita hanya perlu mengedit tiga atau empat file tersebut, dan selebihnya kita akan memodifikasi style untuk membuatnya terlihat seperti design kita, tanpa mengotak-atik file phtml.

Jika anda melihat lebih dekat, keseluruhan struktur bagian product berasal dari file \template\catalog\product\view.phtml. Saya telah menunjukkannya melalui tanda panah pada gambar di atas. File ini menyediakan struktur terluar dari semua komponen dan bagian dalamnya berasal dari template lain, tetapi kita akan mengedit yang ini terlebih dahulu.

Kita akan menyalin file view.phtml ini ke dalam theme baru kita, dan mulai mengeditnya. Saat ini kode dari file ini terlihat seperti berikut:

Sekarang kita harus memeriksa kode HTML kita, dan kita akan meletakkan semua kode HTML kita ke file view.phtml ini dan kemudian mulai mengeditnya. Kode saat ini dari file details.html dalam file design HTML kita seperti ini (saya hanya menyalin kode untuk bagian produk tidak termasuk header, bagian footer, dll).:

Saya tahu kodenya sangat banyak, dan mungkin membuat anda takut. Tapi jangan khawatir, karena seperti yang akan anda lihat saat kita mulai menempatkan dynamic tag (tag dinamis) di dalamnya, kode tersebut akan mulai menghilang dengan cepat, dan kita tidak perlu khawatir tentang sebagian besarnya.

Sekarang kita akan mulai mengedit kode HTML ini dengan memasukkan dynamic tag dari file view.phtml aktual kita.

Pertama-tama, kita akan menambahkan baris ini di bagian atas, untuk melakukan beberapa inisialisasi:

Dan kemudian tutup div product-view di akhir file (baris 314):

Selanjutnya kita akan wrap atau membungkus div product details di dalam element form, seperti pada file view.phtml yang sebenarnya. Jadi, kita akan menambahkan baris ini di dalam div product-details di baris 10:

Demikian juga, sekarang kita akan menutup form ini, dan juga mengcopy JavaScript ini dari view.phtml pada baris 77:

Pada langkah berikutnya, di dalam div tab-box (mulai dari baris 129), hapus semua kode yang ada, dan salin kode tab berikut dari view.phtml (sekitar 100 baris kode diganti dengan beberapa baris ini). Untuk memastikan bahwa tab JavaScript tetap berfungsi dengan baik, kita akan menambahkan tab-box di dalam div class tab saat ini, jadi kode baru akan terlihat seperti ini:

Dengan semua yang dilakukan, sekarang kita akan memasukkan tag <?php echo $this->getChildHtml('related_products') ?> di dalam div hot-products, setelah menghapus kode yang ada, sehingga terlihat seperti ini pada baris 166:

Lihat bagaimana sekitar 150 baris kode diganti hanya dengan tiga baris ini? Mari save semuanya dan lihat bagaimana halaman tersebut berjalan sejauh ini. Jika anda melakukan segalanya dengan benar, seharusnya terlihat seperti berikut:

Product page after editing viewphtml

Mungkin terlihat kacau, tapi percayalah, kita semakin dekat dengan tampilan halaman yang kita inginkan. Pada artikel berikutnya, kita akan mengedit file yang bertanggung jawab untuk menampilkan bagian images, related products, dll., Dan kita akan melakukan beberapa perbaikan styling, dan product page kita akan siap.

Pada akhirnya, izinkan saya mengulangi bahwa potongan besar kode yang ditunjukkan di atas mungkin mengintimidasi anda pada awalnya, namun begitu anda mulai mengganti kode dengan tag dinamis yang sesuai, anda akan segera menyadari bahwa pengeditan ini tidak terlalu sulit.

Pada artikel berikutnya, kita akan menyelesaikan sisa halaman ini dengan mengedit file phtml lainnya.

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.