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

Membuat Theme Magento: Seri Final

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

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

Ketika awal saya merencanakan rangkaian seri ini, ini dimaksudkan untuk menjadi 15 seri artikel, di mana kita merencanakan untuk mengembangkan semua halaman theme, termasuk shopping cart, checkout page, login/sign up page dan user accounts page. 

Tapi setelah menulis 10 artikel pertama, saya menyadari bahwa kita sudah menjelaskan secara rinci, semua langkah yang diperlukan untuk membuat perubahan pada page atau halaman theme Magento anda, dan mengedit halaman lainnya hanyalah pengulangan langkah-langkah yang telah dijelaskan sebelumnya.

Oleh karena itu, saya mengakhiri rangkaian dalam artikel ini, di mana kita akan menyelesaikan product page dari tempat kita menyelesaikannya di artikel sebelumnya, dan saya akan memberi anda beberapa tips tentang cara menggunakan teknik yang telah anda pelajari dalam rangkaian ini. Untuk mengedit halaman yang sisa sendiri.

Jadi mari kita lanjutkan meng-customization product details page. Begini tampilannya saat ini:

Product section without CSS changes

Jika kita bandingkan dengan desain HTML yang kita miliki, beginilah tampilannya:

HTML design for product section

Agar terlihat seperti desain HTML kita, kita perlu membuat beberapa perubahan font pada product heading, price dan bagian availability. Juga, di bagian 'Add to Cart' kita perlu mengubah warna background dan border. Selain itu, kita perlu membuat beberapa perubahan dengan margin dan padding. Kita akan melakukannya dengan menambahkan baris ini di file theme.css kita:

Kode tersebut seharusnya terlihat mudah untuk dipahami. Setelah melakukan perubahan ini, halaman akan terlihat seperti berikut:

Product section after CSS

Sekarang kita cukup mendekati dengan persyaratan desain HTML kita. Namun, jika kita melihat bagian tab dari products page, meski tampilannya bagus, tidak sesuai dengan kebutuhan desain HTML kita. Begini tampilannya saat ini:

Tabs section before CSS

Agar sesuai dengan desain HTML kita, kita akan menambahkan baris CSS ini di file theme.css kita:

Kita telah mengubah color atau warna background untuk tab heading, dan warna untuk tab saat ini. Padding dan border untuk ini juga sudah diedit. Ini adalah bagaimana ini seharusnya terlihat sekarang:

Tabs after CSS

Ini terlihat cukup mendekati sekarang. Page atau halaman seharusnya terlihat bagus kecuali satu hal kecil: margin antara bagian tab dan related products terlalu banyak dan merusak tampilan keseluruhan halaman.

Margin problem

Ini karena properti min-height menetapkan class .tab-box. Kita akan memperbaikinya dengan kode singkat ini:

Masalah telah terselesaikan sekarang:

Margin problem resolved

Sekarang seluruh product detail page sudah siap, dan cukup mendekati dengan persyaratan desain HTML kita. Dengan ini kita telah menyelesaikan tiga halaman terpenting dari situs eCommerce, yaitu: homepage, product listing page, dan product details page.

Seperti yang saya sebutkan di awal pada artikel ini, di sini saya akan menyelesaikan rangkaian artikel ini dengan memberi beberapa tips tentang bagaimana anda dapat meng-customize halaman pada theme lainnya, dengan menggunakan keterampilan yang telah anda pelajari dalam seri ini.

Mari kita lihat ke cart page. Saat ini terlihat seperti berikut:

Current Cart Page

Namun, jika kita melihat desain HTML kita, seharusnya terlihat seperti ini:

HTML Cart Page

Sekarang untuk meng-customize-nya, kita akan menggunakan prosedur yang sama untuk mengaktifkan template hints dan mencari tau file template kita yang bertanggung jawab untuk merender halaman ini, dan kemudian kita akan membuat perubahan pada file-file tersebut:

Template hints on cart page

Di sini anda dapat melihat bahwa keseluruhan tata letak atau layout halaman berasal dari file /template/checkout/cart.phtml. Kita perlu mengeditnya untuk menempatkan komponen pada posisi yang tepat. Kita akan menempatkan kode HTML yang ada di file HTML kita, dan mulai mengganti kode tersebut dengan kode dinamis.

Demikian pula, kita dapat melihat bahwa row atau baris product dirender dari file template/checkout/cart/item/default.phtml. Kita akan perlu mengedit file tersebut juga. Selain itu, saya rasa kita tidak perlu membuat perubahan lain pada file phtml, karena kita bisa melakukan sisanya dengan mudah melalui CSS.

Sekarang mari kita periksa page atau halaman checkout. Saat ini terlihat seperti berikut:

Current Checkout Page

Bagaimanapun, menurut HTML kita, seharusnya ini terlihat seperti berikut:

HTML of Checkout Page

Mari kita ulangi prosedur yang sama lagi dan temukan file phtml yang perlu kita ubah di sini. Di sana anda bisa melihat layout utamanya berasal dari /template/checkout/onepage.phtml. Dan progress bar diisi oleh file ini: template/checkout/onepage/progress.phtml.

Kita bisa membuat perubahan pada kedua file ini dengan membandingkan kodenya dengan file HTML kita. Setelah melakukan perubahan pada kedua file ini, anda bisa melakukan perubahan melalui CSS. Saya tidak berpikir anda harus mengubah file phtml lainnya untuk halaman ini.

Di sini izinkan saya mengulangi bahwa anda seharusnya tidak membuat perubahan pada theme default. anda harus selalu membuat salinan file phtml yang ingin anda edit di theme baru anda, dan hanya mengeditnya di sana.

Berpindah ke halaman login, saat ini terlihat seperti berikut:

Login page

Di sini kita akan mengulangi semua langkah yang sama, dan mulai dengan mengaktifkan template hints:

Template hints on login page

Disini anda bisa melihat file utama yang perlu anda edit yaitu: template\persistent/customer/form/login.phtml. Anda dapat mengubah sebagian besar layout halaman dari file ini. Untuk perubahan style, anda bisa melakukannya melalui CSS.

Demikian juga, kita bisa melihat bagaimana cara mengedit Signup page. Pertama, kita akan mengaktifkan template hints:

Signup page

Dari template hints kita bisa melihat keseluruhan layout dari bagian signup berasal dari template/persistent/customer/form/register.phtml. Anda bisa mengubahnya dengan mengedit file ini.

Jika anda telah mengikuti sejauh ini, Anda mungkin sebaiknya tahu semua langkah-langkahnya dengan tepat dalam ingatan anda. Anda bisa terus dan mengedit user accounts page dengan menggunakan prosedur yang sama dengan yang anda pelajari di sini.

Secara resmi anda dapat mengucapkan selamat kepada diri anda sekarang: anda dapat menyebut diri anda seorang developer theme Magento, karena anda benar-benar telah mengembangkan theme Magento dan telah mempelajari semua metode dan prosedur dasar yang diperlukan untuk itu.

Saat menulis seri ini, saya telah berusaha keras untuk bisa mudah dan jelas bagi anda untuk mengikutinya. Saya harap seri ini merupakan pengalaman belajar yang baik untuk anda!

Berikan feedback anda tentang rangkaian seri ini di bagian komentar, dan teruslah kembali ke Tuts+ untuk melihat artikel bermanfaat lainnya. Dan jangan lupa untuk melihat extension apa yang tersedia untuk pengembangan pekerjaan anda dengan Magento.

Semoga mendapatkan pengalaman belajar yang mengagumkan!

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.