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

Membuat Theme Magento: Home Page, Bagian 1

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

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

Saat kita menetapkan tahapan di artikel bootstrap sebelumnya, sekarang saatnya untuk benar-benar menyelam jauh ke dalam kode, dan mulai membuat perubahan. Sebagai suatu pilihan nyata, kita akan memulai proses editing dari home page.

Dalam artikel pertama ini kita akan mengedit beberapa bagian pada bagian header. Kita akan mengedit file wrapper default dan file header.phtml, dan kemudian kita akan mulai mengedit berbagai komponen header seperti currency, language selector, dll. Jadi, tanpa basa-basi lagi, kita akan memulai proses editingnya.

Pertama-tama, kita akan mengaktifkan Template hints dari admin panel, dengan menuju System > Developer > Debug, dan saat melakukannya, kita perlu memastikan bahwa Current Configuration Scope di-set ke Main Website. Dengan mengaktifkan template hints, kita akan tahu template mana yang bertanggung jawab untuk style header. Berikut adalah bagaimana home page akan terlihat saat template hints dalam keadaan on.

Homepage with template hints

Di sini, seperti yang bisa anda lihat, bagian terluar wrapper di mana semua file lainnya disertakan berasal dari frontend/rwd/default/template/page/1column.phtml, yang berasal dari RWD theme, karena kita telah mewarisi tema kita dari theme default ini. Daripada mengedit file ini secara langsung dalam RWD theme, kita akan membuat folder serupa di dalam theme vstyle kita di lokasi ini: frontend/tutsplus/vstyle/template/page. Kemudian kita akan menyalin file-file tersebut ke dalam folder ini, dan mengeditnya di sana. Jadi, kita akan masuk ke direktori frontend/rwd/default/template/page dan mengcopy 1column.phtml, 2column-left.phtml, 2column-right.phtml, dan 2column-right.phtml ke dalam folder yang baru dibuat tadi.

Jika kita melihat kode dari 1-column.phtml, akan seperti ini:

Sekarang kita harus merubahnya agar sesuai dengan file index.html kita, jadi kita akan menggunakan body dan class container kita, dan menambahkan beberapa div tambahan, dan kode yang diedit akan terlihat seperti ini:

Sama halnya kita juga akan mengedit file 2column-left.phtml, 2column-right.phtml, dan 3column.phtml. Beginilah kode yang dimodifikasi akan terlihat untuk 2-column-left.phtml:

Selanjutnya, 2columns-right.phtml akan terlihat seperti ini setelah diedit:

Terakhir, kita akan mengedit 3columns.phtml menjadi seperti ini:

Perhatikan baik-baik perubahan yang telah kita buat di file template ini. Bila anda membandingkannya dengan file index.html dari situs HTML kita, itu akan masuk akal bagi anda.

Ini adalah bagaimana seharusnya website terlihat setelah mengedit file-file tersebut. Anda tidak akan melihat banyak perbedaan, tapi heading kita berada di posisi yang benar.

Homepage with wrapper files modified

Selanjutnya kita akan mengedit file header.phtml, seperti yang bisa kita lihat bahwa ini adalah file yang memiliki wrapper content pada bagian header. Jadi, kita akan menyalin file frontend/rwd/default/template/page/html/header.phtml, pindahkan ke folder frontend/tutsplus/vstyle/template/page/html, dan mulai mengeditnya. Sekarang kodenya akan terlihat seperti ini:

Kita akan membandingkannya dengan bagian header dari HTML kita, dan mulai membuat perubahan ini di dalamnya:

Kita akan menyisipkan HTML ini ke file header.phtml, dan mengganti bagian-bagian yang berbeda dengan dynamic template tags (tag template yang dinamis) yang relevan seperti currency switcher, store language, logo, menu, search bar, dll. berikut adalah bagaimana kode akan terlihat setelah pengeditan ini:

Berikut adalah bagaimana bagian header akan terlihat setelah mengedit file header.phtml:

Afer editing headerphtml file

Sekarang seperti yang anda lihat, kita perlu memodifikasi kode dari bagian yang berbeda yang kita gunakan, seperti selector language dan currency, slider, menu, search bar, dll. Untuk memulainya, kita akan mengedit selector currency dan language. Jika kita mengaktifkan kembali template hints, kita dapat melihat bagian selector language berasal dari base/default/template/page/switch/languages.phtml, jadi kita akan menyalin file ini ke dalam theme kita di lokasi yang sama, dan mulai mengeditnya untuk disesuaikan dengan kode HTML kita. File original languages.phtml terlihat seperti berikut:

Kode HTML original untuk selector currency dan language terlihat seperti berikut:

Setelah kita memodifikasi languages.phtml agar sesuai dengan HTML, maka itu akan terlihat seperti ini:

Seperti yang anda lihat, selector currency tidak muncul di situs kita untuk saat ini. Kita harus enable (mengaktifkan) selector currency dari admin panel terlebih dahulu. Dari System > Configuration > General > Currency Setup, anda harus mengaktifkan beberapa bahasa terlebih dahulu, lalu dari System > Manage Currency > Rates set currency rates (kurs mata uang). Kemudian anda akan melihat bahwa selector currency diaktifkan di situs anda. Dengan mengaktifkan lagi template hints, kita dapat melihat bahwa templatenya adalah rwd/default/template/directory/currency.phtml, dan sekarang kodenya akan terlihat seperti berikur:

Kita akan mengeditnya agar sesuai dengan HTML kita, jadi kode modifikasinya akan terlihat seperti berikut:

Selanjutnya, kita akan mengedit welcome message (pesan pembuka) kita agar sesuai dengan design HTML kita. Untuk itu kita harus menuju ke System > Configuration/General/Design/Header/Welcome Text. Setelah mengedit ini, header akan terlihat seperti berikut:

Header at the end

Jika anda telah mengikuti semua langkah dengan benar, saya harap anda dapat melihat banyak kemajuan di tampilan home page anda. Sekarang setelah kita mengedit beberapa bagian pada bagian header, kita akan terus mengedit bagian header pada artikel berikutnya, dan kita juga akan mengedit main slider (slider utama) di artikel itu.

Tolong jelaskan pengalaman anda di bagian komentar!

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.