Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. OpenCart
Code

Cara Menggunakan Ajax dengan OpenCart

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dimasukkannya perpustakaan jQuery dalam inti OpenCart membuat implementasi Ajax menjadi mudah dan lebih dari pengalaman yang menyenangkan. Bahkan, Anda akan menemukan beberapa cuplikan yang tersebar di seluruh kerangka kerja yang menunjukkan penggunaan jQuery yang berat, jika Anda mencoba untuk menggali file view secara khusus.

Sepanjang artikel ini, kami akan membuat halaman kustom untuk mendemonstrasikan penggunaan Ajax di OpenCart. Ini akan menjadi antarmuka sederhana yang memungkinkan Anda untuk memilih produk dari kotak drop-down dan menampilkan blok ringkasan produk yang bagus dari produk yang dipilih. Bagian yang menarik dari contoh penggunaannya adalah cara blok ringkasan produk dibangun—itu akan dipersiapkan menggunakan Ajax on-the-fly. Tentu saja, itu bukan sesuatu yang menjadikannya sebagai contoh nyata, tapi saya kira itu akan melayani tujuan dasar untuk menunjukkan bagaimana hal-hal bekerja di OpenCart.

Saya berasumsi bahwa Anda menggunakan versi terbaru OpenCart, yaitu 2.1.x.x! Juga, diskusi utama artikel ini berkonsentrasi pada Ajax dengan OpenCart, jadi saya akan meluncur melalui dasar-dasar pengembangan modul kustom di OpenCart. Namun, jika Anda tidak terbiasa dengannya, penjelasan singkat tentang cuplikan kode di antaranya akan memastikan bahwa Anda dapat mengikuti hingga akhir!

Sekilas Tentang Organisasi File

Mari kita cepat melalui pengaturan file yang diperlukan untuk halaman kustom kita.

  • catalog/controller/ajax/index.php: Ini adalah file controller yang menyediakan logika aplikasi dari controller biasa di OpenCart.
  • catalog/language/english/ajax/index.php: Ini adalah file bahasa yang membantu mengatur label bahasa.
  • catalog/view/theme/default/template/ajax/index.tpl: Ini adalah file template view yang memegang XHTML dari halaman kustom.
  • catalog/view/theme/default/template/ajax/product.tpl: Ini adalah file template view yang memegang XHTML dari respon AJAX.

Jadi, itu adalah daftar singkat dari file yang akan kami terapkan hari ini.

Membuat File Modul

Silakan membuat katalog file catalog/controller/ajax/index.php dengan konten berikut.

Untuk mulai, metode index dari controller digunakan untuk memuat file bahasa dan model dan mengatur variabel umum untuk template OpenCart biasa. Kami memuat model produk yang tersedia di intinya sendiri, jadi kami tidak perlu menggandakan kode untuk mengambil informasi produk.

Setelah memuat model produk, kami menggunakan metode getProducts untuk memuat semua produk. Akhirnya, kami menyimpulkan metode index dengan menetapkan index.tpl sebagai file template utama kami.

Berikutnya adalah metode ajaxGetProduct yang penting, yang digunakan untuk membangun blok ringkasan produk berdasarkan pada id produk yang dilewatkan dalam panggilan Ajax, seperti yang akan kita lihat segera dalam file template. Ini memuat model produk yang sama seperti yang kami lakukan dalam metode index, dan memanggil metode getProduct untuk mengambil informasi produk tertentu berdasarkan pada id produk.

Pada akhirnya, template product.tpl ditetapkan sebagai template untuk metode ini. Khusus untuk persyaratan dalam kasus kami, kami menggunakan template untuk membangun keluaran Ajax kami, tetapi Anda juga dapat mengirim tanggapan JSON sebagai gantinya.

Selanjutnya, mari kita membuat file bahasa catalog/language/english/ajax/index.php untuk menyimpan informasi label statis.

File template view, salah satu file yang paling penting dalam konteks tutorial ini, harus dibuat di catalog/view/theme/default/template/ajax/index.tpl dengan isi berikut.

Cuplikan minat kami adalah pada akhir index.tpl, kode JavaScript yang menggunakan metode jQuery untuk mengikat perubahan dan peristiwa Ajax. Ketika pengguna memilih produk dari kotak drop-down, evnt change dijalankan yang akhirnya membuat panggilan Ajax. Dalam panggilan Ajax, kami mengirim product_id yang ditambahkan sebagai variabel kueri string GET.

Di sisi lain, seperti yang telah kita bahas dalam pengaturan controller, ajaxGetProduct mengirimkan XHTML dari blok ringkasan produk berdasarkan variabel kueri string product_id. Dalam metode success, kami menambahkan respons XHTML ke tag div yang memiliki atribut id disetel ke product_summary.

Akhirnya, lanjutkan dan buat file template catalog/view/theme/default/template/ajax/product.tpl dengan konten berikut untuk panggilan Ajax.

Tidak ada yang mewah di sini—Kami baru saja menyertakan XHTML blok ringkasan produk dasar.

Jadi, itu sejauh pengaturan file yang bersangkutan. Di bagian selanjutnya, kita akan melakukan front-end untuk menguji apa yang telah kita bangun sejauh ini.

Pengujian Front-End

Jadi kami telah melakukan semua kerja keras, dan sekarang saatnya melakukan beberapa pengujian! Buka front-end OpenCart dan kunjungi URL http://www.yourstore.com/index.php?route=ajax/index. Ini harus menampilkan antarmuka yang tampak bagus seperti yang ditunjukkan pada tangkapan layar berikut.

Custom Page Drop-Down

Drop-Down Halaman KustomIni adalah halaman kustom kita, dan itu menampilkan kotak drop-down yang berisi daftar semua produk. Sekarang, mari kita coba memilih produk dari kotak pilihan, dan itu akan membuat panggilan Ajax di latar belakang.

Sebagai hasilnya, Anda akan melihat blok ringkasan produk bagus ditampilkan tepat di bawah kotak drop-down seperti yang ditunjukkan pada tangkapan layar berikut.

AJAX Preview

Pratinjau AJAXJika Anda telah mengikuti tutorial dan menerapkan semua file seperti yang dijelaskan, itu harus bekerja dengan lancar untuk Anda dan juga untuk saya! Tentu saja, itu adalah demonstrasi yang sangat sederhana tentang bagaimana Ajax bekerja di OpenCart, tetapi Anda dapat meregangkannya ke tingkat berikutnya sesuai kebutuhan Anda.

Pergi dan bermainlah dengannya, dan cobalah untuk membuat beberapa hal interaktif menggunakan Ajax karena itu cara terbaik untuk belajar. Jadi, itu untuk hari ini, dan saya akan segera kembali dengan beberapa hal yang lebih menarik.

Kesimpulan

Itu Ajax dengan OpenCart yang menjadi daya tarik utama artikel hari ini. Seperti biasa, kami mengambil pendekatan modul kustom untuk mendemonstrasikannya dan membuat kasus penggunaan yang sederhana namun efektif.

Seperti biasa, jika Anda mencari alat OpenCart tambahan, utilitas, ekstensi, dan sebagainya yang dapat Anda manfaatkan dalam proyek Anda sendiri atau untuk pendidikan Anda sendiri, jangan lupa untuk melihat apa yang kami miliki di marketplace.

Saya harap ini informatif dan bermanfaat, dan jangan ragu untuk meninggalkan pertanyaan dan komentar Anda!

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.