Perubahan pada OpenCart 2.0 – review halaman depan, admin dan kode sumber
Perubahan pada OpenCart 2.0 – review halaman depan, admin dan kode sumber
Perubahan pada OpenCart 2.0 – review halaman depan, admin dan kode sumber. Terdapat Perubahan Pada OpenCart 2.0 yang perlu menjadi perhatian para developer openCart. OpenCart mengalami perubahan besar. Beberapa hal mendasar seperti tema mengalami perubahan signifikan. Sementara dari sisi kode terdapat perubahan dalam cara mendeklarikan variabel, memanggil tema, include file javascript, dan beberapa fungsi tambahan lain.
Pada artikel ini akan dijelaskan mengenai Perubahan Pada OpenCart 2.0 yang meliputi halaman depan dan admin. Beberapa fungsi dan modul tambahan serta perubahan kode sumber pada OpenCart 2.0.
Tema OpenCart 2.0
OpenCart 2.0 menggunakan bootstrap twitter. Banyak alasan mengapa harus menggunakan bootstrap. Yang jelas akan menghemat waktu, desain konsisten di semua halaman, mudah digunakan, memiliki kompatibilitas browser yang tinggi, dll.
Halaman Depan/FrontEnd
Menu
Pada tiap akhir sub kategori akan terdapat satu menu item tambahan untuk melihat semua produk pada kategori induknya jika terdapat lebih dari satu sub kategori seperti yang terlihat pada gambar.
Perubahan dari sisi tema secara fisik adalah layout yang lebih lebar. Terdapat slideshow yang penuh di halaman home. Secara umum desain menjadi lebih sederhana. Layout ini sangat intuitif dan mampu menyesuaikan dengan lebar browser. Kombinasi CSS dan javascript dalam bootstrap juga membuat tema pada OpenCart 2.0 kompatibel dengan smartphone atau tablet. Jelas, sangat berbeda dengan tema versi sebelumnya.
Jika diinginkan upgrade dari versi sebelumnya ke OpenCart 2.0 maka Anda harus melakukan perombakan besar terhadap tema kustom Anda jika ingin mendapatkan hasil yang sama, :). tapi percayalah itu akan lebih mudah karena ada bootstrap di OpenCart 2.0. hehe.
Halaman Produk
Jika diperhatikan dengan seksama tidak terdapat perubahan besar dalam konten yang ditampilkan. Namun perubahan tema sangat kentara. Breadcrumb menjadi lebih prominent dari versi sebelumnya. Kolom Qty (quantity) melebar mengikuti lebar tombol Add to Cart. Dan kita akan melihat kolom input yang lebih lebar dari yang dibutuhkan di semua kolom input. Percayalah! ????
Secara umum layout menjadi lebih lebar dan terlihat lebih rapi. Tombol update dan delete menjadi lebih kentara.
Dari segi tampilan sistem checkout masih sama versi sebelumnya yang masih menggunakan satu halaman untuk checkout.
Salah satu fitur yang signifikan adalah terdapat peta dunia yang menggambarkan persebaran pesanan. Kemudian terdapat notifikator pada kanan atas yang akan menginformasikan kepada kita hal-hal tentang pesanan, kustomer, produk dan afiliasi.
Bebarapa fitur baru yang sangat memudahkan pada OpenCart 2.0 adalah:
- Extension → Extension Installer, seperti namanya kita dapat menginstall modul, shipping, atau payment melalui halaman. Ini mengurangi kebutuhan pengguna untuk menggunakan FTP sewaktu menginstall ekstensi.
- Extension → Modifications, halaman ini digunakan untuk memodifikasi file XML VQMOD.
- Report → Product → Viewed/Purchased, ini merupakan fitur yang sangat bermanfaat untuk menganalisis produk apa saja yang disukai kustomer. Pada halaman product viewed report terdapat daftar produk yang sering dilihat dalam jumlah dan persen. Sementara ada halaman product purchased report, terdapat daftar tiap produk yang telah dibeli beserta jumlah belinya.
- Dll. Hehe
Kode Sumber OpenCart 2.0
Suatu ketika saya pernah diminta untuk mengedit OpenCart 2.0 agar support dengan pengiriman JNE Oke, Reguler dan Yes. Tidak mudah memang, tapi Alhamdulillah bisa. Hehe.
Berdasarkan pengamatan saya, perubahan kode sumber di OpenCart 2.0 adalah sebagai berikut:
Deklarasi variabel
Jika versi sebelumnya menggunakan $this->data
$data[‘nama_variabel’] = nilai_variable;
Redirect ke Halaman lain
Untuk redirect OpenCart 2.0 menggunakan library response.php sehingga kode untuk redirect menjadi ky gini:
$this->response->redirect($this->url->link(‘account/login’, ”, ‘SSL’));
Include file ke template
Ada dua tipe file yang dapat diinclude di halaman, yakni file CSS dan Javascript. Kedua file ini dapat ditambahkan dengan kode berikut:
$this->document->addStyle(‘catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css’);
$this->document->addScript(‘catalog/view/javascript/jquery/datetimepicker/moment.min.js’);
Load Template
Kode berikut ini saya ambil dari controller → account → account.php. Untuk menggunakan tempalte tertentu maka harus mengincludekan kontroler yang sesuai dengan layout yang diinginkan.
$data[‘column_left’] = $this->load->controller(‘common/column_left’);
$data[‘column_right’] = $this->load->controller(‘common/column_right’);
$data[‘content_top’] = $this->load->controller(‘common/content_top’);
$data[‘content_bottom’] = $this->load->controller(‘common/content_bottom’);
$data[‘footer’] = $this->load->controller(‘common/footer’);
$data[‘header’] = $this->load->controller(‘common/header’);
if (file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/account/account.tpl’)) {
$this->response->setOutput($this->load->view($this->config->get(‘config_template’) . ‘/template/account/account.tpl’, $data));
} else {
$this->response->setOutput($this->load->view(‘default/template/account/account.tpl’, $data));
}
Output ke JSON
Metode output untuk JSON berada pada library response.php seperti inilah cara mengoutputkan semua variabel ke JSON.
$this->response->addHeader(‘Content-Type: application/json’);
$this->response->setOutput(json_encode($json));
Class dibawah folder controller → api
Terdapat beberapa file di folder ini yang dimanfaatkan saat mengedit order di halaman belakang. File-file tersebut adalah:
- shipping.php
- payment.php
- order.php
- dll
Ok. sekian dulu review dari saya tentang OpenCart 2.0. sebenarnya masih banyak lagi yang dapat direview terutama fitur di halaman admin dan perubahan besar pada CSS untuk list dan form pada halaman admin. Tapi saya tidak tega memuatnya disini semua, :). yup, saya rasa ini cukup untuk menjadi gambaran bagi pembaca.
Semoga bermanfaat,
Leave Your Comment