Cómo usar Ajax con OpenCart

La inclusión de bibliotecas jQuery en el núcleo de OpenCart hace que la implementación de Ajax sea muy sencilla y más que una experiencia agradable. De hecho, encontrarás varios fragmentos repartidos por todo el marco que muestran el uso intensivo de jQuery, si intentas profundizar en los archivos de vista específicamente.

A lo largo de este artículo, crearemos una página personalizada para demostrar el uso de Ajax en OpenCart. Será una interfaz simple que te permitirá seleccionar un producto del cuadro desplegable y mostrará un bonito bloque de resumen del producto seleccionado. La parte interesante del caso de uso es la forma en que se construye el bloque de resumen del producto; se preparará usando Ajax sobre la marcha. Por supuesto, no es algo que lo convierta en un ejemplo fuera del mundo, pero supongo que servirá para el propósito básico de mostrar cómo funcionan las cosas en OpenCart.

¡Supongo que estás utilizando la última versión de OpenCart, que es 2.1.x.x! Además, la discusión principal de este artículo se concentra en Ajax con OpenCart, por lo que analizaré los conceptos básicos del desarrollo de módulos personalizados en OpenCart. Sin embargo, si no estás familiarizado con él, una explicación rápida de los fragmentos de código intermedios asegura que puedas seguir hasta el final.

Un vistazo rápido a la organización de archivos

Repasemos rápidamente la configuración del archivo necesaria para nuestra página personalizada.

• catalog/controller/ajax/index.php: es un archivo de controlador que proporciona la lógica de aplicación del controlador habitual en OpenCart.
• catalog/language/english/ajax/index.php: es un archivo de idioma que ayuda a configurar etiquetas de idioma.
• catalog/view/theme/default/template/ajax/index.tpl: es un archivo de plantilla de vista que contiene el XHTML de la página personalizada.
• catalog/view/theme/default/template/ajax/product.tpl: es un archivo de plantilla de vista que contiene el XHTML de la respuesta AJAX.

Entonces, esa es una lista rápida de los archivos que implementaremos hoy.

Crea archivos de módulo

Continúa y crea una carpeta  catalog/controller/ajax/index.php con el siguiente contenido.

1

<?php

2

// catalog/controller/ajax/index.php

3

class ControllerAjaxIndex extends Controller {

4

  public function index() {

5

    $this->load->language('ajax/index');

6

    $this->load->model('catalog/product');

7

8

    $this->document->setTitle($this->language->get('heading_title'));

9

10

    // load all products

11

    $products = $this->model_catalog_product->getProducts();

12

    $data['products'] = $products;

13

14

    $data['breadcrumbs'] = array();

15

16

    $data['breadcrumbs'][] = array(

17

      'href' => $this->url->link('common/home'),

18

      'text' => $this->language->get('text_home')

19

    );

20

21

    $data['breadcrumbs'][] = array(

22

      'href' => $this->url->link('ajax/index'),

23

      'text' => $this->language->get('heading_title')

24

    );

25

26

    $data['heading_title'] = $this->language->get('heading_title');

27

    $data['text_product_dropdown_label'] = $this->language->get('text_product_dropdown_label');

28

29

    $data['column_left'] = $this->load->controller('common/column_left');

30

    $data['column_right'] = $this->load->controller('common/column_right');

31

    $data['content_top'] = $this->load->controller('common/content_top');

32

    $data['content_bottom'] = $this->load->controller('common/content_bottom');

33

    $data['footer'] = $this->load->controller('common/footer');

34

    $data['header'] = $this->load->controller('common/header');

35

36

    if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/ajax/index.tpl')) {

37

      $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/ajax/index.tpl', $data));

38

    } else {

39

      $this->response->setOutput($this->load->view('default/template/ajax/index.tpl', $data));

40

    }

41

  }

42

43

  // ajax call method

