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.
<?php // catalog/controller/ajax/index.php class ControllerAjaxIndex extends Controller { public function index() { $this->load->language('ajax/index'); $this->load->model('catalog/product'); $this->document->setTitle($this->language->get('heading_title')); // load all products $products = $this->model_catalog_product->getProducts(); $data['products'] = $products; $data['breadcrumbs'] = array(); $data['breadcrumbs'][] = array( 'href' => $this->url->link('common/home'), 'text' => $this->language->get('text_home') ); $data['breadcrumbs'][] = array( 'href' => $this->url->link('ajax/index'), 'text' => $this->language->get('heading_title') ); $data['heading_title'] = $this->language->get('heading_title'); $data['text_product_dropdown_label'] = $this->language->get('text_product_dropdown_label'); $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/ajax/index.tpl')) { $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/ajax/index.tpl', $data)); } else { $this->response->setOutput($this->load->view('default/template/ajax/index.tpl', $data)); } } // ajax call method public function ajaxGetProduct() { if (isset($this->request->get['product_id'])) { $product_id = (int) $this->request->get['product_id']; if ($product_id > 0) { // load the particular product requested in ajax $this->load->model('catalog/product'); $product = $this->model_catalog_product->getProduct($product_id); $data['product'] = $product; // prepare thumb image $this->load->model('tool/image'); if ($product['image']) { $data['thumb'] = $this->model_tool_image->resize($product['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')); } // format price $data['price'] = $this->currency->format($this->tax->calculate($product['price'], $product['tax_class_id'], $this->config->get('config_tax'))); $this->load->language('product/product'); $data['text_manufacturer'] = $this->language->get('text_manufacturer'); $data['text_model'] = $this->language->get('text_model'); $data['text_note'] = $this->language->get('text_note'); $data['tab_description'] = $this->language->get('tab_description'); if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/ajax/product.tpl')) { $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/ajax/product.tpl', $data)); } else { $this->response->setOutput($this->load->view('default/template/ajax/product.tpl', $data)); } } } } }
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.
<?php // catalog/language/english/ajax/index.php // Heading $_['heading_title'] = 'Simple Ajax Example'; $_['text_product_dropdown_label'] = 'Select Product';
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.
<!-- catalog/view/theme/default/template/ajax/index.tpl --> <?php echo $header; ?> <div class="container"> <ul class="breadcrumb"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> <?php } ?> </ul> <div class="row"><?php echo $column_left; ?> <?php if ($column_left && $column_right) { ?> <?php $class = 'col-sm-6'; ?> <?php } elseif ($column_left || $column_right) { ?> <?php $class = 'col-sm-9'; ?> <?php } else { ?> <?php $class = 'col-sm-12'; ?> <?php } ?> <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?> <h2><?php echo $heading_title; ?></h2> <fieldset id="account"> <div> <label class="col-sm-2 control-label" for="product"><?php echo $text_product_dropdown_label; ?></label> <div class="col-sm-10"> <select name="product" class="form-control" id="product"> <option>-- <?php echo $text_product_dropdown_label; ?> --</option> <?php foreach ($products as $product) { ?> <option value="<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></option> <?php } ?> </select> </div> </div> </fieldset> <div id="product_summary"></div> <?php echo $content_bottom; ?></div> <?php echo $column_right; ?></div> </div> <?php echo $footer; ?> <script type="text/javascript"> $('#product').on('change', function() { $.ajax({ url: 'index.php?route=ajax/index/ajaxGetProduct&product_id=' + this.value, dataType: 'html', success: function(htmlText) { $('#product_summary').html(htmlText); }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }); </script>
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.
<!-- catalog/view/theme/default/template/ajax/product.tpl --> <div style="border: 1px solid #CCC;padding:10px;margin:10px;"> <h3><?php echo $product['name']; ?> - <?php echo $price; ?></h3> <p><img src="<?php echo $thumb; ?>"/></p> <p><b><?php echo $text_manufacturer; ?></b> <?php echo $product['manufacturer']; ?></p> <p><b><?php echo $text_model; ?></b> <?php echo $product['model']; ?></p> </div>
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.

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.

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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post