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 2

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

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

Pada tutorial sebelumnya pada seri ini, kita sudah mulai memodifikasi bagian header dari home page. Dalam tutorial ini, kita akan melanjutkan yang sebelumnya dengan improvement pada bagian header, dan kemudian kita akan membuat CMS block slider baru dan memanggilnya dari file template kita. Seperti yang sudah kita bicarakan dalam artikel ini, mari kita mulai tanpa menunggu lebih lama.

Karena kita telah memperbaiki sebagian top header, satu hal yang perlu diperbaiki adalah bagian top cart. Untuk menyesuaikan header cart, pertama kita akan mencoba mencari tahu file template mana yang bertanggung jawab untuk merender bagian tersebut. Untuk menganalisanya, pertama mari kita tambahkan beberapa produk ke dalam cart (keranjang belanja), sehingga kita bisa menyelidiki sepenuhnya.

Enabling Template Tags

Saat kita mengaktifkan template hints, kita dapat melihat bahwa bagian luar container dari header cart berasal dari file template ini: frontend/rwd/default/template/checkout/cart/minicart.phtml.  Kemudian saat diklik, bagian yang diperluas dirender melalui file ini: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Akhirnya, setiap item pada cart dirender lewat file ini: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Kita akan mengimport semua file ini ke dalam theme yang baru kita buat, lalu mulai memodifikasinya.

Mari kita mulai proses modifikasi dari file terluar minicart.phtml. berikut adalah kode dari file ini:

Sekarang sebelum kita mulai memodifikasi apa-apa yang ada di dalamnya, mari periksa kode dari header cart kita di file HTML original kita. Kode di sana terlihat seperti ini:

Jadi, kita akan mulai memodifikasi kode file PHP-nya agar mirip dengan kode HTML kita. Kita hanya akan menggunakan tag anchor di sini untuk me-wrap (membungkus) icon cart, dan setelah itu kita akan menampilkan minicart content. Karenannya kode kita akan terlihat seperti ini:

Di sini kita telah mengganti wrapper terluar dari top cart, tapi sekarang kita perlu mengedit wrapper pada bagian drop-down. Seperti yang telah kita lihat, wrapper-nya berasal dari frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Mari kita cek kode terakhir dari file ini:

Ketika kita membandingkannya dengan template HTML kita, ada beberapa hal yang perlu kita lakukan. Pertama-tama, di dalam div minicart-wrapper, kita akan mulai menerapkan ul kita, dan untuk setiap item yang akan kita meng-iterate (pengulangan) menggunakan tag li. Pada akhirnya, kita akan memperlihatkan total cart, atau menunjukkan bahwa tidak ada item di cart. Kode akhir kita untuk file ini akan terlihat seperti berikut:

Sekarang bagian terakhir yang tersisa adalah memberikan style pada item cart list itu sendiri. Seperti yang sudah kita ketahui, file yang bertanggung jawab untuk bagian itu adalah: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Saat ini kode dari file tersebut terlihat cukup panjang dan sulit dimengerti, tapi tak perlu takut. Kita tidak perlu mengedit ini semua, karena bagian utama dari kode file ini hanya menghitung harga yang tepat, dan option untuk produk lainnya. Sekali lagi, kita akan mengecek kode HTML kita, memasukkannya ke dalam file ini, dan mulai mengganti static text (teks statis) dengan dynamic value (nilai dinamis). Ini adalah kode untuk setiap item cart di HTML kita:

Kita akan mengganti tag img dengan yang ini:

Selanjutnya, kita akan mengganti name dengan dynamic code (kode dinamis):

Untuk menampilkan product options, kita akan menggunakan dynamic code ini:

Kemudian kita akan menentukan dan memperlihatkan quantity (jumlahnya) dengan menggunakan kode berikut:

Untuk price calculation (perhitungan harga), kita akan memasukkan kode ini di tempat static price:

Dan sebagai langkah terakhir, kita akan mengganti href untuk menghapus URL sebelumnya dengan yang ini:

Saya telah menemukan semua kode ini dari default.phtml yang sebenarnya. Anda tidak perlu memikirkan semua logika dan kode anda sendiri, tapi jika anda melihat dari dekat anda dapat menemukannya di file yang ingin anda ubah.

Jadi, kode akhir dari file default.phtml kita terlihat seperti ini:

Sekarang jika anda save semua file ini, dan me-reload homepage, seharusnya anda melihat sesuatu seperti berikut:

Top Cart Fixed

Kita memiliki beberapa masalah dengan style, tapi rendering HTML-nya hampir mendekati dengan desain HTML yang kita butuhkan. Sekarang setelah kita menyelesaikan bagian top header, selanjutnya adalah bagian logo. Untungnya tidak banyak yang bisa dilakukan di sana kecuali bagian styling (untuk membuat logo center sejajar) yang akan kita lakukan di artikel styling. Item menu kita juga terlihat hampir mendekati dengan apa yang kita harapkan, jadi kita hanya perlu memodifikasi search bar, lalu main slider.

Untuk memodifikasi search bar kita, mari aktifkan template hints, dan lihat bagian mana yang bertanggung jawab untuk merender kode ini: ffrontend/rwd/default/template/catalogsearch/form.mini.phtml.

Saat ini file ini terlihat seperti berikut:

Jadi, kita akan menggunakan div bagian luar dari HTML, dan mengganti inner content (inti konten) dengan dynamic content (konten dinamis). File form.mini.phtml baru kita akan terlihat seperti berikut:

Di bagian akhir artikel ini, kita akan mengedit main slider (slider utama). Untuk itu, kita akan membuat static block yang baru, dengan masuk ke CMS > Static Blocks > Add New Block. Kita akan memberi nama Block ini 'Homepage Slider', dan kita akan memasukkan Identifier-nya sebagai 'home-slider'-begitulah kodenya akan bisa menemukan block ini.

Creating Homepage Slider Static Block

Sekarang kita akan memasukkan kode slider dari HTML kita.

Perhatikan bahwa kita telah mengganti image source relative ke direktori skin dengan menggunakan tag skin_url seperti ini:

Sekarang kita akan menambahkan baris-baris ini di dalam file header.phtml yang kita buat di artikel terakhir, tepat di atas baris terakhir <?php echo $this->getChildHtml('topContainer'); ?>.

Langkah terakhir adalah menghapus slider saat ini. Untuk melakukan itu, buka CMS-Pages > Madison Island, dan dari bagian Content, hapus semua kode hingga awal bagian style.

Removing previous Home Slider

Save semuanya dan reolad home page, dan sekarang anda seharusnya melihat semua berjalan dengan sangat baik. Beberapa style tidak aktif, tapi kita akan membahasnya pada tutorial styling yang terpisah. Untuk saat ini kita hanya perlu mengurus bagian konten pada home page, di mana kita akan menampilkan carousel dari produk terbaru, lalu kita akan menyesuaikan bagian footer. Kita akan melakukan semua ini di tutorial berikutnya, jadi nantikan terus!

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.