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

Magento Theme Development: Home Page, Bagian 3

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

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

Setelah kita setengah jalan meng-customize home page, selanjutnya kita perlu memodifikasi content atau isi home page. Jika kita melihat desain HTML kita, bagian content pada home-page memiliki satu heading dan sebuah carousel untuk latest products (produk terbaru). Ada widget Magento yang bisa kita gunakan untuk menampilkan latest products di home page. Sebenarnya, jika kita melihat bagian current home-page kita, sudah ada widget latest products yang aktif di dalamnya, namun kita perlu memodifikasinya agar sesuai dengan kebutuhan desain kita.

Jika kita melihat content dari home page kita dengan membuka halaman Admin Panel > CMS > Pages > Madison Island > Content, kita akan melihat bahwa hanya ada satu baris kode PHP (selain beberapa tag style), yaitu .:

Jadi, pada dasarnya semua content home-page berasal dari template ini (yang hanya merupakan template untuk menampilkan produk-produk baru). Kita akan meng-copy file ini dari theme RWD ke tema baru kita, di catalog/product/widget/new/content/new_grid.phtml, dan mulai mengeditnya agar terlihat seperti desain HTML kita. Jika kita melihat kode saat ini dari file tersebut, ini dia:

Saat kita melihat kode HTML kita untuk bagian ini, tampilannya seperti berikut:

Jadi, kita akan mulai dengan memasukkan dynamic tag ke dalam HTML ini. Alasan saya menunjukkan current code (kode saat ini) dari file ini adalah agar anda dapat menemukan dynamic tag (tag dinamis) yang diperlukan dari kode tersebut, dan memasukkannya ke dalam HTML.

Kita tidak harus membuat perubahan pada struktur div, jadi tahap pertama yang perlu diubah adalah tag h3:

Kita perlu mengganti static text (statis teks) Hot dan Products dengan tag Magento $this, sehingga Magento nantinya dapat menerjemahkannya sesuai dengan user preferences. Sehingga, baris ini akan menjadi seperti berikut:

Baris berikutnya yang perlu diubah adalah tag image, di mana kita perlu mengubah path yang relevan dari image source. Saat ini terlihat seperti berikut:

Kita akan mengubahnya menjadi seperti ini:

Di sini dynamic tag ini akan mengambil small image yang sebenarnya dari produk yang berukuran 236 x 357 px. Selanjutnya, kita perlu mengubah link Add to Cart:

Kita akan mengubahnya menjadi seperti ini:

Kode ini memiliki dynamic URL (URL dinamis) untuk halaman rincian produk, dan hanya menampilkan 'Add to Cart' jika produk tersedia. Jika tidak maka akan tampil 'Out of Stock'. Terakhir, kita akan memperbarui price dan name product, dengan mengganti baris ini:

Dengan ini:

Sekarang tampilan single product kita sudah siap, tapi untuk meng-iterate (pengulangan) dari semua new product, kita harus menyertakan item div kita dalam satu loop, jadi kita akan menambahkan baris ini di bagian atasnya:

Dan baris ini di ujungnya untuk mengakhiri loop:

Jadi kode lengkap untuk file itu akan menjadi seperti berikut:

Refresh home page anda sekarang. Bagian ini seharusnya sudah berjalan sempurna dengan bagian new products yang bergaya, yang akan terlihat seperti ini:

Latest Product Carousal

Sekarang kita perlu memodifikasi footer sebelum kita menyelesaikan home page. Jika kita melihat desain HTML kita, footer memiliki empat bagian. Yang pertama menunjukkan 'Our Brands' (brand kita), yang kedua menunjukkan subscribe box (kotak berlangganan) dan link media sosial, yang ketiga menunjukkan beberapa URL, dan yang keempat hanya pemberitahuan copyright.

Footer Sections

Bagian keempat sudah hadir dalam theme kita, jadi kita hanya perlu memodifikasi content dan style-nya, tapi tiga komponen lainnya harus kita tambahkan ke theme kita.

Untuk menambahkan komponen, kita akan membuat Static Block baru dari admin panel dan memasukkan content kita ke sana. Jadi, kita akan menuju ke Admin Panel > Static Blocks > Add New Block, dan add a new block untuk bagian Our Brands. Kita akan mengubah Block title menjadi 'Our Brands', menetapkan identifier ke 'our_brands', pilih store view dari 'All Store Views', dan letakkan ini di bagian content:

Jika anda melihat lebih dekat pada bagian ini, itu adalah kode yang sama seperti yang ada di HTML, kita baru saja mengubah relative path dari image, sementara secara manual mengupload new image dari WYSIWYG editor. Save block tersebut, dan mulai membuat block lain untuk bagian signup.

Untuk block kedua ini, kita akan menggunakan block title 'Above Footer'. Untuk identifier kita akan menggunakan 'above_footer', dan untuk content kita akan memasukkan kode ini:

Sekarang kita harus membuat links block dengan cara yang sama. Kita akan membuat block baru dengan Block title 'Footer Links', dengan identifier sebagai 'footer_links', dan letakkan kode ini di sana:

Semua link ini tidak me-link ke mana-mana sekarang, namun nanti anda dapat memodifikasinya. Image links dibuat secara dinamis lagi dengan menggunakan fitur upload dari WYSIWYG editor. Semua kode lainnya hanya copy dan paste dari HTML.

Save block yang ini juga, dan cek bagian home page, tapi tetap saja anda tidak akan melihat ketiga block ini muncul. Ini karena anda harus memberi tahu Magento secara jelas di mana memunculkan block baru ini, dan itu dapat kita lakukan dari bagian layout. Untuk ini, masuklah ke file llayout/local.xml , dan tambahkan baris ini, tepat sebelum penutip tag default.

Kode XML ini pada dasarnya memberi tahu Magento untuk menambahkan dua block baru ini ke dalam bagian footer Magento. Terakhir, kita perlu memanggil block-block ini dari file phtml footer. Untuk itu kita akan membuat file footer.phtml baru di lokasi ini: template/page/html/footer.phtml.

Tambahkan kode berikut di file footer.phtml ini:

Lagi-lagi ini hanyalah menyertakan kode HTML, di mana semua bagian kode diganti dengan link yang relevan ke Static Blocks. Dan bagian copyright diganti dengan tag copyright yang dinamis.

Periksa home page sekarang, dan seharusnya sekarang sudah menampilkan Static Blocks yang baru dibuat ini, dan seharusnya terlihat seperti berikut:

Complete Homepage

Sekarang home page kita sudah komplit. Satu-satunya yang tertinggal adalah beberapa penyesuaian pada style, dan kita akan melakukannya di artikel berikutnya.

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.