44

  public function ajaxGetProduct() {

45

    if (isset($this->request->get['product_id'])) {

46

      $product_id = (int) $this->request->get['product_id'];

47

48

      if ($product_id > 0) {

49

        // load the particular product requested in ajax

50

        $this->load->model('catalog/product');

51

        $product = $this->model_catalog_product->getProduct($product_id);

52

        $data['product'] = $product;

53

54

        // prepare thumb image

55

        $this->load->model('tool/image');

56

        if ($product['image']) {

57

          $data['thumb'] = $this->model_tool_image->resize($product['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));

58

        }

59

60

        // format price

61

        $data['price'] = $this->currency->format($this->tax->calculate($product['price'], $product['tax_class_id'], $this->config->get('config_tax')));

62

63

        $this->load->language('product/product');

64

        $data['text_manufacturer'] = $this->language->get('text_manufacturer');

65

        $data['text_model'] = $this->language->get('text_model');

66

        $data['text_note'] = $this->language->get('text_note');

67

        $data['tab_description'] = $this->language->get('tab_description');

68

69

        if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/ajax/product.tpl')) {

70

          $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/ajax/product.tpl', $data));

71

        } else {

72

          $this->response->setOutput($this->load->view('default/template/ajax/product.tpl', $data));

73

        }

74

      }

75

    }

76

  }

77

}

Para empezar, el método de index del controlador se utiliza para cargar los archivos de idioma y modelo y configurar las variables comunes para la plantilla OpenCart habitual. Estamos cargando el modelo de producto disponible en el núcleo mismo, por lo que no tenemos que duplicar el código para obtener la información del producto.

Después de cargar el modelo de producto, usamos el método getProducts para cargar todos los productos. Finalmente, concluimos el método de index estableciendo index.tpl como nuestro archivo de plantilla principal.

El siguiente es el importante método ajaxGetProduct, que se usa para construir un bloque de resumen de producto basado en la identificación del producto pasada en la llamada Ajax, como veremos pronto en el archivo de plantilla. Carga el mismo modelo de producto que hicimos en el método de index y llama al método getProduct para obtener información específica del producto en función de la identificación del producto.

Al final, la plantilla product.tpl se establece como plantilla para este método. Específicamente para los requisitos en nuestro caso, estamos usando la plantilla para construir nuestra salida Ajax, pero también podrías enviar la respuesta JSON en su lugar.

Continuando, creemos un archivo de idioma catalog/language/english/ajax/index.php para contener la información de la etiqueta estática.

1

<?php

2

// catalog/language/english/ajax/index.php

3

// Heading

4

$_['heading_title']            = 'Simple Ajax Example';

5

$_['text_product_dropdown_label']   = 'Select Product';

El archivo de plantilla de vista, uno de los archivos más importantes en el contexto de este tutorial, debe crearse en catalog/view/theme/default/template/ajax/index.tpl con el siguiente contenido.

1

<!-- catalog/view/theme/default/template/ajax/index.tpl -->

2

<?php echo $header; ?>

3

<div class="container">

4

  <ul class="breadcrumb">

5

    <?php foreach ($breadcrumbs as $breadcrumb) { ?>

6

    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>

7

    <?php } ?>

8

  </ul>

9

  <div class="row"><?php echo $column_left; ?>

10

    <?php if ($column_left && $column_right) { ?>

11

    <?php $class = 'col-sm-6'; ?>

12

    <?php } elseif ($column_left || $column_right) { ?>

13

    <?php $class = 'col-sm-9'; ?>

14

    <?php } else { ?>

15

    <?php $class = 'col-sm-12'; ?>

16

    <?php } ?>

17

    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

18

      <h2><?php echo $heading_title; ?></h2>

19

      <fieldset id="account">

20

      <div>

21

        <label class="col-sm-2 control-label" for="product"><?php echo $text_product_dropdown_label; ?></label>

22

        <div class="col-sm-10">

23

          <select name="product" class="form-control" id="product">

24

            <option>-- <?php echo $text_product_dropdown_label; ?> --</option>

25

            <?php foreach ($products as $product) { ?>

26

              <option value="<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></option>

27

            <?php } ?>

28

          </select>

29

        </div>

30

      </div>

31

      </fieldset>

32

      <div id="product_summary"></div>

