Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart

Cómo usar Ajax con OpenCart

Read Time: 7 mins

Spanish (Español) translation by Juliana Carvajal (you can also view the original English article)

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.

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.

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.

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.

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.

Custom Page Drop-DownCustom Page Drop-DownCustom Page Drop-Down

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.

AJAX PreviewAJAX PreviewAJAX Preview

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!

Advertisement
Did you find this post useful?
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.