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

Membuat Theme Magento: Product Page, Bagian 2

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

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

Dalam artikel seri Magento Theme Development ini, kita akan melanjutkan menyelesaikan product page (halaman produk) dari artikel sebelumnya. Kita akan mengedit file phtml yang bertanggung jawab untuk merender bagian media, bagian related product, dll.

Sekarang, mari mulai menambahkan tag dinamis pada image, price, description, dll., Di dalam div product-detail yang mulai kita edit di artikel sebelumnya.

Kita akan mulai dengan menambahkan tag dinamis pada image. Jika kita melihat HTML yang telah diedit, kode untuk media dimulai dari line 19 sampai 28. Kita akan mengganti semua ini dengan satu baris kode:

Seperti yang bisa kita lihat pada file sebenarnya dari view.phtml, baris yang satu ini mengambil semua kode untuk menampilkan image.

Jadi kode yang baru pada line 18 akan terlihat seperti ini:

Selanjutnya kita akan mengganti product name pada line 22 dengan dynamic code ini:

Pada line 24, kita akan mengganti price code dengan ini:

Di dalam class pull-right pada line 29, kita akan menambahkan kode untuk menampilkan review (ulasan) dan product availability (ketersediaan produk ). Jadi kode baru pada line 29 akan terlihat seperti ini:

Selanjutnya kita akan mengganti penulisan kode description yang tertulis pada baris 33 dengan dynamic tag ini:

Jika kita melihat file HTML yang sedang kita edit, hal berikutnya yang kita perhatikan adalah kotak drop-down untuk pemilihan product options. Kita akan mengganti kode itu di dalam div size-input dengan dynamic code berikut:

Sekarang, kode ini tidak akan secara otomatis men-generate option untuk product, tapi juga akan menampilkan tombol 'add to cart' dan sharing option. Jadi, kita juga bisa menghapus kode berikut, yang muncul setelah .size-input div:

Sekarang jika kita melihat page/halamannya saat ini, semua berada di tempatnya dan bekerja dengan baik. Kita hanya perlu memodifikasi kode bagian dalam dari beberapa elemen seperti area images, bagian related products, dll. Dan terakhir kita hanya perlu memoles CSS, dan page/halaman kita akan siap.

Tanpa penundaan lebih lanjut, mari mulai mengedit kode untuk bagian image. Ingat kita mengganti semua HTML image hanya dengan satu baris kode: <?php echo $this->getChildHtml('media') ?>. Baris kode ini menampilkan kode dari file template\catalog\product\view\media.phtml: Anda juga dapat memverifikasi ini, dengan mengaktifkan template hints dan memeriksa dari tempat kode untuk bagian image berasal.

Sekarang setelah kita menentukan file yang bertanggung jawab untuk menghasilkan kode ini, mari copy file itu dari theme rwd default ke theme baru kita, dan mulai mengeditnya. Kode untuk file media.phtml terlihat seperti ini:

Pertama-tama, kita akan mengcopy kode HTML dari bagian gambar ke file media.phtml yang baru saja dicopy:

Sekarang, kita akan mulai memodifikasi kode ini untuk memasukkan kode dinamis di tempat yang sesuai, dengan membandingkannya dengan file media.phtml yang sebenarnya.

Kita akan mulai dengan menambahkan baris-baris ini di bagian atas file:

Kita akan mengganti div dengan class preview-small dengan kode ini:

Demikian pula kita akan mengganti div dengan class thumb-image dengan kode ini:

Dan di akhir kode, kita akan menambahkan baris ini:

Jadi kode dari file tersebut akan terlihat seperti ini di akhir:

Sekarang kita hampir selesai dengan bagian imagenya. Pada akhirnya kita akan memperbaiki beberapa masalah CSS, dan ini akan membuatnya terlihat sangat dekat dengan desain HTML kita.

product page getting ready

Berikutnya adalah memperbaiki bagian related product (produk terkait). Kita dapat melihatnya dengan mengaktifkan template hints bahwa bagian page ini berasal dari file: template\catalog\product\list\related.phtml.

Related products section before editing

Seperti yang mungkin bisa anda duga, langkah selanjutnya adalah menyalin file itu ke folder theme baru kita, dan kemudian mulai mengeditnya.

Kita akan membuat file baru, dan menyalin kode HTML dari bagian related product dari tema HTML kita. Di sini kita hanya akan menyimpan satu contoh produk, seperti yang kita tau, kita akan sedang me-looping-nya melalui file phtml kita. Kode yang akan kita copy akan menjadi seperti ini:

Sekarang kita akan mulai membuatnya dynamic (dinamis) dengan menempatkan dynamic tag ke dalamnya sambil membandingkannya dengan file related.phtml yang sebenarnya.

Kita akan menempatkan seluruh kode tersebut ke dalam tag if ini:

Selanjutnya kita akan menempatkan ini untuk loop tepat setelah div row:

Selanjutnya kita akan mulai menempatkan dynamic tag dari product name, price, description, url, dll, di div product, seperti yang kita lakukan saat mengedit produk di home page.

Seluruh kode untuk file ini setelah diedit akan terlihat seperti ini:

Sekarang kita hampir selesai dengan pengeditan file phtml untuk product page. Kita hanya perlu memperbaiki beberapa masalah CSS, dan halaman kita akan siap. Saat ini halamannya terlihat seperti berikut:

product page before CSS

Kita sudah selesai dengan sebagian besarnya. Sekarang kita hanya perlu mengedit CSS untuk membuat perubahan terakhir di halaman ini, yang akan kita lakukan di artikel berikutnya, yang juga akan menjadi artikel terakhir dalam seri ini. Seiring dengan perubahan pada CSS untuk page ini, saya akan menjelaskan bagaimana anda dapat membuat perubahan di page (halaman) lain dari theme itu sendiri dengan menggunakan teknik yang telah anda pelajari dalam seri ini.

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.