33

      <?php echo $content_bottom; ?></div>

34

    <?php echo $column_right; ?></div>

35

</div>

36

<?php echo $footer; ?>

37

38

<script type="text/javascript">

39

  $('#product').on('change', function() {

40

    $.ajax({

41

      url: 'index.php?route=ajax/index/ajaxGetProduct&product_id=' + this.value,

42

      dataType: 'html',

43

      success: function(htmlText) {

44

        $('#product_summary').html(htmlText);

45

      },

46

      error: function(xhr, ajaxOptions, thrownError) {

47

        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

48

      }

49

    });

50

  });

51

</script>

El fragmento de nuestro interés se encuentra al final de index.tpl, el código JavaScript que utiliza métodos jQuery para vincular cambios y eventos Ajax. Cuando el usuario selecciona un producto del cuadro desplegable, se activa el evento de cambio que finalmente realiza una llamada Ajax. En la llamada Ajax, enviamos el product_id adjunto como una variable de cadena de consulta GET.

Por otro lado, como ya hemos discutido en la configuración del controlador, ajaxGetProduct envía el XHTML del bloque de resumen del producto basado en la variable product_id query-string. En el método de éxito, agregamos la respuesta XHTML a la etiqueta div que tiene el atributo id establecido en product_summary.

Finalmente, sigue adelante y crea un archivo de plantilla catalog/view/theme/default/template/ajax/product.tpl con el siguiente contenido para una llamada Ajax.

1

<!-- catalog/view/theme/default/template/ajax/product.tpl -->

2

<div style="border: 1px solid #CCC;padding:10px;margin:10px;">

3

  <h3><?php echo $product['name']; ?> - <?php echo $price; ?></h3>

4

  <p><img src="<?php echo $thumb; ?>"/></p>

5

  <p><b><?php echo $text_manufacturer; ?></b>&nbsp;<?php echo $product['manufacturer']; ?></p>

6

  <p><b><?php echo $text_model; ?></b>&nbsp;<?php echo $product['model']; ?></p>

7

</div>

Aquí no hay nada lujoso: hemos incluido un bloque de resumen de producto básico XHTML.

Entonces, eso es todo en lo que respecta a la configuración del archivo. En nuestra próxima sección, revisaremos la interfaz para probar lo que hemos construido hasta ahora.

Pruebas de interfaz

Así que hemos hecho todo el trabajo duro y ahora es el momento de realizar algunas pruebas. Dirígete a la interfaz de OpenCart y visita la URL http://www.yourstore.com/index.php?route=ajax/index. Debería mostrar una interfaz atractiva como se muestra en la siguiente captura de pantalla.

Es nuestra página personalizada y muestra un cuadro desplegable que contiene la lista de todos los productos. Ahora, intentemos seleccionar un producto del cuadro de selección, y haremos una llamada Ajax en segundo plano.

Como resultado, deberías ver un bonito bloque de resumen de producto que se muestra justo debajo del cuadro desplegable, como se muestra en la siguiente captura de pantalla.

Si seguiste el tutorial e implementaste todos los archivos como se explicó, ¡debería funcionar sin problemas para ti tan bien como lo hizo para mí! Por supuesto, esa fue una demostración bastante simple de cómo funciona Ajax en OpenCart, pero puedes estirarlo al siguiente nivel según tus requisitos.

Continúa y juega con él, e intenta hacer algunas cosas interactivas usando Ajax, ya que es la mejor manera de aprender. Eso es todo por hoy y volveré pronto con algunas cosas más emocionantes.

Conclusión

Ajax con OpenCart fue la atracción central del artículo de hoy. Como de costumbre, adoptamos un enfoque de módulo personalizado para demostrarlo e hicimos un caso de uso simple pero efectivo.

Como siempre, si estás buscando herramientas, utilidades, extensiones, etc. de OpenCart adicionales que puedas aprovechar en tus propios proyectos o para tu propia educación, no olvides ver lo que tenemos disponible en el mercado.

Espero que haya sido informativo y útil, ¡y no dudes en dejar tus consultas y comentarios!