Cara Menggunakan Ajax dengan OpenCart

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>&nbsp;<?php echo $product['manufacturer']; ?></p>
  <p><b><?php echo $text_model; ?></b>&nbsp;<?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!