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

Membuat Theme Magento: Tahap Persiapan

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Bootstrapping

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

Final product image
What You'll Be Creating

Dalam rangkaian tutorial ini, kita akan membuat atau mengembangkan theme atau tema Magento. dari awal. Karena Magento adalah CMS eCommerce yang sangat besar dengan banyak pilihan customization, theme Magento biasanya dianggap sangat kompleks untuk dikembangkan, namun saya harap begitu anda mengikuti seri ini, anda akan sangat mengenal terminologi Magento dan bagaimana hal-hal dikembangkan di dalamnya. Saya akan mencoba menjelaskan semuanya saat kita melangkah, mengembangkan setiap komponen halaman selangkah demi selangkah.

Menginstal Magento

Langkah pertama menuju pengembangan Magento adalah memiliki salinan Magento yang terinstal di server lokal anda. Anda dapat memiliki salinan Magento yang terinstal di server web anda juga, tapi itu hanya akan memperlambat anda kecepatan pengembangan. Jadi saya selalu merekomendasikan untuk menggunakan server lokal untuk pengembangan, dan begitu anda menyelesaikan pengembangan dan benar-benar menguji produk akhir, baru saat itu anda harus mengunggahnya di server anda.

Saya tidak akan membuang waktu dengan menjelaskan bagaimana anda seharusnya menginstal Magento di server lokal anda. Ada banyak artikel bagus yang tersedia di internet untuk itu. Anda juga dapat menemukan artikel instalasi Magento di situs kami, seperti artikel Tuts+ ini, yang akan memandu anda bagaimana cara menginstal Magento di server lokal anda.

Anda juga perlu menginstal sample data Magento, ketika menginstal Magento. Sample data ini akan menambahkan banyak catalog, product, review, dll., Dan melalui itu kita dapat menguji skenario yang berbeda selama pengembangan.

Menginstal Kode Editor dan Debugger

Setelah anda selesai menginstal Magento, langkah selanjutnya adalah menyiapkan editor untuk mendevelopnya. Anda bisa menggunakan kode editor atau IDE pilihan anda di sini. Setiap kode editor yang anda rasa nyaman akan bekerja dengan baik di sini. Jika anda belum pernah menggunakan kode editor sebelumnya, saya akan merekomendasikan untuk menginstal Notepad++, karena ini adalah kode editor yang sangat ringan, mudah digunakan, dan gratis.

Kita juga memerlukan inspector elemen untuk memeriksa dan mengedit style CSS di laman web. Jika anda menggunakan Firefox, anda dapat menginstal ekstensi Firebug untuk itu. Namun jika anda  menggunakan Chrome, Chrome Web Inspector bekerja dengan hebat. Melakukan ini dengan Chrome, jadi anda tidak perlu memasang ekstensi untuk itu. Untuk tujuan seri ini, saya akan menggunakan Chrome Web Inspector untuk men-debug dan mengedit style CSS.

Memperkenalkan HTML yang Akan kita Gunakan

Saya telah mengembangkan beberapa HTML untuk tujuan dalam seri ini. HTML nya berisi pola dan elemen desain yang banyak digunakan dalam theme eCommerce, seperti top cart, header slider, pengaturan currency (mata uang) dan bahasa, dll. Kami akan menginjakkan langkah demi langkah mengkonversi HTML ini menjadi theme Magento yang bisa berjalan. Paket theme HTML dilampirkan di sini untuk anda download.

Sebelum Membaca Daftar

Sebelum kita terjun ke tahap pengembangan yang sebenarnya, saya akan sangat menyarankan agar anda melihat seri artikel Tuts+ ini pada pengembangan theme Magento. Tiga seri tutorial ini akan membiasakan anda dengan teori di balik theming atau mentemaan di Magento dan prinsip-prinsip dasarnya. Pengetahuan tentang pengembangan tema Magento ini akan sangat berguna sebelum anda mulai membuat tangan anda kotor dengan pengkodean theme yang sebenarnya.

File yang Akan Kita Edit

Sekarang anda seharusnya sudah memiliki installasi Magento yang sudah berjalan dan menyiapkan tools untuk pengembangannya, dan anda telah mempelajari dasar-dasar pengembangan theme dengan membaca series yang disarankan di atas, mari saya perkenalkan secara singkat kepada anda dengan folder di mana kita akan mengedit file-filenya.

Saat anda membuka folder root Magento, anda akan melihat daftar folder di bawah sana. Dari folder ini, folder tempat kita akan mengedit file hanyalah folder app dan folder skin.

Magento Folder Structure

Terkadang kita bisa menggunakan folder js juga, untuk menempatkan file library JavaScript seperti jQuery, jika belum ada di sana. Lakukan dan biasakan diri anda dengan folder yang ada di folder app dan skin, sebelum anda mulai mengikuti langkah-langkah di artikel berikutnya dalam seri ini.

Menyiapkan Lingkungan Pengembangan Magento

Kita perlu mengubah beberapa pengaturan di Magento, yang akan membantu kita mengembangkan theme Magento menjadi lebih cepat dan akan memberi tahu kita jika ada yang tidak beres dalam Magento.

Pertama-tama, kita akan menonaktifkan Magento Cache. Untuk itu, masuklah ke System > Cache Management, dan pilih semua jenis cache. Dari bagian actions pilih Disable, dan submit.

Disabling Cache

Setelah kita menonaktifkan semua Caches, langkah selanjutnya adalah me re-index data. Untuk itu, masuklah ke System > Index Management. Pilih semua index, dan dari bagian actions pilih Reindex Data, dan submit.

Reindexing Data

Sekarang, kita akan mengaktifkan log dan block hints di Magento. Buka System > Configurations, dan di sidebar kiri, item terakhir adalah Developer. Klik pada bagian itu. Di halaman berikutnya, dari Log Settings, enable log, dan tekan tombol Save Config di kanan atas.

Enabling Logs

Selanjutnya, di bagian atas sidebar kiri, anda akan melihat  pilihan Current Configuration Scope. Pilih Main Website dari sana.

Setting Website Scope

Sekarang dari bagian Debug, aktifkan Template Path Hints, dan tekan tombol Save Config lagi.

Enabling Template Path Hints

Terakhir, masuklah ke direktori root dari Magento, dan di sana buka file index.php.Pada baris 77, hapus tanda komentar pada baris kode ini:e:

Apa selanjutnya?t?

Itu saja untuk saat ini. Anda mungkin tidak menyadarinya, tapi kita telahmembangun fondasi yang bagus untuk pengembangan theme aktual dalam tutorial berikutnya dalam seri ini.Pada akhirnya, saya akan mendorong anda untuk terus mengikuti seri Membuat Theme Magento yang saya rekomendasikan di atas, jika anda belum melakukannya.’t already.

Pada tutorial selanjutnya, kita akan membuat struktur folder theme baru kita. Kita akan menyalin file CSS, JS, dan gambar dari HTML ke dalam theme kita,dan membuat file local.xml pada theme kita untuk memastikan theme kita terhubung ke file-file ini.s to these files.

saya harap anda terus mengikuti tutorial selanjutnya. he next tutorials.

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.