Cómo usar Ajax con OpenCart

La inclusión de las bibliotecas jQuery en el núcleo de OpenCart hace que la implementación de Ajax sea una brisa y más que una experiencia agradable. De hecho, encontrará varios fragmentos de código en todo el marco que muestran el uso intensivo de jQuery, si intenta indagar 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 le permite seleccionar un producto del cuadro desplegable y muestra un buen 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á utilizando Ajax sobre la marcha. Por supuesto, no es algo que lo haga un ejemplo fuera del mundo, pero creo que servirá para el propósito básico de mostrar cómo funcionan las cosas en OpenCart.

Asumo que estás usando 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 me deslizaré a través de los conceptos básicos del desarrollo de módulos personalizados en OpenCart. Sin embargo, si no está familiarizado con esto, una breve explicación de los fragmentos de código intermedios garantiza que pueda seguir hasta el final.!

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

Vayamos rápidamente a la configuración de archivos requerida 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.
catálogo / idioma / inglés / ajax / index.php: Es un archivo de idioma que ayuda a configurar las 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 vamos a implementar hoy..

Crear archivos de módulo

Sigue adelante y crea un archivo. catalog / controller / ajax / index.php con los siguientes contenidos.

load-> language ('ajax / index'); $ this-> load-> model ('catalog / product'); $ this-> document-> setTitle ($ this-> language-> get ('heading_title')); // cargar todos los productos $ products = $ this-> model_catalog_product-> getProducts (); $ datos ['productos'] = $ productos; $ 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));  // función pública ajax call method ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; if ($ product_id> 0) // carga el producto particular solicitado en ajax $ this-> load-> model ('catalog / product'); $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ datos ['producto'] = $ producto; // preparar la imagen del pulgar $ 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'));  // precio del formato $ datos ['precio'] = $ este-> moneda-> formato ($ este-> impuestos-> calcular ($ producto ['precio'], $ producto ['tax_class_id'], $ este- > config-> get ('config_tax'))); $ this-> load-> language ('producto / producto'); $ 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));

Para empezar, la índice El método 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 del producto, estamos usando el obtenerProductos Método para cargar todos los productos. Finalmente, concluimos los índice método mediante la configuración index.tpl como nuestro archivo de plantilla principal.

Lo siguiente es lo importante ajaxGetProduct Método, que se utiliza para crear un bloque de resumen de producto basado en la identificación del producto que se pasó en la llamada Ajax, como veremos pronto en el archivo de plantilla. Carga el mismo modelo de producto que hicimos en el. índice método, y llama al obtenerProducto método para obtener información específica del producto basada en la identificación del producto.

Al final, el product.tpl La plantilla se establece como una plantilla para este método. Específicamente para los requisitos en nuestro caso, estamos usando la plantilla para compilar nuestra salida Ajax, pero también puede enviar la respuesta JSON.

Avanzando, vamos a crear un archivo de idioma. catálogo / idioma / inglés / ajax / index.php para mantener 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 los siguientes contenidos.

">

El fragmento de nuestro interés está al final de index.tpl, El código JavaScript que utiliza los métodos jQuery para enlazar cambios y eventos Ajax. Cuando el usuario selecciona un producto del cuadro desplegable, se activa el evento de cambio que eventualmente realiza una llamada Ajax. En la llamada Ajax, estamos enviando el identificación de producto añadido como una variable de cadena de consulta GET.

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

Por último, sigue adelante y haz un archivo de plantilla. catalog / view / theme / default / template / ajax / product.tpl Con los siguientes contenidos para una llamada Ajax..

Nada especial aquí: acabamos de incluir 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, pasaremos por la interfaz para probar lo que hemos construido hasta ahora..

Pruebas frontales

Así que hemos hecho todo el trabajo duro, ¡y ahora es el momento de 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 en el cuadro de selección, y hará una llamada Ajax en segundo plano.

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

Si ha seguido el tutorial e implementado todos los archivos como se explica, ¡debería funcionar sin problemas para usted tan bien como lo hizo para mí! Por supuesto, esa fue una demostración bastante simple de cómo funciona Ajax en OpenCart, pero se podría extender al siguiente nivel según sus requisitos..

Adelante, juegue con él e intente hacer algunas cosas interactivas utilizando Ajax, ya que es la mejor manera de aprender. Entonces, eso es todo por hoy, y volveré pronto con algunas cosas más emocionantes..

Conclusión

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

Como siempre, si está buscando herramientas adicionales de OpenCart, utilidades, extensiones, etc. que pueda aprovechar en sus propios proyectos o para su propia educación, no olvide ver lo que tenemos disponible en el mercado..

Espero que haya sido informativo y útil, y no dude en dejar sus consultas y comentarios.!

Código